【CSS】css3之动画

来源：互联网发布：淘宝人群价格区间划分编辑：程序博客网时间：2024/05/29 19:53

最近做项目，有幸想要调整动画效果，从网上查找了写资料，发现原来在CSS3之后有了相关内容，并且使用、制作很方便。

下面是做项目中的一个demo，如何使图片动态变大变小：

静态页面

       <img id="img_circle" src="images/circle.png"  />

样式

上面就是一个简单的img标签，相信大家都熟悉的很。下面看一下主要的样式设计。由于是动态的变化，根据CSS3要求，需要先定义动态效果。

效果

@keyframes img_change {        /*from到to中的内容完全是对应元素的属性，也就是说通过规定初始样式和最终样式，然后调用CSS3动画效果，即可实现元素的动态显示*/            from {                height:15%;   /*高度由15%*/            }            to {                height:20%;/*扩大为20%*/            }        }

使用

上面的@keyframes是非常关键的，这是CSS3中定义动态效果的关键字，img_change则是效果的名称，可以自定义。from即从什么样式到to什么样式。效果定义好了，需要使用animation属性进行使用

        #result #circle img {            height:15%;            animation-name:img_change;/*效果名称，与关键字@keyframes相对应*/            animation-duration:1.0s;  /*一个周期所需时间（毫秒）*/            animation-delay:0s;   /*动作开始时间*/            animation-iteration-count:infinite;  /*动画播放次数；默认为1；infinite为永久播放*/            animation-direction:alternate;/*下一个周期逆向播放*/            animation-timing-function:linear;        }

效果大家可以尝试哦,下面是本例的效果图。

另外，这个链接是CSS3关于动画方便的介绍，很详细，可以尝试着玩玩哦。http://www.w3school.com.cn/css3/css3_animation.asp

0 0