采用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 ...
随机推荐
- BZOJ3898 : 打的士
设$f_i$表示选择的答案区间左端点为$i$时,区间长度最小是多少. 那么每来一批人的时候,设$nxt$为$i$右边最近的一个可行决策,则$f_i=\max(f_i,nxt-i)$. 注意到$f$的形 ...
- BZOJ 1053 & 反素数
题意: 反素数,膜一篇GOD's Blog...http://blog.csdn.net/ACdreamers/article/details/25049767 此文一出,无与争锋... CODE: ...
- Haproxy内网连接阿里云存储OSS后提供下载
global log 127.0.0.1 local0 maxconn #最大连接数 chroot /usr/local/haproxy uid #所属运行的用户UID gid #所属运行用用户组 d ...
- RMQ问题之ST算法
RMQ问题之ST算法 RMQ(Range Minimum/Maximum Query)问题,即区间最值问题.给你n个数,a1 , a2 , a3 , ... ,an,求出区间 [ l , r ]的最大 ...
- POJ 2420 A Star not a Tree?(模拟退火)
题目链接 居然1Y了,以前写的模拟退火很靠谱啊. #include <cstdio> #include <cstring> #include <string> #i ...
- 基于S5PC100裸机程序之SPI(上)
作者:杨老师,华清远见嵌入式学院讲师. SPI作为应用最为广泛的通信总线协议之一,开发人员应当掌握,本章将介绍SPI总线协议的基本理论,以及S5PC100的SPI总线控制器的操作方法. 1. SPI总 ...
- Linux3.4内核 Yaffs2文件系统的移植
作者:李老师,华清远见嵌入式学院讲师. [实验目的] Yaffs2文件系统是嵌入式系统中常用到的一种文件系统,是也是移植Android所必须的.通过向FS_S5PC100平台移植Yaffs文件系统,了 ...
- Java_CookieUtil
package com.willow.util; import javax.servlet.http.Cookie; import javax.servlet.http.HttpServletRequ ...
- linux下创建，删除，移动文件命令
创建文件:touch + filename 删除文件:rm + filename 复制文件:cp + filename + dirname 移动文件:mv + filename + dirname 注 ...
- 抄书 Copying Books UVa 714
Copying Books 题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=85904#problem/B 题目: Descri ...