本篇文章将要给大家详细介绍如何使用 CSS3 让图片实现不停旋转的效果, 我们在进行网页页面设计时, 经常会遇到各种关于图片展示的问题, 比如有的需要让图片圆角展示, 图片点击放大展示等等效果.
下面主要就给大家介绍用 css3 实现图片自动循环 360 旋转的具体方法
html 代码示例如下:
- <div class="demo">
- <img class="an img" src="/test/img/2.png" width="500" height="500"/>
- </div>
CSS 图片旋转 360 度的动画代码示例如下:
- .demo{
- text-align: center;
- margin-top: 100px;
- }
- @-webkit-keyframes rotation{
- from {-webkit-transform: rotate(0deg);}
- to {-webkit-transform: rotate(360deg);}
- }
- .an{
- -webkit-transform: rotate(360deg);
- animation: rotation 3s linear infinite;
- -moz-animation: rotation 3s linear infinite;
- -webkit-animation: rotation 3s linear infinite;
- -o-animation: rotation 3s linear infinite;
- }
- .img{border-radius: 250px;}
上述代码, 可以直接复制粘贴在本地进行测试, 那么通过浏览器访问, 效果就如下图:
我们这里就要注意到 animation 属性, 这个属性是所有动画属性的简写属性. 我们给 img 图片添加了 transform 和 animation 样式属性, 使得图片实现 360 度旋转动画效果.
CSS 动画图片自动旋转的效果实现方法, 也就如上所述. 只要掌握了 CSS 中的 transform 和 animation 属性就可以实现大多数动画效果. 他们的原理基本都是大同小异.
更多 Web 开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/17410.html