@-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. js 购物车中，多件商品数量加减效果修改，实现总价随数量加减改变

    <!DOCTYPE html> <html> <head> <meta charset=UTF-8 /> <title>无标题文档</ ...

  2. 并不对劲的bzoj5475:loj2983:p5206:[wc2019]数树

    题目大意 task0:有两棵\(n\)(n\leq10^5)个点的树\(T1,T2\),每个点的点权可以是一个在\([1,y]\)里的数,如果两个点既在\(T1\)中有直接连边,又在\(T2\)中有直 ...

  3. python单元测试之unittest框架使用总结

    一.什么是单元测试 单元测试是用来对一个模块.一个函数或者一个类来进行正确性检验的测试工作. 比如对于函数abs(),我们可以编写的测试用例为: (1)输入正数,比如1.1.2.0.99,期待返回值与 ...

  4. 【前端】CentOS 7 系列教程之三： 搭建 git 服务器

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/linux_3.html 上一篇我们安装好了git,这一篇我们搭建git服务器 创建一个用户组 groupadd g ...

  5. Code-NFine：下来框和复选框

    ylbtech-Code-NFine:下来框和复选框 1.返回顶部 1. 1.1 html $("#F_OrganizeId").bindSelect({ url: "/ ...

  6. 【旧文章搬运】对抗RKU的StealthCode检测

    原文发表于百度空间,2009-07-02========================================================================== 快一个月没 ...

  7. ML 徒手系列说明

    徒手系列正确打开方式: 1.徒手撸公式 2.徒手撸代码

  8. Java使用Jacob将Word、Excel、PPT转化成PDF

    使用Jacob将金山WPS转化成PDF,其中WPS文字使用KWPS.Aplication.Excel表格是KET.Application.演示文档是KWPP.Application,废话不多说,直接上 ...

  9. RxJava入门之路（二）

    收集一下能够避免背压的运算符 sample(500, TimeUnit.MILLISECONDS)  定期收集数据,并发送最后一个 throttleFirst(500,TimeUnit.MILLISE ...

  10. Codeforces510B【dfs】

    判断一个图里是否有一个自环: 50*50 标记起点,然后暴搜? #include <bits/stdc++.h> #include<algorithm> using names ...