@-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. CA服务器的搭建

    CA (Certification Authority) 是认证机构的国际通称,它是对数字证书的申请者发放.管理.取消数字证书的机构.CA的作用是检查证书持有者身份的合法性,并签发证书(用数学方法在证 ...

  2. laravel打印原生语句

    laravel中快捷方便的打印语句的方法步骤一:DB::connection()->enableQueryLog();$data["banner"] = WebsiteBan ...

  3. 「ZJOI2008」「LuoguP2590」树的统计（树链剖分

    题目描述 一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w. 我们将以下面的形式来要求你对这棵树完成一些操作: I. CHANGE u t : 把结点u的权值改为t II. QMAX u ...

  4. bzoj4773

    矩阵乘法 ...爆零了... 想到Floyd,却不知道怎么限制点数... 其实我们只要给Floyd加一维,dp[i][j][k]表示当前走过了i个点,从j到k的最短距离,然后这样可以倍增,最后看是否有 ...

  5. 学习笔记::kmp

    matrix67 nxt[i]:[1-i]中最长公共前后缀的长度 j=0;;i<=n;i++) { ]) j=nxt[j]; ]) j++; nxt[i]=j; }

  6. Codechef SEPT17

    Codechef SEPT17 比赛链接:https://www.codechef.com/SEPT17 CHEFSUM code给定数组 a[1..n] ,求最小的下标 i ,使得 prefixsu ...

  7. View Controller Programming Guide for iOS---(八)---Using View Controllers in the Responder Chain

    Using View Controllers in the Responder Chain 响应链中使用视图控制器 View controllers are descendants of the UI ...

  8. 洛谷 - P2887 - 防晒霜Sunscreen - 贪心

    https://www.luogu.org/problemnew/show/P2887 感觉可以: 把防晒霜拆点限制流量为瓶数,奶牛拆点限制流量为1,当某个防晒霜与奶牛匹配时连一条边,求最大流.但是这 ...

  9. bzoj 1385: [Baltic2000]Division expression【脑洞】

    加括号再去括号就是除变加,显然尽可能多的除变加是最优的,然后发现唯一不能变成乘数的是第二个数,所以把其他数乘起来mod第二个数,如果是0就是YES,否则说明最后不能除尽,就是NO #include&l ...

  10. Vue生命周期简介和钩子函数

    钩子就好像是把人的出生到死亡分成一个个阶段,你肯定是在出生阶段起名字,而不会在成年或者死亡的阶段去起名字.或者说你想在出生阶段去约炮,也是不行的.组件也是一样,每个阶段它的内部构造是不一样的.所以一般 ...