纯HTML5+CSS3制作图片旋转


Posted in HTML / CSS onJanuary 12, 2016

此实例可以应用到许多项目中,很实用,希望大家可以掌握。

效果图如下:

纯HTML5+CSS3制作图片旋转

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>     
  2. <html lang="en">     
  3. <head>     
  4.     <meta charset="UTF-8">     
  5.     <title>Document</title>     
  6.     <style type="text/css">     
  7.         #liu{     
  8.             width:280px;     
  9.             height: 279px;     
  10.             background: url(shishi.png) no-repeat;     
  11.             border-radius:140px;     
  12.             -webkit-animation:run 6s linear 0s infinite;     
  13.         }     
  14.      
  15.         #liu:hover{     
  16.             -webkit-animation-play-state:paused;     
  17.         }     
  18.      
  19.      
  20.         @-webkit-keyframes run{     
  21.             from{     
  22.                 -webkit-transform:rotate(0deg);     
  23.             }     
  24.             to{     
  25.                 -webkit-transform:rotate(360deg);     
  26.             }     
  27.         }     
  28.      
  29.     </style>     
  30. </head>     
  31. <body>     
  32.     <div id="liu"></div>     
  33. </body>     
  34. </html>     
  35.   

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; 暂停动画的执行。

以上就是本文的全部内容,希望对大家实现图片旋转特效有所帮助。

HTML / CSS 相关文章推荐
html5 css3 动态气泡按钮实例演示
Dec 02 HTML / CSS
详解CSS3中border-image的使用
Jul 18 HTML / CSS
CSS3实现3D翻书效果
Jun 20 HTML / CSS
详解css position 5种不同的值的用法
Jul 30 HTML / CSS
css3弹性盒子flex实现三栏布局的实现
Nov 12 HTML / CSS
HTML5通用接口详解
Jun 12 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
Mar 15 HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 HTML / CSS
Html5页面获取微信公众号的openid的方法
May 12 HTML / CSS
html中相对位置与绝对位置的具体使用
May 15 HTML / CSS
CSS实现鼠标悬浮动画特效
May 07 HTML / CSS
HTML 里 img 元素的 src 和 srcset 属性的区别详解
May 21 HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 #HTML / CSS
CSS3圆角和渐变2种常用功能详解
Jan 06 #HTML / CSS
使用CSS3的appearance属性改变元素的外观的方法
Dec 12 #HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 #HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 #HTML / CSS
CSS3 display知识详解
Nov 25 #HTML / CSS
详解CSS3选择器的使用方法汇总
Nov 24 #HTML / CSS
You might like
php array的学习笔记
2012/05/16 PHP
phpstrom使用xdebug配置方法
2013/12/17 PHP
解读PHP中的垃圾回收机制
2015/08/10 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
PHP实现ASCII码与字符串相互转换的方法
2017/04/29 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
javascript之bind使用介绍
2011/10/09 Javascript
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
jQuery中first()方法用法实例
2015/01/06 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
JavaScript 五大常见函数
2018/03/23 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
vue使用swiper实现左右滑动切换图片
2020/10/16 Javascript
python版简单工厂模式
2017/10/16 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
详解django中Template语言
2020/02/22 Python
使用Python构造hive insert语句说明
2020/06/06 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
django rest framework使用django-filter用法
2020/07/15 Python
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
2017/12/11 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
公立医院改革实施方案
2014/03/14 职场文书
租房合同协议书
2014/04/09 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
教师节横幅标语
2014/10/08 职场文书
开工典礼致辞
2015/07/29 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书
Python的property属性详细讲解
2022/04/11 Python