采用CSS3的动态元素（动画）设计div块的层级式展现
此练习作品是为学习HTML5+CSS3而设计的（如有不好请大家批评指教~~~）。
操作：当页面加载时，点击网页中的绿色块（一层），则有其他几块（二层）从其中央出现并向外延伸并旋转，点击这几块中任意一个颜色模块，则被点击的颜色模块将“逐渐”取代原先一层绿色模块，其余模块将渐变消失！
采用了CSS3的动画@keyframes规则设计div块的移动、伸缩、旋转和渐变：
动画定义：animation:animationName;
div块的移动：
@keyframes keyframeName{
from{divInitialLocation:value}
to{divEndLocation:value}
}
div块的伸缩:
@keyframes keyframeName{
from{transform:scale(multipleValue,multipleValue)}
to{transform:scale(multipleValue,multipleValue)}
}
div块的旋转:
@keyframes keyframeName{
from{transform:rotateY(angleValue)}
to{transform:rotateY(angleValue)}
}
div块的渐变（也是利用动画规则@keyframes和标签元素属性opacity来实现的）:
@keyframes keyframeName{
from{opacity:InitialValue}
to{opacity:Endvalue}
}
具体代码实现如下：
body部分代码：
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
</body>
script部分代码:
<script>
window.onload=function(){
var one=document.getElementById('one');
var two=document.getElementById('two');
var three=document.getElementById('three');
var four=document.getElementById('four');
var five=document.getElementById('five'); var twotwo=document.getElementById('twotwo'); one.onclick=function(){
two.style.animation="two 5s";
two.style.display="block";
three.style.animation="three 5s";
three.style.display="block";
four.style.animation="four 5s";
four.style.display="block";
five.style.animation="five 5s";
five.style.display="block";
}
two.onclick=function(){
one.style.opacity="0";
three.style.opacity="0";
four.style.opacity="0";
five.style.opacity="0";
one.style.animation="opacity 5s";
three.style.animation="opacity 5s";
four.style.animation="opacity 5s";
five.style.animation="opacity 5s"; two.style.top="50%";
two.style.transform="scale(2,2)";
two.style.animation="twotwo 5s";
}
three.onclick=function(){
one.style.opacity="0";
two.style.opacity="0";
four.style.opacity="0";
five.style.opacity="0";
one.style.animation="opacity 5s";
two.style.animation="opacity 5s";
four.style.animation="opacity 5s";
five.style.animation="opacity 5s"; three.style.left="50%";
three.style.transform="scale(2,2)";
three.style.animation="threethree 5s";
}
four.onclick=function(){
one.style.opacity="0";
two.style.opacity="0";
three.style.opacity="0";
five.style.opacity="0";
one.style.animation="opacity 5s";
two.style.animation="opacity 5s";
three.style.animation="opacity 5s";
five.style.animation="opacity 5s"; four.style.left="50%";
four.style.transform="scale(2,2)";
four.style.animation="fourfour 5s";
}
five.onclick=function(){
one.style.opacity="0";
two.style.opacity="0";
three.style.opacity="0";
four.style.opacity="0";
one.style.animation="opacity 5s";
two.style.animation="opacity 5s";
three.style.animation="opacity 5s";
four.style.animation="opacity 5s"; five.style.top="50%";
five.style.transform="scale(2,2)";
five.style.animation="fivefive 5s";
}
}
</script>
style部分代码：
<style>
html,div,body,canvas{
margin:0;
padding:0;
}
div{
//border:1px solid;
border-radius:50px;
}
#one{
position:absolute;
height:100px;
width:100px;
top:50%;
left:50%;
margin:-50px 0 0 -50px;
animation:one 5s;
border-radius:50px;
transform:scale(2,2);
background:#1d953f;
}
#two{
position:absolute;
height:100px;
width:100px;
top:25%;
left:50%;
margin:-50px 0 0 -50px;
//z-index:1;
//animation:two 5s;
display:none;
background:#ea66a6;
}
#three{
position:absolute;
height:100px;
width:100px;
top:50%;
left:25%;
margin:-50px 0 0 -50px;
//z-index:2;
//animation:three 5s;
display:none;
background:#e0861a;
}
#four{
position:absolute;
height:100px;
width:100px;
top:50%;
left:75%;
margin:-50px 0 0 -50px;
//z-index:3;
//animation:four 5s;
display:none;
background:#00ae9d;
}
#five{
position:absolute;
height:100px;
width:100px;
top:75%;
left:50%;
margin:-50px 0 0 -50px;
//z-index:4;
//animation:five 5s;
display:none;
background:#ed1941;
}
@keyframes one{
from{transform:scale(1,1);}
to{transform:scale(2,2);}
}
@keyframes two{
0%{top:50%}
50%{top:25%;transform:rotateY(0deg);}
100%{transform:rotateY(360deg);}
}
@keyframes twotwo{
0%{top:25%;transform:scale(1,1);}
50%{top:50%;transform:scale(1,1);}
100%{transform:scale(2,2);}
}
@keyframes three{
0%{left:50%}
50%{left:25%;transform:rotateY(0deg);}
100%{transform:rotateY(360deg);}
}
@keyframes threethree{
0%{left:25%;transform:scale(1,1);}
50%{left:50%;transform:scale(1,1);}
100%{transform:scale(2,2);}
}
@keyframes four{
0%{left:50%}
50%{left:75%;transform:rotateY(0deg);}
100%{transform:rotateY(360deg);}
}
@keyframes fourfour{
0%{left:75%;transform:scale(1,1);}
50%{left:50%;transform:scale(1,1);}
100%{transform:scale(2,2);}
}
@keyframes five{
0%{top:50%}
50%{top:75%;transform:rotateY(0deg);}
100%{transform:rotateY(360deg);}
}
@keyframes fivefive{
0%{top:75%;transform:scale(1,1);}
50%{top:50%;transform:scale(1,1);}
100%{transform:scale(2,2);}
}
@keyframes opacity{
from{opacity:1}
to{opacity:0}
}
</style>
效果图如下：
第一幅图：
第二幅图：
第三幅图：
更多知识分享：微笑空间站
采用CSS3的动态元素（动画）设计div块的层级式展现的更多相关文章
- 采用CSS3设计的登录界面，动态效果（动画）
与上一篇的“采用CSS3设计的登陆界面”的相同,只是样式style添加了CSS3的动画元素. style内容如下: <style> html,body,div{ margin:0; pad ...
- Jquery 动态交换两个div位置并添加Css动画效果
前端网页开发中我们经常会遇到需要动态置换两个DIV元素的位置,常见的思路大多是不考虑原始位置,直接采用append或者appendTo方式将两元素进行添加,该法未考虑原始位置,仅会添加为元素的最后一子 ...
- 【原】移动web动画设计的一点心得——css3实现跑步
今年3月份,由于公司业务需要,我转岗到微信产品部,离开了TID团队,人都是有感情的动物,更何况在一个团队呆了快 3 年,心中十分舍不得,鬼哥说了“天下没有不散的宴席...”,在我的世界里又多了一次离别 ...
- jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件
插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...
- 基于jQ+CSS3页面滚动内容元素动画特效
今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Oper ...
- 采用CSS3设计的登陆界面
body部分内容: <body> <form id="form_id" name="form_id" method="get&quo ...
- CSS3全览_动画+滤镜
CSS3全览_动画+滤镜 目录 CSS3全览_动画+滤镜 1. 列表和生成的内容 2. 变形 3. 过渡 4. 动画 5. 滤镜, 混合, 裁剪和遮罩 6. 针对特定媒体的样式 作者: https:/ ...
- [CSS3] 学习笔记-CSS动画特效
在CSS3中,出现了很多出彩的效果,例如2D.3D以及过度.动画和多列等.这些效果为页面设计添加了很多的可选设计. 1.2D.3D转换 转换,是使元素改变尺寸.形状.位置的一种效果:通过CSS3转换, ...
- CSS3属性animation-play-state控制动画运行或暂停的技巧
animation-play-state介绍 animation-play-state 属性规定动画正在运行还是暂停. div{ animation-play-state:paused; -webki ...
随机推荐
- js库写法
前言: 现在javascript库特别多,其写法各式各样,总结几种我们经常见到的,作为自己知识的积累.而目前版本的 JavaScript 并未提供一种原生的.语言级别的模块化组织模式,而是将模块化的方 ...
- 经典收藏 50个jQuery Mobile开发技巧集萃
http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 1.Backbone移动实例 这是在Safari中运行的一款Ba ...
- Prime & 反素数plus
题意: 求因数个数为n的最小正整数k. n<=10^9输出其唯一分解形式 SOL: 模拟题,一眼看过去有点惊讶...这不是我刚看过的反素数吗... 咦数据怎么这么大,恩搞个高精吧... 于是T了 ...
- Delphi中对BCD码的直接支持 (转)
最近在Delphi下写软件,需要将数据转换为BCD码和将BCD码转换为其它数据类型,从网上搜索了一下,没有发现好的函数,于是就想自定义函数来完成BCD与其它格式的数据转换功能.但最终没有动手写,先查查 ...
- 详解C#break ,continue, return
C#编程语法中break ,continue, return这三个常用的关键字的学习对于我们编程开发是十分有用的,那么本文就向你介绍break ,continue, return具体的语法规范. C# ...
- Node.Js —— PM2介绍
pm2 是一个带有负载均衡功能的Node应用的进程管理器.当你要把你的独立代码利用全部的服务器上的所有CPU,并保证进程永远都活着,0秒的重载, PM2是完美的.它非常适合IaaS结构,但不要把它用于 ...
- javascript使用两个逻辑非运算符(!!)的原因
javascript使用两个逻辑非运算符(!!)的原因: 在有些代码中可能大家可能会注意到有些地方使用了两个逻辑非运算符,第一感觉就是没有必要,比如操作数是true的话,使用两个逻辑非的返回值还是tr ...
- Hadoop.2.x_高级应用_二次排序及MapReduce端join
一.对于二次排序案例部分理解 1. 分析需求(首先对第一个字段排序,然后在对第二个字段排序) 杂乱的原始数据 排序完成的数据 a,1 a,1 b,1 a,2 a,2 [排序] a,100 b,6 == ...
- html中隐藏域hidden的作用介绍及使用示例
基本语法: <input type="hidden" name="field＿name" value="value"> 作用: ...
- concat,reverse
1.concat 连接,拼接 <script> var arr1=[1,2,3]; var arr2=[4,5,6]; var arr3=[7,8,9]; alert(arr1.conca ...