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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta charset="utf-8">

    <title>自己测试写博客的01</title>

    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

    <meta name="format-detection" content="telephone=no, address=no">

    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>

    <style type="text/css">

        .box1{height: 200px;background: #eee;}

        .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;}

        .box3{position: relative;transform: scale(30);z-index: 2;opacity: 0.6;}

    </style>

</head>

<body>

    <div class="box1"></div>

    <div class="box2">点我</div>

<script type="text/javascript">

    $(document).ready(function(){

       $(".box2").click(function(){

           $(this).addClass("box3").text("");

           setTimeout('window.location.href="https://www.baidu.com/"',500);

       });

    });

</script>

</body>

</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. SQLSERVER2017 链接数据库不行

    以为作业要把mysql 数据导入sqlserver,自己装了sqlserver2017, 通过ODBC 来先创建ODBC,mysql的数据库然后测试成功后,在sqlserver创建链接数据库,一直有问 ...

  2. 【hihocoder 1475】 数组分拆

    [题目链接]:http://hihocoder.com/problemset/problem/1475 [题意] _< [题解] /* 别人的题解 首先对于每个位置预处理数组的前缀和,即s[i] ...

  3. Java Web学习总结（22）——使用kaptcha生成验证码

    kaptcha是一个简单好用的验证码生成工具,通过配置,可以自己定义验证码大小.颜色.显示的字符等等.下面就来讲一下如何使用kaptcha生成验证码以及在服务器端取出验证码进行校验. 一.搭建测试环境 ...

  4. jvm学习-ClassLoader(二)

    ClassLoader结构 jdk加载的4个步骤 CustomClassLoader 用户自定义的classLoader APPClassLoader主要加载classPath下面的class Ext ...

  5. gdb的follow-fork-mode使用以及多线程操作

    对于多线程,如果希望让其他线程不执行,只有调试线程执行,使用 set scheduler-locking [on|off|step]

  6. HTTP基本认证(Basic Authentication)的JAVA演示样例

    大家在登录站点的时候.大部分时候是通过一个表单提交登录信息.可是有时候浏览器会弹出一个登录验证的对话框.例如以下图,这就是使用HTTP基本认证.以下来看看一看这个认证的工作过程:第一步:  clien ...

  7. [Cypress] Wait for XHR Responses in a Cypress Test

    When testing interactions that require asynchronous calls, we’ll need to wait on responses to make s ...

  8. POJ 3628 Bookshelf 2 题解

    本题解法非常多,由于给出的数据特殊性故此能够使用DFS和BFS,也能够使用01背包DP思想来解. 由于一般大家都使用DFS,这里使用非常少人使用的BFS.缺点是比DFS更加耗内存,只是长处是速度比DF ...

  9. log4js－Node.js中的日志管理模块使用与封装

    开发过程中,日志记录是不可缺少的事情.尤其是生产系统中常常无法调试,因此日志就成了重要的调试信息来源. Node.js,已经有现成的开源日志模块,就是log4js,源代码地址:点击打开链接 项目引用方 ...

  10. winform设置超时时间

    ); //设置超时时间 var completedTask = await Task.WhenAny(new Task(async () => { );//执行的方法示例这里用延迟代替 }), ...