@-moz-keyframes revolving{

    0{

        -moz-transform:  rotate(0deg);

        -webkit-transform:  rotate(0deg);

    }

    25%{

        -moz-transform:  rotate(-10deg);

        -webkit-transform:  rotate(-10deg);

    }

    50%{

        -moz-transform:  rotate(0deg);

        -webkit-transform:  rotate(0deg);

    }

    75%{

        -moz-transform:  rotate(10deg);

        -webkit-transform:  rotate(10deg);

    }

    100%{

        -moz-transform:  rotate(0deg);

        -webkit-transform:  rotate(0deg);

    }

}

@-webkit-keyframes revolving{

    0{

        -moz-transform:  rotate(0deg);

        -webkit-transform:  rotate(0deg);

    }

    25%{

        -moz-transform:  rotate(-10deg);

        -webkit-transform:  rotate(-10deg);

    }

    50%{

        -moz-transform:  rotate(0deg);

        -webkit-transform:  rotate(0deg);

    }

    75%{

        -moz-transform:  rotate(10deg);

        -webkit-transform:  rotate(10deg);

    }

    100%{

        -moz-transform:  rotate(0deg);

        -webkit-transform:  rotate(0deg);

    }

}

.new-msg{

    -moz-animation: revolving 0.6s 0s infinite;

    -webkit-animation: revolving 0.6s 0s infinite;

    width:16px;height:16px;

    line-height:16px;

    text-align:center;

}

CSS 循环动画效果。的更多相关文章

  1. CSS3圆圈动画放大缩小循环动画效果

    代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  2. vue中使用第三方插件animate.css实现动画效果

    vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...

  3. CSS--使用Animate.css制作动画效果

    一 使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画;   <!DOCTYPE h ...

  4. 是谁，在敲打我窗-CSS雨滴动画效果

    1.扯闲篇 是谁在敲打我窗  是谁在撩动琴弦  那一段被遗忘的时光 渐渐地回升出我心坎  是谁在敲打我窗  是谁在撩动琴弦 记忆中那欢乐的情景  慢慢地浮现在我的脑海 那缓缓飘落的小雨  不停地打在我 ...

  5. [CSS] Transitions动画效果(1)

    Transitions动画效果(1) 源码 https://github.com/YouXianMing/CSS-Animations/tree/master/Transitions 效果 细节

  6. css水波动画效果

    代码来源:http://www.jq22.com/code1526 HTML: <div class="waves"></div> css: html, b ...

  7. 今天学习css一些动画效果

    <!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...

  8. 一个CSS+jQuery的放大缩小动画效果

    日期: 2013年9月23日 作者:铁锚 // 今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. // 都是定死了的.因为需求就只有4个元素.如果是要用CSS的cla ...

  9. react中使用css动画效果

    index.js import React, { Component, Fragment } from 'react'; class App extends Component { construct ...

随机推荐

  1. 让 Ocelot 与 asp.net core “共存”

    让 Ocelot 与 asp.net core "共存" Intro 我们的 API 之前是一个单体应用,各个模块的服务是通过 Assembly 集成在一起,最后部署在一个 web ...

  2. 家庭wifi，如何组网最合适

    wifi信号通过电磁波在空中传播的,属于微波通信的一种,因为微波本身及发射功率的限制,导致wifi的穿透能力比较差,北方比较厚的承重强,铁门.家具等对都会对wifi信号有较强的削弱作用.穿过的障碍物越 ...

  3. Ruby主要方法

         方法定义        def hello(name) ...  end                                                函数名 参数 作用 备 ...

  4. Thirft 客户端等待时间

    thrift框架使用C++ thrift shows CLOSE_WAIL error thrift中TNonblockingServer的简单用法

  5. Codeforces Round #408 (Div. 2) C.Bank Hacking（二分）

    传送门 题意 给出n个银行,银行之间总共有n-1条边,定义i与j有边相连为neighboring,i到j,j到k有边,则定义i到k的关系为semi- neighboring, 每家银行hack的难度为 ...

  6. 【UVA - 540】Team Queue （map,队列）

    Team Queue Descriptions: Queues and Priority Queues are data structures which are known to most comp ...

  7. Robotframework自动化系列：筛选结果数量统计

    Robotframework自动化系统:筛选结果数量统计 上一个节点已经可以随机选中某一个下拉框的值,我们在使用evaluate随机数的时候需要计算下拉选项总数,这时候我们是手工计算输入的:这时候如果 ...

  8. oauth2(spring security)报错method_not_allowed(Request method 'GET' not supported)解决方法

    报错信息 <MethodNotAllowed> <error>method_not_allowed</error> <error_description> ...

  9. smtplib报警模块

    #!/usr/bin/env python # coding:utf-8 import time import subprocess import smtplib from email.mime.te ...

  10. python之类的相关名词解释

    变量:在类里面定义的变量,不必实例化即可调用 实例变量:在类里面定义的变量,必须实例化之后才可以调用 比如: 属性方法:调用时看起来像是一个变量,方法没有入参,可以变成一个属性方法 在方法上添加@pr ...