CSS3图片动画展示----心跳

我们可以创建动画，它可以取代许多网页动画图像，Flash动画，和JAVAScripts。

什么是动画？

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

这里CSS3 @keyframes 规则动画与Css3 Transform变形旋转属性是两种不同的动画形式。

这里不要记混（我总是迷糊了）。两者结合使用简直好的不要不要的。后面会有演示。

CSS3 @keyframes 规则动画：位置，颜色，大小等等各种CSS属性都可以变换

Css3 Transform变形旋转：在原地的放大，旋转，缩放等等

好了废话不多说，来试验下：

当在 @keyframes 创建动画，需要将它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

1. 规定动画的名称

2. 规定动画的时长

举个栗子你就懂了：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <title>CSS动画</title>
 5     <style>
 6     .div{ 7         width: 100px;
 8         height: 100px;
 9         background: rgba(90,25,140,.3);
10     }
11     #godownout{12         animation: fadeOutDown 5s;
13     }
14     @keyframes
15     {16         0%{background:rgba(90,50,140,.3);}
17         45%{background:rgba(0,0,0,.3);}
18         75%{background:rgba(255,255,50,.3);}
19         100%{background:rgba(90,145,140,.3);}
20     }
21     </style>
22 </head>
23 <body>
24     <div id="godownout" class="div"></div>
25 </body>
26 </html>

效果是这个样子的，是没有加动画的，因为没有指定动画的名字：

那我们把动画名字加进去：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <title>CSS动画</title>
 5     <style>
 6     .div{ 7         width: 100px;
 8         height: 100px;
 9         background: rgba(90,25,140,.3);
10     }
11     #godownout{12         animation: fadeOutDown 5s;
13     }
14     @keyframes fadeOutDown
15     {16         0%{background:rgba(90,50,140,.3);}
17         45%{background:rgba(0,0,0,.3);}
18         75%{background:rgba(255,255,50,.3);}
19         100%{background:rgba(90,145,140,.3);}
20     }
21     </style>
22 </head>
23 <body>
24     <div id="godownout" class="div"></div>
25 </body>
26 </html>

控制动画的部分：

 1 #godownout{
 2         animation: fadeOutDown 5s;
 3     }
 4     @keyframes fadeOutDown
 5     {
 6         0%{background:rgba(90,50,140,.3);}
 7         45%{background:rgba(0,0,0,.3);}
 8         75%{background:rgba(255,255,50,.3);}
 9         100%{background:rgba(90,145,140,.3);}
10     }

担心会弄混，所以id给的是godownout。动画名字是fadeOutDown。animation至少带两个参数，一个是动画的名字，还有一个就是动画所用的时间。下图为运行结果：

好了动起来了。为了增加它的效果可以让它再多一点变化，比如变大变小？（这里图片如果是png的，就可以看到背景也在变化了，比较懒，就没有去找png图片了。后面还有故事，所以就不删背景颜色了。）：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <title>CSS动画</title>
 5     <style>
 6     .div{ 7         width: 100px;
 8         height: 100px;
 9         background: rgba(90,25,140,.3);
10     }
11     #godownout{12         animation: fadeOutDown 3s;
13     }
14     @keyframes fadeOutDown
15     {16         0%{background:rgba(90,50,140,.3);}
17         15%{background:rgba(0,0,0,.3);width:200px;height:200px;}
18         50%{background:rgba(0,0,0,.3);width:100px;height:100px;}
19         75%{background:rgba(255,255,50,.3);width:200px;height:200px;}
20         100%{background:rgba(90,145,140,.3);width:100px;height:100px;}
21     }
22     </style>
23 </head>
24 <body>
25     <div  class="div"><img id="godownout" src="http://pic2.ooopic.com/12/42/88/24b3OOOPIC19_1024.jpg" width="100px" height="100px"></div>
26 </body>
27 </html>

心动一下咯：

是不是没有flash也可以做动画了呢？有点小激动，那接下来就对知识点进行一个归纳，都可以去尝试下子。

下面的表格列出了 @keyframes 规则和所有动画属性：

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性，除了 animation-play-state 属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-delay	规定动画何时开始。默认是 0	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"	3

设置所有的属性:

 1 #godownout{
 2         animation-name: fadeOutDown;
 3                 animation-duration: 5s;
 4                 animation-timing-function: linear;
 5                 animation-delay: 2s;
 6                 animation-iteration-count: infinite;
 7                 animation-direction: alternate;
 8                 animation-play-state: running;
 9               /* Safari 与 Chrome: */
10                -webkit-animation-name: myfirst;
11                -webkit-animation-duration: 5s;
12                -webkit-animation-timing-function: linear;
13                -webkit-animation-delay: 2s;
14                -webkit-animation-iteration-count: infinite;
15                -webkit-animation-direction: alternate;
16                -webkit-animation-play-state: running;
17     }

简写方式：

1 #godownout{
2     animation: fadeOutDown 5s linear infinite alternate running;
3     /* Safari 与 Chrome: */
4     -webkit-animation: fadeOutDown 5s linear infinite alternate running;
5     }

转载于:https://www.cnblogs.com/zhangyingZY/p/7868093.html

CSS3图片动画展示----心跳相关推荐

基于html5鼠标悬停图片动画展示效果
分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=" ...
css动画放大延迟,css3延时动画
不太理解属性都是什么意思,但是有动画效果,我也是惊呆了 #animated_div{animation:animated_div 4s 1; -moz-animation:animated_div 4 ...
8款帅酷的HTML5/CSS3 3D动画、图片、菜单应用
今天要给大家分享8款帅酷的HTML5/CSS3应用,它们中包括很酷的HTML5 3D动画应用,也包括实用的CSS3图片.菜单.进度条等插件,一起来看看吧. 1.HTML5 Canvas火焰燃烧动画如 ...
css3圆角360度转动画,target，框架集，css3过渡动画，css3圆角-阴影-透明度，运动曲线，图片文字遮罩，变形...
target 模拟后台服务器框架集 frameset和body不合,所以如果用frameset就不能有body标签利用框架可以把浏览器窗口划分为若干个区域,每个区域就是一个框架,在其中分别显示不 ...
CSS3图片上下移动的动画效果
CSS3图片上下移动的动画效果开发工具与关键技术:Adobe Dreamweaver CC 2018 作者:昨夜星辰撰写时间:2019年1月17日下面我们使用Adobe Dreamweaver ...
html鼠标移入显示图片动画,HTML5+CSS3鼠标移入移出图片生成随机动画_html/css_WEB-ITnose...
今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转上下移动缩放由于时间关系我就不一步步解析各段代 ...
html图片鼠标动态效果代码,CSS3鼠标hover图片动画特效代码
这是一款CSS3鼠标hover图片动画特效代码.该鼠标hover动画使用简单的CSS transition技术,配合元素的宽度变化,制作出炫酷的鼠标hover图片遮罩层动画效果. 使用方法在页面中引 ...
html图片向下浮动,css3图片上下浮动动画
一.float定义float属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在CSS中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.按照张鑫旭 ...
使用css3的动画模拟太阳系行星公转
本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...
推荐12个绚丽的CSS3图片悬停效果
CSS3为我们开发提供了很多特效,如鼠标悬停,线性渐变,在web开发早期常用的是鼠标悬停,他是网页制作的常用特效之一,早期使用Flash可以制作非常炫的效果,后来慢慢演变成现在的是图片悬停效果,现在我 ...

CSS3图片动画展示----心跳

CSS3图片动画展示----心跳相关推荐

最新文章

热门文章