上次做项目的时候，要求点击链接，这个链接的圆形背景扩散充满整个页面，今天把这个效果整理一下，是简单的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. 天翼云 RDS数据库操作

    1.RDS数据库创建好之后点击RDS实例管理找到已下信息 官方文档 -1:http://www.ctyun.cn/help/qslist/567 官方文档 -2:http://www.ctyun.cn ...

  2. Golang - 异常处理

    目录 Golang - 异常处理 1. 抛异常和处理异常 2. 返回异常 Golang - 异常处理 1. 抛异常和处理异常 package main import "fmt" / ...

  3. sql语句学习（NOT EXISTS 和 NOT IN ）

    NOT EXISTS SELECT a.*FROM t_user aWHERE a.id_card LIKE '%3203821995100%'AND NOT EXISTS ( SELECT id F ...

  4. 5、Linux的常用命令

    ls 查看当面目录结构 ls -l 列表查看当前目录 cd:切换目录 pwd:显示目前的目录 mkdir:创建一个新的目录 rmdir:删除一个空的目录 cp: 复制文件或目录 rm: 移除文件或目录 ...

  5. java里面的队列

    非阻塞无界队列 ConcurrentLinkedQueue   public static void main(String[] args) throws InterruptedException { ...

  6. 基于Mysql-Proxy 实现MariaDB 读写分离

    一.Mysql-Proxy 简单介绍 MySQL-Proxy是一个处于你的client端和MySQL server端之间的简单程序,它可以监测.分析或改变它们的通信.它使用灵活,没有限制,常见的用途包 ...

  7. mysql优化 explain index

    本文章属于转载,尊重原创:http://www.2cto.com/database/201501/369135.html 实验环境: 1.sql工具:Navicat 2.sql数据库,使用openst ...

  8. MYSQL 技术内幕 博客学习

    http://blog.csdn.net/CCyutaotao/article/category/6147849/3

  9. nginx源代码分析--进程间通信机制 &amp; 同步机制

    Nginx源代码分析-进程间通信机制 从nginx的进程模型能够知道.master进程和worker进程须要通信,nginx中通信的方式有套接字.共享内存.信号.对于master进程,从外部接受信号, ...

  10. MySQL主从复制和读写分离

    我们知道应用对数据库的訪问通常情况下大部分都是读操作,写仅仅占非常少一部分.因此读写分离(read-write-splitting)能有效减少主库压力,从而解决站点发展过程中遇到的第一次数据库瓶颈. ...