<!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. CSS3 animation属性中的steps实现GIF动图(逐帧动画)

    相信 animation 大家都用过很多,知道是 CSS3做动画用的.而我自己就只会在 X/Y轴 上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的 ...

  3. 关于CSS3 animation 属性在ie edge浏览器中不能工作

    我想要给div边框加一个闪烁,所以我将css中设置如下 给想要闪烁的div加上blink类  这样在firefox,chrome下是正常显示的,但是在ie下box-shadow属性不能被正常的展现 后 ...

  4. animation属性

    文章中转站,因为涉及到动画效果,还是看文笔比较好的博主吧~ CSS3(三)Animation 入门详解 css3中变形与动画(三) CSS3 Animation 是由三部分组成. 关键帧(keyfra ...

  5. 纯Css3手工打造网页图片效果

    .rotate-demo { width: 220px; height: 220px; margin: 0 auto; background: no-repeat url("http://i ...

  6. 基于CSS3新属性Animation及transform实现类似翻书效果

    注:本实例JS部分均以原生JS编写,不善用原生JS的,可用jQuery等对三方框架改写 先上效果图:(样式有点丑,可以忽略一下下,效果出来了就好,后期加到其他项目中方便更改0.0) 类似翻书效果,原本 ...

  7. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  8. CSS3动画属性animation的用法

    转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...

  9. 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果

    摘要: 通过backface-visibility:hidden;属性,我们可以使一个元素在翻转之后消失,这是可以使用另一个元素放在它的背面,从而制作出一种元素翻转之后出现另一个元素的效果. ... ...

随机推荐

  1. IDEA连接 Oracle数据库

    package com.zxx.util;import org.apache.commons.dbutils.DbUtils;import java.sql.Connection;import jav ...

  2. Java list 转树tree的三种写法

  3. Linux系列:进阶之jdk、X window安装与使用

    1.安装x window 分为两步: 1.安装 x window,执行指令yum groupinstall “X Window” 2.安装GNOME Desktop,执行指令yum groupinst ...

  4. Python 3.8.0 正式版发布,新特性初体验 全面介绍

    Python 3.8.0 正式版发布,新特性初体验 北京时间 10 月 15 日,Python 官方发布了 3.8.0 正式版,该版本较 3.7 版本再次带来了多个非常实用的新特性. 赋值表达式 PE ...

  5. Java EE javax.servlet中的ServletRequest接口

    ServletRequest接口 public interface ServletRequest 子接口:HttpServletRequest 实现类:HttpServletRequestWrappe ...

  6. 【POI】使用POI 创建生成XLS,打开xls文件提示【此文件中某些文本格式可能已经更改,因为它已经超出最多允许的字体数。】

    使用POI 创建生成XLS,打开xls文件提示[此文件中某些文本格式可能已经更改,因为它已经超出最多允许的字体数.] 原因: 是因为在POI处理xls的过程中,太多次调用了: HSSFFont fon ...

  7. C# 日期格式化以及日期常用方法

    一.日期格式化 1.ToString() d 月中的某一天.一位数的日期没有前导零. dd 月中的某一天.一位数的日期有一个前导零. ddd 周中某天的缩写名称,在 AbbreviatedDayNam ...

  8. ModbusRtu通信报文详解【一】

    Modbus协议可谓是工业控制领域应用最广泛的协议之一.根据不同的电气接口,包括Modbus Rtu/ASCII,Modbus TCP/UDP,从学习的角度来说,只要学会其中一种,剩余的都是大同小异的 ...

  9. svn的一些使用技巧

    新项目的目录结构说明: 代码分三部分 1.01_Trunk(开发主干) 2.02_Branches(开发分支) 3.03_Tags(提交代码区) 文档区 请注意SVN的路径是区分大小写的! 与VSS的 ...

  10. Docker 部署mysql、tomcat笔记

    Docker 笔记整理 #.环境:Ubuntu 18.* #.安装 mysql 5.6.tomcat #.docker search mysql 报错:Error response from daem ...