@-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. BZOJ_4278_[ONTAK2015]Tasowanie_后缀数组

    BZOJ_4278_[ONTAK2015]Tasowanie_后缀数组 Description 给定两个数字串A和B,通过将A和B进行二路归并得到一个新的数字串T,请找到字典序最小的T. Input ...

  2. Mac 下的截图技巧

    最近想制作GIF图片,截图后,发现没有截出鼠标小效果,自己就查阅了一下资料,总结了不少的截图技巧,这里写下来,权当笔记,方便今后检索,方便别人共享. 方法一: 下载 QQ,在QQ的皮娜好设置里面设置截 ...

  3. Codeforces - 346A - Alice and Bob - 简单数论

    http://codeforces.com/problemset/problem/346/A 观察了一下,猜测和他们的最大公因数有关,除以最大公因数前后结果是不会变的. 那么怎么证明一定是有n轮呢?我 ...

  4. BZOJ3834:Solar Panels （分块）

    题意 询问两个区间[smin,smax],[wmin,smax]中是否存在k的倍数,使得k最大 分析 将其转化成\([\frac{smin-1}k,\frac{smax}k],[\frac{wmin- ...

  5. 力荐！35 个最好用的 Vue 开源库！

    无论是开发新手还是经验丰富的老手,我们都喜欢开源软件包.对于开发者来说,如果没有这些开源软件包,很难想象我们的生活会变得多么疲惫不堪,而且靠咖啡度日也会成为家常便饭.所幸的是,随着 Vue.js 和 ...

  6. UltraEdit - 怎么显示文件标签栏和侧边栏

    显示文件标签栏 view -> views/lists -> open Files Tabs 显示侧边栏 view -> views/lists -> File Tree Vi ...

  7. UWP 剪贴板

    一:剪贴板 一般的复制,用户自己光标选中文本,crtl +c复制就可以了.但是有时候也需求有一个复制的按钮,当用户点击复制按钮,就可以把当前的某些内容复制到剪贴板里. 这里就用到了DataPackag ...

  8. 【Helvetic Coding Contest 2018】B2. Maximum Control (medium)

    Description 传送门(翻译就别想了,本人英语太垃圾) Solution 设ans[i]为设置i个船时能控制的最多星球数(看到这你可能因为是dp,然而我可以很负责地告诉你是假的) 首先一个显然 ...

  9. HTML中div的悬浮标题

    <div title="我是鼠标悬停文字">我是一个DIV</div> <div class="diggao" title=&qu ...

  10. 题解报告：hdu1201（18岁生日）

    2018-02-24题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1201 Problem Description Gardon的18岁生日就要到了,他 ...