欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

【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;
        }

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

【CSS】css3之动画


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




相关标签: css3 动画