首先，先介绍一下主要用到的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中间的各个时间阶段的样式。比如这里，我们指定了首尾两个节点的样式：

  1.  @keyframes ani1 {
  2.        from {
  3.          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;
  4.        }
  5.        to {
  6.          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;
  7.        }
  8.      }

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

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

  1.  @keyframes myfirst
  2.  {
  3.  0%   {background: red;}
  4.  25%  {background: yellow;}
  5.  50%  {background: blue;}
  6.  100% {background: green;}
  7.  }

3.结合使用

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.    <meta charset="UTF-8">
  5.    <style type="text/css">
  6.      body {
  7.        font-weight: 400;
  8.        background-color: black;
  9.        text-align: center;
  10.      }
  11.      a {
  12.        font-size: 7em;
  13.        text-decoration: none;
  14.      }
  15.      p:nth-child(1) a {
  16.        color: #FF1177;
  17.      }
  18.      p:nth-child(1) a:hover {
  19.        color: white;
  20.        animation: ani1 1s ease-in-out infinite alternate;
  21.        -webkit-animation: ani1 1s ease-in-out infinite alternate;
  22.        -moz-animation: ani1 1s ease-in-out infinite alternate;
  23.      }
  24.      @keyframes ani1 {
  25.        from {
  26.          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;
  27.        }
  28.        to {
  29.          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;
  30.        }
  31.      }
  32.      @-webkit-keyframes ani1 {
  33.        from {
  34.          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;
  35.        }
  36.        to {
  37.          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;
  38.        }
  39.      }
  40.      @-moz-keyframes ani1 {
  41.        from {
  42.          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;
  43.        }
  44.        to {
  45.          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;
  46.        }
  47.      }
  48.    </style>
  49.  </head>
  50.  <body>
  51.    <div id="container">
  52.    <p><a href="#">
  53.      RED
  54.    </a></p>
  55.  </div>
  56.  </body>
  57.  </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. Arduino入门笔记（5）：1602液晶实验（实现时钟）

    转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi 欢迎加入讨论群 64770604 一.本次实验所需器材 1.Arduino板 https://item.taoba ...

  2. MySQL性能优化总结___本文乃《MySQL性能调优与架构设计》读书笔记！

    一.MySQL的主要适用场景 1.Web网站系统 2.日志记录系统 3.数据仓库系统 4.嵌入式系统 二.MySQL架构图: 三.MySQL存储引擎概述 1)MyISAM存储引擎 MyISAM存储引擎 ...

  3. 一篇读懂HTTPS：加密原理、安全逻辑、数字证书等

    1.引言 HTTPS(全称: Hypertext Transfer Protocol Secure,超文本传输安全协议),是以安全为目标的HTTP通道,简单讲是HTTP的安全版.本文,就来深入介绍下其 ...

  4. 学习EtherCAT的感想

    第一次进入到自动化领域,接触的第一个项目就是EtherCAT的测试.初次接触以太网,有一点茫然,百度看了很多关于EtherCAT的介绍,看了一些相关的论文.EtherCAT的资料很多:ETG1000. ...

  5. python --- 插入排序算法

    先上一张图,看看能不能从里面悟出些什么: 问题的解决思路: 就是当插入第i个的时候,前面的[i- 1]个已经排好了,这时候lst[i]就倒过来逐个和前面的关键字顺序进行比较,找到插入位置即将lst[i ...

  6. 每日分享！介绍Css 盒模型！

    如何定义盒模型: 在CSS盒子模型理论中,页面中所有的元素都是看成一个盒子,并且还占据一定的空间. 一个页面是由很多这样的盒子组成的.这些盒子之间都会相会影响,因此我们掌握CSS盒模型相当重要.需要理 ...

  7. 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之九 || 依赖注入IoC学习 + AOP界面编程初探

    更新 1.如果看不懂本文,或者比较困难,先别着急问问题,我单写了一个关于依赖注入的小Demo,可以下载看看,多思考思考注入的原理: https://github.com/anjoy8/BlogArti ...

  8. 【Netty】(9）---Netty编解码器

    Netty编解码器 在了解Netty编解码之前,先了解Java的编解码: 编码(Encode)称为序列化, 它将对象序列化为字节数组,用于网络传输.数据持久化或者其它用途. 解码(Decode)称为反 ...

  9. vue项目首屏加载优化实战

    问题 单页面应用的一个问题就是首页加载东西过多,加载时间过长.特别在移动端,单页面应用的首屏加载优化更是绕不开的话题.下面我会写出我在项目中做的一些优化,希望大家能够相互讨论,共同进步. 我的项目vu ...

  10. 遍历 Map 的四种方法

    public static void main(String[] args) { Map<String, String> map = new HashMap<String, Stri ...