上次做项目的时候，要求点击链接，这个链接的圆形背景扩散充满整个页面，今天把这个效果整理一下，是简单的css3的动画特效，粘贴下面的代码看效果

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.     <meta charset="utf-8">
  6.     <title>自己测试写博客的01</title>
  7.  
  8.     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  9.     <meta name="format-detection" content="telephone=no, address=no">
  10.  
  11.     <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
  12.  
  13.     <style type="text/css">
  14.         .box1{height: 200px;background: #eee;}
  15.         .box2{background: #ffc658;width: 100px;height: 100px;border-radius: 50%;margin:40px 0 0 100px;;line-height: 100px;text-align: center;color: #fff;font-size: 20px; cursor: pointer;transition: all 0.5s ease-in-out;}
  16.         .box3{position: relative;transform: scale(30);z-index: 2;opacity: 0.6;}
  17.     </style>
  18. </head>
  19. <body>
  20.  
  21.     <div class="box1"></div>
  22.     <div class="box2">点我</div>
  23.  
  24. <script type="text/javascript">
  25.     $(document).ready(function(){
  26.  
  27.        $(".box2").click(function(){
  28.            $(this).addClass("box3").text("");
  29.            setTimeout('window.location.href="https://www.baidu.com/"',500);
  30.        });
  31.  
  32.     });
  33. </script>
  34.  
  35. </body>
  36. </html>

css3动画，点击圆形背景扩展整个页面效果的更多相关文章

  1. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  2. 基于jQuery CSS3鼠标点击动画效果

    分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="co ...

  3. 用CSS3的animation轻松实现背景动画：漂浮的云

    背景动画如果用的恰当,会给网页带来意想不到的效果.在过去,我们只能用flash或Javascript来实现.幸运的是,CSS3的流行使得我们完全可以使用它来实现这种效果,不再依赖其它编程技术.一段简单 ...

  4. css3 动画 总结

    原来的时候写过一个小程序,里面有一个播放背景音乐的按钮(也是一个圆形的图片),它是一直在旋转的,当我们点击这个按钮的可以暂停或者播放背景音乐.当初的这个动画,是同事自己写的,我看到的时候以为是他在上面 ...

  5. CSS3动画：流彩文字效果+图片模糊效果+边框伸展效果实现

    前言 首先第一步,先布局html代码如下: <div class="wrap"> <img src="images/1.jpg" class= ...

  6. 11个超震撼的HTML5和纯CSS3动画源码

    1.jQuery多功能手风琴个人信息菜单面板 这是一款基于jQuery的手风琴个人信息菜单面板,每一个菜单项展开后可以自定义布局,因此可以为每一个菜单项实现多功能.类似这样的多功能菜单还有jQuery ...

  7. 美妙的 CSS3 动画！一组梦幻般的按钮效果

    今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...

  8. 【转】15个无比华丽的HTML5/CSS3动画应用

    原文转自:http://www.html5cn.org/article-7089-1.html 前几天,HTML5标准已经尘埃落定,未来的Web将会是由HTML5主导,当然作为开发者对这一喜讯更为动心 ...

  9. CSS3 动画基础

    该文为译文转载,原文地址:http://tech.163.com/mobile/10/0106/09/5SB96QSM00112K88.html   译文:你需要知道的CSS3 动画技术 原文:Wha ...

随机推荐

  1. 绝对好用的浏览器json解析网址

    你们是否经常在浏览器输入请求地址解析遇到中文乱码的情况,今天我找到了一个好用的浏览器解析json网址,绝对好用. 1.直接输入网址 http://pro.jsonlint.com/ 2.输入要解析的j ...

  2. Python-Pandas简单操作

    1.直接构建复杂嵌套索引 2. MultiIndex方式构建复杂的索引 多层索引操作 pandas堆叠处理

  3. 2.3 SVN在myeclipse中的使用

    一.将svn插件文件夹复制到myeclipse的dropins目录下,并重启myeclipse 二.从SVN中检查项目到myeclipse  2.打开myeclipse,点击window的show v ...

  4. 基于ffmpeg和libvlc的视频剪辑、播放器

    以前研究的时候,写过一个简单的基于VLC的视频播放器.后来因为各种项目,有时为了方便测试,等各种原因,陆续加了一些功能,现在集成了视频播放.视频加减速.视频剪切,视频合并(增加中)等功能在一起.有时候 ...

  5. Seaside HDU 3665 【Dijkstra】

    Problem Description XiaoY is living in a big city, there are N towns in it and some towns near the s ...

  6. 教你高速高效接入SDK——Unity统一接入渠道SDK（Android篇）

    U8SDK的设计之初,就是为了可以支持各种游戏引擎开发的游戏,而不不过Android的原生平台.眼下一大半的手游,都是採用Unity3D和Cocos2dx开发,那么这里,我们就先来一步步给大家演示,用 ...

  7. sql格式化日期

    SELECT CONVERT(date, GETDATE()) ---- SELECT CONVERT(varchar(), GETDATE(), ) ----

  8. poj2750--Potted Flower(线段树)

    题目链接:点击打开链接 题目大意:给出n个数排成一个环.求环的最大连续子序列,不能是总序列 建一个线段树来求最大子序列假设仅仅是一个序列.那么求最大连续子序列非常easy,可是假设是一个环,那就要考虑 ...

  9. Linux - 进程与内存查看

    top NI表示进程的优先级. -20的优先级,非常的高. top -p xxx 可以查看具体的进程情况. renice -n -6 进程ID 可以改变一个正在运行的pid的优先级. [root@lo ...

  10. 【撸码caffe 一】syncedmen.hpp

    SyncedMemory类主要负责在主机(CPU)和设备(GPU)之间管理内存分配和数据同步工作,封装了CPU和GPU之间的数据交互操作. 补充一点GPU的相关知识: 对CUDA架构而言,主机端的内存 ...