html让图片一直旋转,css如何设置不停旋转的图片？

css如何设置不停旋转的图片？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

css如何设置不停旋转的图片？

这个效果实现起来其实并不困难，代码清单如下:

Document

#liu{

width:280px;

height: 279px;

background: url(shishi.png) no-repeat;

border-radius:140px;

-webkit-animation:run 6s linear 0s infinite;

}

#liu:hover{

-webkit-animation-play-state:paused;

}

@-webkit-keyframes run{

from{

-webkit-transform:rotate(0deg);

}

to{

-webkit-transform:rotate(360deg);

}

效果图如下：

1. id为liu的div就是用来展示图片的区域，只不过这里的图片是使用的背景图片，并且通过设置圆角来达到圆形的效果。

2. 代码中关键的部分是怎样使得图片无限转动。我们可以使用 -webkit-animation 和 @-webkit-keyframes 组合使用来完成。

-webkit-animation 是一个复合属性，定义如下：-webkit-animation: name duration timing-function delay iteration_count direction;

name: 是 @-webkit-keyframes 中需要指定的方法，用来执行动画。

duration: 动画一个周期执行的时长。

timing-function: 动画执行的效果，可以是线性的，也可以是"快速进入慢速出来"等。

delay: 动画延时执行的时长。

iteration_count: 动画循环执行次数，如果是infinite，则无限执行。

direction: 动画执行方向。

3. @-webkit-keyframes 中的from和to 两个属性，就是指定动画执行的初始值和结束值。

4. -webkit-animation-play-state:paused; 暂停动画的执行。

更多web前端开发知识，请查阅 HTML中文网！！

html让图片一直旋转,css如何设置不停旋转的图片？相关推荐

css样式里把背景设置为图片,利用css如何设置全屏背景图片
利用css如何设置全屏背景图片如果你有一张比较绚烂的图片想做背景,可以这样设置,就跟随百分网小编一起去了解下吧,想了解更多相关信息请持续关注我们应届毕业生考试网! 代码如下: body{ backg ...
html中图片透明度渐变效果,css怎么设置透明度渐变？
css怎么设置透明度渐变?下面本篇文章给大家介绍一下使用CSS设置透明度渐变效果的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css怎么设置透明度渐变? 在CSS中可以使用 ...
html背景图片在底部,CSS兑现固定DIV层背景图片且底部显示
CSS实现固定DIV层背景图片且底部显示 /*CSS缩写形式*/ div { background:url(/images/about_bg.jpg) no-repeat fixed; backgro ...
html怎么让div一直旋转,css3实现元素不停旋转
网页开发中,经常会使用一些特效,达到一些炫酷的效果,比如音乐播放时封面的旋转,下面就来学习下css如何实现不停止旋转的效果吧. css3实现元素不停旋转主要使用了@keyframes和animati ...
css如何让图片不平铺,css怎么设置图片平铺方式？
background-repeat属性是用来设置背景图像如何平铺的.默认地,背景图像在水平和垂直方向上重复. 属性值:repeat:即默认方式,完全平铺背景: no-repeat:在X及Y轴方向均不平 ...
html怎么加背景图片不重复,css怎么设置背景图片不重复？
在使用css添加背景图片时,默认的样式是图片重复:但有时页面只需要一个不重复的大背景图片,那么如何让背景图片不重复?下面本篇文章就来给大家介绍一下,希望对大家有所帮助. 在CSS中,可以使用backg ...
css里面设置一个背景边框图片或者填充一张图片，使图片填充整个div容器；
一.就一个div,设置其背景图片 1.背景图片 2.代码 #left-bottom {/*height: 31%;*/height: 38%;margin-top: 25px;position: re ...
html 设置图片显示比例,css巧妙设置等比例图片显示
比如我们经常会用到5:3,4:3等图片比例作为缩略图那么在列表显示的时候,如何保持这个比例,很简单,我们首先把3/5=0.6,那么比例就是0.6. 比例500:300 image.png alt=& ...
多背景图CSS,CSS3设置多张背景图片
个人作业--week1 1.问题 (1)与软件学院相比,计算机科学更偏向理论研究,本系开设软件工程课程的意图是否是为了平衡理论与应用的比重? (2)Bug的定义根据开发者与使用者的分析角度不同,有着很 ...

html让图片一直旋转,css如何设置不停旋转的图片？

html让图片一直旋转,css如何设置不停旋转的图片？相关推荐

最新文章

热门文章