采用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 ...
随机推荐
- Oracle错误 ORA-12560如何解决
造成ORA-12560: TNS: 协议适配器错误的问题的原因有三个:1.监听服务没有起起来.windows平台个一如下操作:开始---程序---管理工具---服务,打开服务面板, 启动oracleh ...
- BZOJ 2527 & 整体二分
Byteotian Interstellar Union有N个成员国.现在它发现了一颗新的星球,这颗星球的轨道被分为M份(第M份和第1份相邻),第i份上有第Ai个国家的太空站. 这个星球经常会下陨石雨 ...
- <构建之法>第十三章到十七章有感以及这个项目读后感
<构建之法>第十三章到十七章有感 第13章:软件测试方法有哪些? 主要讲了软件测试方法:要说有什么问题就是哪种效率最高? 第14章:质量保障 软件的质量指标是什么?怎么样能够提升软件的质量 ...
- Android中有关relativeLayout 和EditText的一些属性
http://www.cnblogs.com/jqyp/archive/2010/10/23/1859182.html RelativeLayout用到的一些重要的属性: 第一类:属性值为true ...
- HTML5 的 applicationCache 应用程序缓存离线存储功能与 manifest 文件
一. 实现 HTML5 applicationCache 的步骤 一般的操作步骤 1. 新建 manifest 文件 如文件名为 lzwme.manifest,内容配置参考如下: 01 CACHE ...
- 20145308刘昊阳 《Java程序设计》第1周学习总结
20145308刘昊阳 <Java程序设计>第1周学习总结 教材学习内容总结 第一章 Java平台概论 1.1Java不只是语言 Java最早取名Oak,后改名Java Java三大平台J ...
- CF 71C. Round Table Knights
题目链接 很多小的细节都没想到... #include <cstdio> #include <cstring> #include <iostream> #inclu ...
- PHP面向对象学习四 类的关键字
1.关键字:final 用来定义类和方法的一个重要关键字,当定义类的时候该类将不能被继承, 当用来定义方法的时候该方法将不能被重载 2.关键字:static 用来定义类的静态属性或方法,可以在类未被实 ...
- weblogic部署项目包，报空指针错误
贴出 报错代码 <weblogic> <> <> <1479765377228> <BEA-240003> <Console enco ...
- Winform 窗体最小化隐藏在桌面右下角：转
ICO文件要放到 bin\Debug 下 1.给主窗体添加 NotifyIcon 控件 2.窗体加载事件里 private void MainF_Load(object sender, EventAr ...