这篇文章给大家分享的是有关纯HTML5+css3如何制作图片旋转的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。效果图如下：这个效果实现起来其实并不困难，代码清单如下:XML/ht
这篇文章给大家分享的是有关纯HTML5+css3如何制作图片旋转的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
效果图如下：
这个效果实现起来其实并不困难，代码清单如下:
XML/html Code复制内容到剪贴板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/CSS">
#liu{
width:280px;
height: 279px;
background: url(shishi.png) no-repeat;
border-radius:140px;
}
#liu:hover{
-webkit-animation-play-state:paused;
}
@-webkit-keyframes run{
from{
-webkit-transfORM:rotate(0deg);
}
to{
-webkit-transform:rotate(360deg);
}
}
</style>
</head>
<body>
<div id="liu"></div>
</body>
</html>
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; 暂停动画的执行。
感谢各位的阅读！关于“纯HTML5+CSS3如何制作图片旋转”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
--结束END--
本文标题: 纯HTML5+CSS3如何制作图片旋转
本文链接: https://www.lsjlt.com/news/70034.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0