@-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. 基于C#实现Windows服务状态启动和停止服务的方法

    网址:http://www.jb51.net/article/89230.htm

  2. angularJS 的双向数据绑定

    input 里面的vale="变量名";加上ng-model="变量名";控制器的变量名会根据视图层的数据改变而改变,而渲染内容也会根据控制器里面的变量改变而改 ...

  3. Educational Codeforces Round 24 CF 818 A-G 补题

    6月快要结束了 期末也过去大半了 马上就是大三狗了 取消了小学期后20周的学期真心长, 看着各种北方的学校都放假嗨皮了,我们这个在北回归线的学校,还在忍受酷暑. 过年的时候下定决心要拿块ACM的牌子, ...

  4. Asp.net MVC 使用PagedList（新的已更名 为X.PagedList.Mvc） 分页

    在asp.net mvc 中,可以bootstrap来作为界面,自己来写分页程序.也可以使用PagedList(作者已更名为 X.PagedList.Mvc)来分页. 1.首先,在NuGet程序包管理 ...

  5. 考拉定时任务框架kSchedule

    此文已由作者杨凯明授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 1.背景 目前项目中使用的定时任务框架存在下面这些问题 没有统一的定时任务管理平台 目前项目中使用定时任务的 ...

  6. HDU 6092:Rikka with Subset(dp)

    分析 很多个较小的数字可以随机组合成较大的数字,所以B数组从小到大开始遍历,除了空集,最小的那个存在的个数对应的数字必然是a数组中的数字. 每求出这一部分之后,更新后续的B序列. 分析完后,主要的难点 ...

  7. python 面向对象十二 元类

    一.类也是对象 只要使用关键字class,Python解释器在执行的时候就会创建一个对象.下面的代码段: class ObjectCreator(object): pass 将在内存中创建一个对象,名 ...

  8. Hello world——程序员的第一篇代码

    Hello world 是和A+B问题并驾齐驱的一道题,也是当世的经典题之一. 题目: 输出“Hello world”    样例输入 样例输出    Hello world Hello world ...

  9. dwr学习 之 一、dwr+spring的简单集成

    1. 环境搭建 我采用的环境为SpringMVC + myBatis + mySql + maven: 关于使用Eclipse构建Maven的SpringMVC项目,请参考: http://limin ...

  10. 求导四则运算以及三角函数求导 Derivative formulas

    对特定函数的求导. 1:sin(x) 对其进行求斜率.带入公式得:[ sin(x+Δx)- sin(x)]/Δx  = [ sinx*cosΔx + cosx*sinΔx -sin x ]/ Δx = ...