css3简易实现图标动画由小到大逐个显现
在制作网站时避免图片太平淡经常会用到动画效果:由小到大跳跃出现。这种效果很有视觉冲击力,显著提高关注度~
原理:利用css3的动画属性@keyframes@-moz-keyframes@-webkit-keyframes定义动画suofang,再用animation调用suofang这一动画帧,并将动画添加到图片上,需要注意的是需要给图片相当于初始化的一个处理
transform:scale();
-moz-transform:scale();
-webkit-transform:scale();
最后在js中调用css动画。对于不同的页面,需要使用index来标注不同的页面。
<!--第二屏开始-->
<div class="section">
<div class="mdmobile-second-one">
<div class="mdmobile-second-one-top">
<img src="data:images/06_03.png" class="mdmobile-second-one-top-top"/>
<img src="data:images/06_07.png" class="mdmobile-second-one-top-foot"/>
</div> <div class="mdmobile-second-one-middle">
<div class="mdmobile-second-one-middle-top">
<img src="data:images/07_03.png" class="mdmobile-second-one-middle-top-left"/>
<img src="data:images/07_05.png" class="mdmobile-second-one-middle-top-right"/>
<div class="clear"></div>
</div>
<div class="mdmobile-second-one-middle-middle">
<img src="data:images/07_09.png" class="mdmobile-second-one-middle-middle-one"/>
<img src="data:images/07_11.png" class="mdmobile-second-one-middle-middle-two"/>
<img src="data:images/07_13.png" class="mdmobile-second-one-middle-middle-three"/>
<div class="clear"></div>
</div>
<div class="mdmobile-second-one-middle-foot">
<img src="data:images/07_16.png" class="mdmobile-second-one-middle-foot-left"/>
<img src="data:images/07_18.png" class="mdmobile-second-one-middle-foot-right"/>
<div class="clear"></div>
</div>
</div>
<div class="mdmobile-second-one-foot">
</div>
</div>
</div>
<!--第二屏结束-->
/*第二屏开始*/ @keyframes suofang {
% {transform:scale(0.2);}
% {transform:scale(1.0);}
}
@-moz-keyframes suofang {
% {-moz-transform:scale(0.2);}
% {-moz-transform:scale(1.0);}
}
@-webkit-keyframes suofang {
% {-webkit-transform:scale(0.2);}
% {-webkit-transform:scale(1.0);}
}
.mdmobile-second-one-middle-top-right.active,
.mdmobile-second-one-middle-top-left.active,
.mdmobile-second-one-middle-middle-one.active,
.mdmobile-second-one-middle-middle-two.active,
.mdmobile-second-one-middle-middle-three.active,
.mdmobile-second-one-middle-foot-left.active,
.mdmobile-second-one-middle-foot-right.active
{
animation: suofang 1s forwards;
-moz-animation: suofang 1s forwards;
-webkit-animation: suofang 1s forwards;
}
.mdmobile-second-one-middle-top-right,
.mdmobile-second-one-middle-top-left,
.mdmobile-second-one-middle-middle-one,
.mdmobile-second-one-middle-middle-two,
.mdmobile-second-one-middle-middle-three,
.mdmobile-second-one-middle-foot-left,
.mdmobile-second-one-middle-foot-right
{
transform:scale();
-moz-transform:scale();
-webkit-transform:scale();
}
if(index == ){
$(".mdmobile-second-one-middle-top-left").addClass("active");
setTimeout(function(){
$(".mdmobile-second-one-middle-top-right").addClass("active");
},);
setTimeout(function(){
$(".mdmobile-second-one-middle-middle-one").addClass("active");
},);
setTimeout(function(){
$(".mdmobile-second-one-middle-middle-two").addClass("active");
},);
setTimeout(function(){
$(".mdmobile-second-one-middle-middle-three").addClass("active");
},);
setTimeout(function(){
$(".mdmobile-second-one-middle-foot-left").addClass("active");
},);
setTimeout(function(){
$(".mdmobile-second-one-middle-foot-right").addClass("active");
},);
}
css3简易实现图标动画由小到大逐个显现的更多相关文章
- 使用 CSS3 动感的图片标题动画效果【附源码下载】
在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...
- css3中变形与动画(三)
transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...
- 纯CSS3实现打火机火焰动画
HTML5已经越来越流行起来了,尤其是移动互联网的发展,更是带动了HTML5的迅猛发展,我们也是时候学习HTML5了,以防到时候落伍.今天给大家介绍10款效果惊艳的HTML5应用,方便大家学习,也将应 ...
- 非常酷的CSS3垂直下拉动画菜单
昨天我向大家介绍了一款兼容性不错的jQuery淡入淡出下拉菜单,今天要分享一款相对绚丽的CSS3垂直下拉动画菜单,不过需要支持CSS3的浏览器才能有效果.下面是效果图,一起看看. 我们也可以在这里查看 ...
- 创建CSS3警示框渐变动画
来源:GBin1.com 在线演示 在线下载 现代的网页设计技术已经允许开发人员在大多数浏览器中快速实现所支持的动画,其中消息警示是非常普遍的.由于默认的JavaScript警示框往往设计不佳和过 ...
- CSS3鼠标滑过动画线条边框特效
基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/ ...
- 纯css3手机页面图标样式代码
全部图标:http://hovertree.com/texiao/css/19/ 先看效果: 或者点这里:http://hovertree.com/texiao/css/19/hoverkico.ht ...
- css3实现循环执行动画,且动画每次都有延迟
一.最终效果 需求:gift图片的小动画每隔2s执行一次. 需求就一句话,我们看一下实现过程. 二.实现过程 1.网页结构 <!DOCTYPE html> <html lang=&q ...
- jQuery+CSS3实现404背景动画特效
效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: ...
随机推荐
- DBCP连接池介绍
DBCP连接池介绍 ----------------------------- 目前 DBCP 有两个版本分别是 1.3 和 1.4. DBCP 1.3 版本需要运行于 JDK 1.4-1.5 ,支持 ...
- 如何查询redhat的版本信息
cat /etc/redhat-release lsb_release -a
- C++ 迭代器类别
1.output迭代器:一次一步,只能向前,流水线上放着一批空的盒子,每次向前移动一个,往盒子里面塞一个东西. 2.input迭代器:一次一步,只能向前,流水线上放着一批零件,每次向前移动一个,可以看 ...
- Hadoop: The Definitive Guide (3rd Edition)
chapter 1 解决计算能力不足的问题,不是去制造更大的计算机,而是用更多的计算机来解决问题. 我们生活在一个数据的时代.“大数据”的到来不仅仅是影响到那些科研和金融机构,对小型企业以及我们个人都 ...
- iis7负载均衡
Windows平台分布式架构实践 - 负载均衡(下) Windows平台分布式架构实践 - 负载均衡 Windows平台分布式架构实践 - 负载均衡 概述 最近.NET的世界开始闹腾了,微 ...
- LINUX内核笔记
http://blog.chinaunix.net/uid/27119491/list/1.html?cid=161103
- NULL、NUL、‘\0’、0以及EOF
0 is an integer constant, '\0' is a character constant, nul is the name of the character constant. N ...
- 如何保护你的linux操作系统
如何保护你的linux操作系统 导读 在现在这个世道中,Linux操作系统的安全是十分重要的.但是,你得知道怎么干.一个简单反恶意程序软件是远远不够的,你需要采取其它措施来协同工作.那么试试下面这些手 ...
- 10905 - Children's Game
4th IIUC Inter-University Programming Contest, 2005 A Children’s Game Input: standard input Output: ...
- [置顶] HashMap HashTable HashSet区别剖析
HashMap.HashSet.HashTable之间的区别是Java程序员的一个常见面试题目,在此仅以此博客记录,并深入源代码进行分析: 在分析之前,先将其区别列于下面 1:HashSet底层采用的 ...