【CSS】css3之动画
程序员文章站
2024-03-25 14:31:10
...
最近做项目,有幸想要调整动画效果,从网上查找了写资料,发现原来在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
上一篇: 阿里云服务器安装MySQL并设置远程连接
下一篇: sql 语句if函数