采用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 ...
随机推荐
- 通过反射将变量值转为变量名本身ZZ
这是.NET反射的一个有趣小例子: 通过反射将变量值转为变量名本身. 当然要先添加命名空间:using System.Reflection; 示例代码如下: class Program { st ...
- Codeforces Round #363 Div.2[111110]
好久没做手生了,不然前四道都是能A的,当然,正常发挥也是菜. A:Launch of Collider 题意:20万个点排在一条直线上,其坐标均为偶数.从某一时刻开始向左或向右运动,速度为每秒1个单位 ...
- BZOJ3764 : Petya的序列
首先如果一段连续子序列里没有任何幸运数,那么显然可以缩成一个点. 设幸运数个数为$m$,那么现在序列长度是$O(m)$的,考虑暴力枚举$R_1$,然后从右往左枚举$L_1$. 每次碰到一个幸运数,就将 ...
- [linux]crontab 命令执行问题
在服务器上设置了一个R脚本的crontab任务,死活不执行.在网上搜了很久,终于解决了. 这里主要说一下crontab异常时,该如何排查. 假设cron命令为:* * * * Rscript /you ...
- Java 集合系列18之 Iterator和Enumeration比较
概要 这一章,我们对Iterator和Enumeration进行比较学习.内容包括:第1部分 Iterator和Enumeration区别第2部分 Iterator和Enumeration实例 转载请 ...
- hdu 2099 整除的尾数
Problem Description 一个整数,只知道前几位,不知道末二位,被另一个整数除尽了,那么该数的末二位该是什么呢? Input 输入数据有若干组,每组数据包含二个整数a,b(0< ...
- Android -- 动画效果收获（1）
加载选项菜单 MenuInflater inflater = getMenuInflater(); inflater.inflater(R.menu.menu,menu); An ...
- 在Linux中安装Tomcat
带Linux的虚拟机中安装Tomcat 一.从官方网站上下载tomcat软件包.http://tomcat.apache.org/ apache-tomcat-7.0.33.tar.gz 二.下载到本 ...
- 基于canvas的前端图片压缩
/*common*/ /** * canvas图片压缩 * @param {[Object]} opt [配置参数] * @param {[Function]} cbk [回调函数] * @retur ...
- [LintCode] Backpack VI 背包之六
Given an integer array nums with all positive numbers and no duplicates, find the number of possible ...