采用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 ...
随机推荐
- jqgrid显示一行的详情
http://blog.csdn.net/yangbobo1992/article/details/7930145 http://www.trirand.com/jqgridwiki/doku.php ...
- js两个小技巧【看到了就记录一下】
1.不声明第三个变量实现交换 ,b=; a=[b,b=a][];//执行完这句代码之后 a的值为2 b的值为1了 2.&&和||的用法 (学会了立马感觉高大尚了吧) ; //传统if语 ...
- IOS学习笔记25—HTTP操作之ASIHTTPRequest
IOS学习笔记25—HTTP操作之ASIHTTPRequest 分类: iOS2012-08-12 10:04 7734人阅读 评论(3) 收藏 举报 iosios5网络wrapper框架新浪微博 A ...
- [WP8.1UI控件编程]SemanticZoom控件实现分组列表
11.1.5 SemanticZoom实现分组列表 SemanticZoom控件可以让用户实现一种更加高级的列表,这种列表可以对列表的项目进行分组,同时这个SemanticZoom控件会提供两个具有相 ...
- POI2012 (持续更新中)
Distance Well Vouchers Cloakroom A Horrible Poem Rendezvous Fibonacci Representation Squarks Salarie ...
- GPIO裸机编程
作者:李老师,华清远见嵌入式学院讲师. GPIO控制技术是接口技术中最简单的一种.本章通过介绍S5PV210芯片的GPIO控制方法,让读者初步掌握控制硬件接口的方法.本章的主要内容: GPIO功能介绍 ...
- 20145330第九周《Java学习笔记》
20145330第九周<Java学习笔记> 第十六章 整合数据库 JDBC入门 数据库本身是个独立运行的应用程序 撰写应用程序是利用通信协议对数据库进行指令交换,以进行数据的增删查找 JD ...
- java分享第一天（java环境及原理）
1 JDK的安装目录中:环境变量中增加JAVA_HOME变量:JDK安装目录:在path中添加JDK的bin目录 2 java执行的顺序是: 1 用java编译器javac XXX.java ...
- 一个资深iOS开发者对于React Native的看法
一个资深iOS开发者对于React Native的看法 当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道. 我认为一个js开发者可以使用javasc ...
- sql 将字符串转换为表
我们常常碰到需要将用户输入之字符串依特定的分隔符转换为表的一个栏位,下面是我写的一个sql函数.如能灵活运用则用途广泛. -- ==================================== ...