@-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. java nio的一个严重BUG

    java nio的一个严重BUG Posted on 2009-09-28 19:27 dennis 阅读(4588) 评论(5)  编辑  收藏 所属分类: java .源码解读      这个BU ...

  2. BZOJ_2225_[Spoj 2371]Another Longest Increasing_CDQ 分治+树状数组

    BZOJ_2225_[Spoj 2371]Another Longest Increasing_CDQ 分治+树状数组 Description        给定N个数对(xi, yi),求最长上升子 ...

  3. 【USACO】 Balanced Lineup

    [题目链接] 点击打开链接 [算法] 这是一道经典的最值查询(RMQ)问题. 我们首先想到线段树.但有没有更快的方法呢?对于这类问题,我们可以用ST表(稀疏表)算法求解. 稀疏表算法.其实也是一种动态 ...

  4. 在Ubuntu下获取Android4.0源代码并编译（一）

    搞了几个月的Android应用开发,勉强算是个Android开发者了吧,Android本就是开源的,还是把源代码下载下来自己编译一下,看看是个什么东西,出于好奇,和以后的职业发展,开始了无休止的And ...

  5. VS2008 MFC截取整个屏幕并保存为jpg格式

    void CMainFrame::OnSavejpg() { // TODO: 在此添加命令处理程序代码 HWND hwnd = this->GetSafeHwnd(); //得到窗口句柄 HD ...

  6. NYOJ8——一种排序

    一种排序 时间限制:3000 ms  |  内存限制:65535 KB 难度:3  描述:现在有很多长方形,每一个长方形都有一个编号,这个编号可以重复:还知道这个长方形的宽和长,编号.长.宽都是整数: ...

  7. python __builtins__ zip类 （71）

    71.'zip' , 函数用于将可迭代的对象作为参数,将对象中对应的元素打包成一个个元组,然后返回由这些元组组成的列表.如果各个迭代器的元素个数不一致,则返回列表长度与最短的对象相同,利用 * 号操作 ...

  8. 360安全中心：WannaCry勒索软件威胁形势分析

    猫宁!!! 参考链接:http://zt.360.cn/1101061855.php?dtid=1101062360&did=210646167 这不是全文,而是重点摘要部分. 2017年5月 ...

  9. Jenkins自动化部署——持续交付

    感谢之前带领过我的leader,让我能够知道什么是好的开发方法. 在很早之前就接触过敏捷开发.什么是敏捷开发,简单来说就是让软件可靠地,快速地发布出来的一种开发方法和技巧. 而敏捷开发中有许多的实践, ...

  10. iOS 优雅地隐藏导航栏NavigationBar (Objc)

    @interface FSViewController () <UINavigationControllerDelegate> @end @implementation FSViewCon ...