css3动画,点击圆形背景扩展整个页面效果
上次做项目的时候,要求点击链接,这个链接的圆形背景扩散充满整个页面,今天把这个效果整理一下,是简单的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动画,点击圆形背景扩展整个页面效果的更多相关文章
- CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)
CSS3边框: 1.CSS3圆角:border-radius 属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...
- 基于jQuery CSS3鼠标点击动画效果
分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="co ...
- 用CSS3的animation轻松实现背景动画:漂浮的云
背景动画如果用的恰当,会给网页带来意想不到的效果.在过去,我们只能用flash或Javascript来实现.幸运的是,CSS3的流行使得我们完全可以使用它来实现这种效果,不再依赖其它编程技术.一段简单 ...
- css3 动画 总结
原来的时候写过一个小程序,里面有一个播放背景音乐的按钮(也是一个圆形的图片),它是一直在旋转的,当我们点击这个按钮的可以暂停或者播放背景音乐.当初的这个动画,是同事自己写的,我看到的时候以为是他在上面 ...
- CSS3动画:流彩文字效果+图片模糊效果+边框伸展效果实现
前言 首先第一步,先布局html代码如下: <div class="wrap"> <img src="images/1.jpg" class= ...
- 11个超震撼的HTML5和纯CSS3动画源码
1.jQuery多功能手风琴个人信息菜单面板 这是一款基于jQuery的手风琴个人信息菜单面板,每一个菜单项展开后可以自定义布局,因此可以为每一个菜单项实现多功能.类似这样的多功能菜单还有jQuery ...
- 美妙的 CSS3 动画!一组梦幻般的按钮效果
今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...
- 【转】15个无比华丽的HTML5/CSS3动画应用
原文转自:http://www.html5cn.org/article-7089-1.html 前几天,HTML5标准已经尘埃落定,未来的Web将会是由HTML5主导,当然作为开发者对这一喜讯更为动心 ...
- CSS3 动画基础
该文为译文转载,原文地址:http://tech.163.com/mobile/10/0106/09/5SB96QSM00112K88.html 译文:你需要知道的CSS3 动画技术 原文:Wha ...
随机推荐
- 【密码学】RSA加密 kotlin实现方法(支持任意字节长度)
这个编辑器不支持kotlin,尴尬了···· 算了,就用Java来弄吧 val 定义常量 var 定义变量 具体kotlin的开发手册详见:http://www.runoob.com/kotlin/k ...
- [luogu2825 HEOI2016/TJOI2016] 游戏 (二分图最大匹配)
传送门 Description 在2016年,佳缘姐姐喜欢上了一款游戏,叫做泡泡堂.简单的说,这个游戏就是在一张地图上放上若干个炸弹,看是否能炸到对手,或者躲开对手的炸弹.在玩游戏的过程中,小H想到了 ...
- Java基本排序算法
转载来自:https://www.jianshu.com/p/5e171281a387 一遍记住Java常用的八种排序算法与代码实现 1.直接插入排序 经常碰到这样一类排序问题:把新的数据插入到已 ...
- MongoDB简介、特点、原理、使用场景、应用案例
简介 MongoDB[1] 是一个基于分布式文件存储的数据库.由C 语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. MongoDB[2] 是一个介于关系数据库和非关系数据库之间的产品, ...
- Spring 单例模式和多例模式
1.Spring中的对象默认都是 单例模式. 2.使用 @Scope("prototype") 注解来使对象成为多例模式. 3.通过@Autowired 注入的Service 或者 ...
- LInux下实时网络流量监控工具nload教程
https://jingyan.baidu.com/article/642c9d340cbef0644a46f72a.html http://blog.csdn.net/u014171641/arti ...
- Spring MVC-Hello World示例(转载实践)
以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_hello_world_example.htm 说明:示例基于Spring MVC ...
- 新手git: ssh: connect to host localhost port 22: Connection refused
由于gitlab上要git pull或者git clone,可是每次都出现这个问题.之前偶尔出现这个问题.可是仅仅是偶尔.这是为什么呢?然后就開始搜索网上的解决方式了. 这个问题搜索网上非常多答案.可 ...
- js限制checkbox选中个数
今天在做项目时,碰到一个问题,我须要展示多个checkbox复选框,而仅仅能同意最多选6个.调试了老半天.最终出来了,代码例如以下: <SCRIPT LANGUAGE="JavaScr ...
- Codeforces Round #253 (Div. 1)-A,B
A题: 由题意可知,最多翻10次就能够(事实上8次就够了).那么我们就用状态压缩表示状态. 对于某种状态,假设某一位为0,那么代表这一位不翻,否则代表这一位翻. 对于某一种翻的状态: 假设牌中有G3, ...