CSS 循环动画效果。

@-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;
}

时间： 2024-10-29 19:11:29

CSS 循环动画效果。的相关文章

CSS3圆圈动画放大缩小循环动画效果

代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3圆圈动画放大缩小循环动画效果</title> <style> .dot { margin:150px auto; width:200px; height

CSS--使用Animate.css制作动画效果

一使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画; 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 </head> 6 <style> 7 /* Animate.css GitHu

1.扯闲篇是谁在敲打我窗是谁在撩动琴弦那一段被遗忘的时光渐渐地回升出我心坎是谁在敲打我窗是谁在撩动琴弦记忆中那欢乐的情景慢慢地浮现在我的脑海那缓缓飘落的小雨不停地打在我窗只有那沉默不语的我不时地回想过去是谁在敲打我窗是谁在撩动琴弦记忆中那欢乐的情景慢慢地浮现在我的脑海那缓缓飘落的小雨不停地打在我窗只有那沉默不语的我不时地回想过去是谁在敲打我窗是谁在撩动琴弦记忆中那欢乐的情景慢慢地浮现在我的脑海记忆中那欢乐的情景慢

[CSS] Transitions动画效果(1)

Transitions动画效果(1) 源码 https://github.com/YouXianMing/CSS-Animations/tree/master/Transitions 效果细节

今天学习css一些动画效果

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>银河系</title> <link rel="stylesheet" type="text/css" href="css/xuanzhuan.css"> </head> <

微信小程序实现css动画效果

最近在写微信小程序,然后之前网页也写过css动画实现,就记一下 1.依靠css的动画效果第一种实现动画效果的方法就是靠纯css来实现 @keyframes animations{ 0% { ... } ... 100% { ... } } .animation{ /*animation: name duration timing-function delay iteration-count direction;*/ /*详情参见http://www.w3school.com.cn/cssref

CSS动画效果之animation

Y(^o^)Y css动画大乱弹之animation. 概述什么是animation呢?在回答这个问题之前,先要说明什么叫做@keyframe(关键帧).@keyframe算是一个动画模板.在其中,可以使用百分比,如从0%到100%的任意值,分别在每个百分比中,加上不同的属性,从而让元素达到一种在不断变化的动画效果.这和我们制作flash动画一样,我们只需设计几个关键帧,系统就能生成动画啦! 一个@keyframe例子: 1 /*定义关键帧动画*/ 2 @keyframes myframe {

CSS自学笔记（14）:CSS3动画效果

在CSS3中也新增了一些能够对元素创建动画处理的属性.通过这些新增的属性,我们可以实现元素从一种样式变换成另一种样式时为元素添加动态效果,我们就可以取代网页中的动态图片.flash动画和JavaScript了. CSS3中新增的动画效果的属性以及主流浏览器支持情况属性浏览器支持 transition IE Firefox Chrome Safari(-webkit-) Opera @keyframes IE Firefox Chrome(-webkit-) Safari(-webkit-)

强大的CSS：文字下波浪线动画效果

之前有至少5个人在评论中询问我文章中链接hover时候波浪下划线动画是怎么实现的,类似下图gif示意: 这里就介绍下是如何实现的. 有两种实现方法,各有优劣. 一.使用径向渐变纯CSS实现就是使用径向渐变绘制我们的波浪线效果,一个波浪线循环段是有一个朝上的半个圆弧和一个朝下的半个圆弧组合而成的. 所以,我们只要使用径向渐变绘制圆弧,再通过background-position控制两个圆弧的位置,让其前后拼接在一起就可以实现波浪线效果. 相关CSS代码如下: .flow-wave { backg