css3 实现动画效果,怎样使他无限循环动下去?

html-css022

css3 实现动画效果,怎样使他无限循环动下去?,第1张

鼠标悬停,图标会一直不停旋转。 

如果实现图标一直不停旋转,则需要使用animation动画。先制作动画的各个关键帧,然后在图标中运用这一动画。

具体操作如下:

div {

    animation:mymove 5s infinite

    -webkit-animation:mymove 5s infinite 

}

infinite:规定动画应该无限次播放。

关于CSS3的属性,建议你可以去看看HTML5学堂,里面有相关的案例分析与讲解。

主要需要使用 -webkit-animation

如:

-webkit-animation:gogogo 2s infinite linear

其中gogogo是自己定义的动画帧,2s是整个动画的秒数,infinite是永久循环 linear是线性变化 (step-end则是无线性变化,直接输出结果)

代码如下:

CSS:

@-webkit-keyframes gogogo {

0%{

-webkit-transform: rotate(0deg)

border:5px solid red

}

50%{

-webkit-transform: rotate(180deg)

background:black

border:5px solid yellow

}

100%{

-webkit-transform: rotate(360deg)

background:white

border:5px solid red

}

}

.loading{

border:5px solid black

border-radius:40px

width: 28px

height: 188px

-webkit-animation:gogogo 2s infinite linear

margin:100px

}