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 ...
随机推荐
- 51nod1126 求递推序列的第N项【递推】
有一个序列是这样定义的:f(1) = 1, f(2) = 1, f(n) = (A * f(n - 1) + B * f(n - 2)) mod 7. 给出A,B和N,求f(n)的值. Input 输 ...
- (ccf模拟)201709-2公共钥匙盒
#include <iostream> #include<string> #include <algorithm> #include<sstream> ...
- springcloud(一):初识springcloud
研究了一段时间Spring Boot了准备向Spring Cloud进发,公司架构和项目也全面拥抱了Spring Cloud.在使用了一段时间后发现Spring Cloud从技术架构上降低了对大型系统 ...
- FZU - 1606 - Format the expression
先上题目: Problem 1606 Format the expression Accept: 87 Submit: 390Time Limit: 1000 mSec Memory Li ...
- 心急的C小加 贪心算法
心急的C小加 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 C小加有一些木棒,它们的长度和质量都已经知道,需要一个机器处理这些木棒,机器开启的时候需要耗费一个单位的 ...
- Spring MVC-页面重定向示例(转载实践)
以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_page_redirection.htm 说明:示例基于Spring MVC 4. ...
- innodb_support_xa=1
mysql> show create table t; CREATE TABLE `t` ( `id` ) NOT NULL AUTO_INCREMENT, `num` ) DEFAULT NU ...
- HDU 5174
题意有点不明白,因为MAX为int最大值,推测为64位,AC #include <cstdio> #include <iostream> #include <cstrin ...
- HDU 4273
计算凸包重心到各面的最短距离. 若知道重心,按四面体用体积法即可求出高. 关键在于,多面体重心的求法.这必须把多面体分割成多个四面体来求.下面从多边形的重心说起. 一般来用,对于一个多边形(p0,p1 ...
- 【bzoj1001】【狼抓兔子】
1001: [BeiJing2006]狼抓兔子 Time Limit: 15 Sec Memory Limit: 162 MB Submit: 12719 Solved: 3017 [Submit][ ...