首先，先介绍一下主要用到的css属性：animation，text-shadow。

　　text-shadow就不再介绍了，上一篇已经详细介绍了用法。这里先介绍一下animation属性。

1.animation

　　animation是css3的属性，主要有以下几项：

属性 描述  
@keyframes 规定动画。  
animation 所有动画属性的简写属性，除了 animation-play-state 属性。  
animation-name 规定 @keyframes 动画的名称。  
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。  
animation-timing-function 规定动画的速度曲线。默认是 "ease"。  
animation-delay 规定动画何时开始。默认是 0。  
animation-iteration-count 规定动画被播放的次数。默认是 1。  
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。  
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。  
animation-fill-mode 规定对象动画时间之外的状态。  

指定动画和播放的速度时间等相关设置。

2.keyframes

　　关键帧是css动画的另一个重要属性。要设置动画必须指定要关键帧。　

　　用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成，我们也可以设置好0-100中间的各个时间阶段的样式。比如这里，我们指定了首尾两个节点的样式：

 @keyframes ani1 {

       from {

         text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 30px #fff, 0 0 40px #ff1177, 0 0 70px #ff1177, 0 0 80px #ff1177, 0 0 150px #ff1177;

       }

       to {

         text-shadow: 0 0 5px #fff,0 0 15px #fff,0 0 20px #fff, 0 0 30px #ff1177, 0 0 40px #ff1177, 0 0 50px #ff1177, 0 0 60px #ff1177;

       }

     }

其原理，就是利用text-shadow的渐变过渡结合动画，来实现呼吸灯的亮暗效果。

　　我们可以设置更准确的百分比样式，如：

 @keyframes myfirst

 {

 0%   {background: red;}

 25%  {background: yellow;}

 50%  {background: blue;}

 100% {background: green;}

 }

3.结合使用

 <!DOCTYPE html>

 <html>

 <head>

   <meta charset="UTF-8">

   <style type="text/css">

     body {

       font-weight: 400;

       background-color: black;

       text-align: center;

     }

     a {

       font-size: 7em;

       text-decoration: none;

     }

     p:nth-child(1) a {

       color: #FF1177;

     }

     p:nth-child(1) a:hover {

       color: white;

       animation: ani1 1s ease-in-out infinite alternate;

       -webkit-animation: ani1 1s ease-in-out infinite alternate;

       -moz-animation: ani1 1s ease-in-out infinite alternate;

     }

     @keyframes ani1 {

       from {

         text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 30px #fff, 0 0 40px #ff1177, 0 0 70px #ff1177, 0 0 80px #ff1177, 0 0 150px #ff1177;

       }

       to {

         text-shadow: 0 0 5px #fff,0 0 15px #fff,0 0 20px #fff, 0 0 30px #ff1177, 0 0 40px #ff1177, 0 0 50px #ff1177, 0 0 60px #ff1177;

       }

     }

     @-webkit-keyframes ani1 {

       from {

         text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 30px #fff, 0 0 40px #ff1177, 0 0 70px #ff1177, 0 0 80px #ff1177, 0 0 150px #ff1177;

       }

       to {

         text-shadow: 0 0 5px #fff,0 0 15px #fff,0 0 20px #fff, 0 0 30px #ff1177, 0 0 40px #ff1177, 0 0 50px #ff1177, 0 0 60px #ff1177;

       }

     }

     @-moz-keyframes ani1 {

       from {

         text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 30px #fff, 0 0 40px #ff1177, 0 0 70px #ff1177, 0 0 80px #ff1177, 0 0 150px #ff1177;

       }

       to {

         text-shadow: 0 0 5px #fff,0 0 15px #fff,0 0 20px #fff, 0 0 30px #ff1177, 0 0 40px #ff1177, 0 0 50px #ff1177, 0 0 60px #ff1177;

       }

     }

   </style>

 </head>

 <body>

   <div id="container">

   <p><a href="#">

     RED

   </a></p>

 </div>

 </body>

 </html>

　　需要注意的是，由于存在浏览器兼容性，IE9以上和谷歌火狐等才支持。因而写样式的时候，keyframes和animation需要使用谷歌和火狐的前缀来进行兼容：-webkit-,-moz-

