纯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 相关文章推荐
详解使用CSS3的@media来编写响应式的页面
Nov 01 HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
Apr 29 HTML / CSS
CSS3区域模块region相关编写示例
Aug 28 HTML / CSS
CSS3 display知识详解
Nov 25 HTML / CSS
css3翻牌翻数字的示例代码
Feb 07 HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
Mar 01 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
Oct 23 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
Jan 01 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
Apr 24 HTML / CSS
HTML5新特性之用SVG绘制微信logo
Feb 03 HTML / CSS
HTML5 图片预加载的示例代码
Mar 25 HTML / CSS
CSS中em的正确打开方式详解
Apr 08 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(4) php 函数 补充2
2010/02/15 PHP
PHP导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
php程序内部post数据的方法
2015/03/31 PHP
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
JavaScript结合HTML DOM实现联动菜单
2017/04/05 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
nodejs实现简单的gulp打包
2017/12/21 NodeJs
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
Python实现异步IO的示例
2020/11/05 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
web页面录屏实现
2019/02/12 HTML / CSS
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
日语翻译个人求职的自我评价
2013/10/14 职场文书
安全标准化实施方案
2014/02/20 职场文书
环境日宣传活动总结
2014/07/09 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书