<!DOCTYPE html>


<html lang="en">



<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <meta http-equiv="X-UA-Compatible" content="ie=edge">


    <meta charset="utf-8">


    <title>旋转效果</title>


    <style>


        div {


            width:100%;


            margin:50px auto;


            text-align: center;



        }



        img {


            width: 200px;


            height: 200px;


            border-radius: 100px;


            animation: run 5s linear infinite;


            -webkit-animation: run 5s linear infinite;


            animation-play-state: running;


            -webkit-animation-play-state: running;


        }



        img:hover {


            animation-play-state: paused;


            -webkit-animation-play-state: paused;


        }



        @keyframes run {


            0% {


                transform: rotate(0deg);


            }



            100% {


                transform: rotate(360deg);


            }


        }



        @-webkit-keyframes run {


            0% {


                transform: rotate(0deg);


            }



            100% {


                transform: rotate(360deg);


            }


        }


    </style>


</head>



<body>


    <div>


        <img src="bg.png" />


    </div>


</body>



</html>




 


												


											
CSS3 animation属性 实现转动效果的更多相关文章
	

    
								
  1. css3 animation 属性众妙
		
    转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...
    
		
    2. 
						
  2. CSS3 animation属性中的steps实现GIF动图(逐帧动画)
		
    相信 animation 大家都用过很多,知道是 CSS3做动画用的.而我自己就只会在 X/Y轴 上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的  ...
    
		
    3. 
						
  3. 关于CSS3 animation 属性在ie edge浏览器中不能工作
		
    我想要给div边框加一个闪烁,所以我将css中设置如下 给想要闪烁的div加上blink类  这样在firefox,chrome下是正常显示的,但是在ie下box-shadow属性不能被正常的展现 后 ...
    
		
    4. 
						
  4. animation属性
		
    文章中转站,因为涉及到动画效果,还是看文笔比较好的博主吧~ CSS3(三)Animation 入门详解 css3中变形与动画(三) CSS3 Animation 是由三部分组成. 关键帧(keyfra ...
    
		
    5. 
						
  5. 纯Css3手工打造网页图片效果
		
    .rotate-demo { width: 220px; height: 220px; margin: 0 auto; background: no-repeat url("http://i ...
    
		
    6. 
						
  6. 基于CSS3新属性Animation及transform实现类似翻书效果
		
    注:本实例JS部分均以原生JS编写,不善用原生JS的,可用jQuery等对三方框架改写 先上效果图:(样式有点丑,可以忽略一下下,效果出来了就好,后期加到其他项目中方便更改0.0) 类似翻书效果,原本 ...
    
		
    7. 
						
  7. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)
		
    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...
    
		
    8. 
						
  8. CSS3动画属性animation的用法
		
    转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...
    
		
    9. 
						
  9. 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果
		
    摘要: 通过backface-visibility:hidden;属性,我们可以使一个元素在翻转之后消失,这是可以使用另一个元素放在它的背面,从而制作出一种元素翻转之后出现另一个元素的效果. ...  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. GCD and LCM HDU - 4497（质因数分解）
			
    Problem Description Given two positive integers G and L, could you tell me how many solutions of (x, ...
    
			
    2. 
						
  2. Python 最常见的 170 道面试题解析：2019 最新
			
    Python 最常见的 170 道面试题解析:2019 最新 2019年06月03日 23:30:10 GitChat的博客 阅读数 21329 文章标签: PythonPython入门Python面 ...
    
			
    3. 
						
  3. 带坑使用微信小程序框架WePY组件化开发项目，附带第三方插件使用坑
			
    纯粹用来记录wepy及相关联内容,以防再犯~ 1. 接手的wepy项目版本是 1.7.2 ,so我没有初始化的过程.... 2. 安装wepy命令工具,npm install wepy-cli -g  ...
    
			
    4. 
						
  4. 《深入理解 java 虚拟机》学习 -- 内存分配
			
    <深入理解 java 虚拟机>学习 -- 内存分配 1. Minor GC 和 Full GC 区别 概念: 新生代 GC(Minor GC):指发生在新生代的垃圾收集动作,因为 Java ...
    
			
    5. 
						
  5. 【weixin】微信支付---PC网站微信支付
			
    一.PC网站支付 微信支付支持完成域名ICP备案的网站接入支付功能.PC网站接入支付后,可以通过JSAPI支付或Native支付,自行开发生成二维码,用户使用微信“扫一扫”来完成支付. 二.支付产品介 ...
    
			
    6. 
						
  6. python numpy 的用法—— bincount
			
    今天看脚本的时候遇到了几个不懂的用法,记录下来供日后查看: 1.numpy bincount 先上图: 如上所示:首先要求输入的数组不能包含负数: 该函数是计算非负元素的个数,如果数组中的最大值为10 ...
    
			
    7. 
						
  7. 利用Cmake 将最新版本OBS编译成windows版本。
			
    准备工作: 1. VS2013 的最新更新版或者VS2015 2. QT Creater 5.7   https://www.qt.io/ 3.  CMake (cmake-gui) 4. obs 依 ...
    
			
    8. 
						
  8. [Eclipse的Maven项目搭建，仅为测试Maven功能]如何在Eclipse下搭建Maven项目
			
    [Eclipse的Maven项目搭建,仅为测试Maven功能]如何在Eclipse下搭建Maven项目   你可能需要了解以下才能更好的阅读以下: 在 Windows 中配置Maven: http:/ ...
    
			
    9. 
						
  9. go语言入门（2）数据类型
			
    1,命名 Go语言中的函数名.变量名.常量名.类型名.语句标号和包名等所有的命名,都遵循一个简单的命名规则:一个名字必须以一个字母(Unicode字母)或下划线开头,后面可以跟任意数量的字母.数字或下 ...
    
			
    10. 
						
  10. MyEclipse基本配置及优化【MyEclipse_10.7】
			
    MyEclipse基本配置 MyEclipse所有的配置都是基于工作空间的,当换了个工作空间,之前的所有配置信息就失效了.(建议每次换工作空间之前就配置好基本信息) 1.修改工作空间编码为UTF-8  ...
    
			
    11.