CSS动画总结与呼吸灯效果的更多相关文章

  1. Android呼吸灯效果实现

    最近需要做一个搜索动画的呼吸灯效果,在网上查了下有以下两种实现方式,现记录下来. 实现呼吸灯效果本质上都是使用ImageView动画,实现alpha值变化. 第一种方式,直接使用动画实现,代码如下: ...

  2. ZYNQ自定义AXI总线IP应用——PWM实现呼吸灯效果

    一.前言 在实时性要求较高的场合中,CPU软件执行的方式显然不能满足需求,这时需要硬件逻辑实现部分功能.要想使自定义IP核被CPU访问,就必须带有总线接口.ZYNQ采用AXI BUS实现PS和PL之间 ...

  3. css动画属性--轮播图效果

    通过css的动画属性实现轮播图的显示效果 代码如下: 主体部分: <div id="move"> <ul> <li><img src=&q ...

  4. 好玩的WPF第二弹：电子表字体显示时间+多彩呼吸灯特效button

    我们先来看看Quartz MS字体动态显示系统时间的效果,难度相较于上一篇也要简单很多. 首先是定义一个TextBlock例如以下. <Grid> <TextBlock Name=& ...

  5. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  6. 赞！15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  7. CSS动画效果的回调

    用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...

  8. CSS动画效果之animation

    Y(^o^)Y css动画大乱弹之animation. 概述 什么是animation呢?在回答这个问题之前,先要说明什么叫做@keyframe(关键帧).@keyframe算是一个动画模板.在其中, ...

  9. CSS动画效果

    CSS变形效果 Transform translate:平移 translate(x,y) translateX(x) translateY(y)相对于元素原始位置平移. scale:缩放 大于1放大 ...

随机推荐

  1. JVM之垃圾收集器

    前一篇讲了垃圾收集算法--JVM之GC算法.垃圾收集算法——标记-清除算法.复制算法.标记-整理算法.分代收集算法,如果把它看作是方法论,那么下面说的就应该是内存回收的具体实现. 先看一下JVM中有哪 ...

  2. 任务型对话（一）—— NLU（意识识别和槽值填充）

    1,概述 任务型对话系统越来越多的被应用到实际的场景中,例如siri,阿里小密这类的产品.通常任务型对话系统都是基于pipline的方式实现的,具体的流程图如下: 整个pipline由五个模块组成:语 ...

  3. 向MIP开源项目提交Issues

    Issues 是 GitHub 管理需求,讨论技术方案的方式,附:官方解释.MIP 是在 GitHub 上的开源项目,也使用 Issues 来做任务管理. 一.Issues 在 MIP 项目中的应用 ...

  4. requestAnimationFrame 知多少？

    在Web应用中,实现动画效果的方法比较多,JavaScript 中可以通过定时器 setTimeout 来实现,css3 可以使用 transition 和 animation 来实现,html5 中 ...

  5. IM开发者的零基础通信技术入门(一)：通信交换技术的百年发展史(上)

    [来源申明]本文原文来自:微信公众号“鲜枣课堂”,官方网站:xzclass.com,原题为:<通信交换的百年沧桑(上)>,本文引用时已征得原作者同意.为了更好的内容呈现,即时通讯网在收录时 ...

  6. JavaSE：八种基本数据类型

    变量: 程序用来存储数据的一块内存空间,程序在运行过程中可以对其存储的数据进行改变,所以叫做变量 常量:相对于变量来说,其值是不可改变的 ​ 整数类型(byte short int long) ​ b ...

  7. JVM回收算法

    根搜索算法 原理:设立若干种根对象,当任何一个根对象到某一个对象均不可达时,则认为这个对象是可以被回收的.一般是对象持有的引用指向该对象不可达 在JAVA语言中,可以当做GC roots的对象有以下几 ...

  8. Java集合详解1：ArrayList,Vector与Stack

    今天我们来探索一下LinkedList和Queue,以及Stack的源码. 具体代码在我的GitHub中可以找到 https://github.com/h2pl/MyTech 喜欢的话麻烦star一下 ...

  9. [开源]基于Log4Net简单实现KafkaAppender

    背景 基于之前基于Log4Net本地日志服务简单实现 实现本地日志服务,但是随着项目开发演进,本地日志服务满足不了需求,譬如在预发布环境或者生产环境,不可能让开发人员登录查看本地日志文件分析. Kaf ...

  10. 如何使用git和ssh部署本地代码到服务器

    一.首先设置好自己本地的Git用户名和密码: git config --global user.name "your name" git config --global user. ...