1、border动画

2、闪动动画(一闪一闪亮晶晶,满天都是小星星)

.blink {
animation: mymove 0.8s infinite;
-webkit-animation: mymove 0.8s infinite; /*Safari and Chrome*/
} @keyframes mymove {
from {
background: green;
} to {
background: #eee;
}
} @-webkit-keyframes mymove /*Safari and Chrome*/
{
from {
background: #eee;
} to {
background: green;
}
}

代码解读

0.8秒执行一次,背景色一会为#eee,一会为green,永不停止。

3、silder动画

4、进度条的动画

5、正在加载的动画

6、旗帜在天空飘动的动画

7、背景图是交叉图形的动画规则

CSS3动画常用demo的更多相关文章

  1. 代码:css3动画效果demo

    四行文字会逐次掉落:  如果要停留在最后一帧的动画,注意要用forwards,不要用both. <style type="text/css"> @-webkit-key ...

  2. !!学习笔记:CSS3动画

    一句话就有css3动画: 2016-6-29 <style type="text/css"> h1{background:#999;} h1:hover{border- ...

  3. animate.css 一些常用的CSS3动画效果

    大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...

  4. demo: 全页面CSS3动画的一个参考例子

    全页面CSS3动画的一个参考例子: http://wow.blizzard.cn/wow/wod-achievement/ 魔兽的一个活动页 第二页.第三页,文字进入页面 <script src ...

  5. 【Demo】CSS3 动画

    CSS3 动画(@keyframes,animation) CSS3 @keyframes 规则 要创建CSS3动画,你将不得不了解@keyframes规则. @keyframes规则是创建动画. @ ...

  6. css3动画简介以及动画库animate.css的使用

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

  7. 转: css3动画简介以及动画库animate.css的使用

    ~~~ transition  animation 和 animate.css 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城 ...

  8. css3动画和animate.css动画库使用

    CSS3动画 css3动画可以分为两种.transition过渡动画和keyframes关键帧动画 过渡动画 第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动 ...

  9. 【转载】css3动画简介以及动画库animate.css的使用

    原文地址:http://www.cnblogs.com/2050/p/3409129.html 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好. ...

随机推荐

  1. Debug时含有的子元素,在代码里获取不到的问题

    比如,Debug时如下图展示: 我想要获取的是:ansList.get(i).getComponent().getConnectorId() debug时明明有这个元素,但是当我写出来的时候却发现:a ...

  2. HTML 浏览器对象 讲解

    Window对象 Ø  属性 •    Document:文档对象 •    Event:事件对象 •    History:历史记录对象 •    Location:位置对象 •    Name:w ...

  3. 洛谷 P4174 [NOI2006]最大获利 解题报告

    P4174 [NOI2006]最大获利 题目描述 新的技术正冲击着手机通讯市场,对于各大运营商来说,这既是机遇,更是挑战.THU 集团旗下的 CS&T 通讯公司在新一代通讯技术血战的前夜,需要 ...

  4. 简易版AC自动机

    为什么说是简易版? 因为复杂度大概是\(O(M*\overline N)\),而似乎还有另一种大概是\(O(M+\sum N)\)的. 不过据说比赛不会卡前一种做法,因为模式串一般不会很长. 那么步入 ...

  5. hdu3516 Tree Construction (区间dp+四边形优化)

    构造方法肯定是把相邻两个点连到一起,变成一个新点,然后再把新点和别的点连到一起.... 设f[i,j]为把第i到j个点都连到一起的代价,那么答案就是f[1,n] f[i,j]=min{f[i,k]+f ...

  6. Ubuntu/Unity中更改窗口修饰键Alt为Super

    在Ubuntu中的Unity桌面环境里,可以使用Alt配合鼠标左键拖动窗口,这一方便的设定有许多不方便的地方.和很多的软件有热键上的冲突,比如Visual Stdio Code的多光标控制功能. 注意 ...

  7. 如何在通用权限管理系统中集成log4net日志功能

    开发人员都知道,在系统运行中要记录各种日志,自己写一个日志功能,无论是在效率还是功能扩展上来说都不是很好,目前大多用的是第三方的日志系统,其中一个非常有名,用的最多的就是log4net.下面是关于这个 ...

  8. 笔记: c开发gui程序 (WM_CREATE, WS_CLIPCHILDREN , SetWindowPos)

    过去两年,用c写的gui程序我一般使用的套路是: 在 winMain()中, 先创建一个主窗口, 紧接着就是在下面创建子窗口(子控件). 可能是因为写这方面的程序较少,所以也没遇到什么大问题,之前就是 ...

  9. jnlp初次试用

    1.jnlp是什么?是java提供的一种让你可以通过浏览器直接执行java应用程序的途径,它使你可以直接通过一个网页上的url连接打开一个 java应 用程序.好处就不用说了,如果你的java应用程序 ...

  10. vue-devtools chrome 开发工具

    1.github下载地址:https://github.com/vuejs/vue-devtools 有Git的同学直接 Git clone https://github.com/vuejs/vue- ...