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

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  2. POJ 3126 Prime Path (BFS + 素数筛)

    链接 : Here! 思路 : 素数表 + BFS, 对于每个数字来说, 有四个替换位置, 每个替换位置有10种方案(对于最高位只有9种), 因此直接用 BFS 搜索目标状态即可. 搜索的空间也不大. ...

  3. 洛谷P1141 01迷宫【DFS】

    有一个仅由数字00与11组成的n \times nn×n格迷宫.若你位于一格0上,那么你可以移动到相邻44格中的某一格11上,同样若你位于一格1上,那么你可以移动到相邻44格中的某一格00上. 你的任 ...

  4. [POI2005]BAN-Bank Notes

    [POI2005]BAN-Bank Notes POI真好玩.. 如果没有记录方案的话就是一个简单的二进制或单调队列优化多重背包的问题. 但是非常难受的是要记录方案. 而且空间只给了\(64MB\), ...

  5. Python检测删除你的好友-wxpy模块（发送特殊字符式）

    下面是代码: from wxpy import *import timeprint("本软件采用特殊字符检测,即对方收不到任何信息!")print("或许某个版本微信就会 ...

  6. raize5的修改。

    ( ( ; Col1: $; Col2: $; Col3: $; Col4: $ ), ( ; Col1: $; Col2: $FA; Col3: $; Col4: $ ), ( ; Col1: $C ...

  7. （16）Spring Boot使用Druid（编程注入）【从零开始学Spring Boot】

    在上一节使用是配置文件的方式进行使用druid,这里在扩散下使用编程式进行使用Druid,在上一节我们新建了一个类:DruidConfiguration我在这个类进行编码: package com.k ...

  8. 运行npm run watch时报：events.js:182 throw er; // Unhandled 'error' event

    I had this issue i did the following steps and i have no issues anymore: Delete node_modules directo ...

  9. RMAN主要命令 show,list,crosscheck,delete详解

    Oracle RMAN 的 show,list,crosscheck,delete命令整理  Oracle RMAN 的 show,list,crosscheck,delete命令整理 1.SHOW命 ...

  10. DJANGO里让用户自助修改密码

    参考了网上的实现,最终实现的各代码如下: changepwd.html模板文件: {% extends "Prism/index.html" %} {% load staticfi ...