首先，先介绍一下主要用到的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. SQL 高效运行注意事项（一）

    设计SQL后,应使用explain命令检查SQL,看是否使用到索引,是否存在filesort,重点检查检索的行数(rows)是否太大. 一般来说. 1.rows<1000,是在可接受的范围内的. ...

  2. NLP第八条

    今日!我虽啥也没干,但我还是有着学习的心的~          也许是“遵义会议”呢   那也说不定 留下这句话再说 哈哈哈哈哈哈 只能抄抄NLP第八条了  谁叫我选了个灰常有意义的通识课咧 八,每一 ...

  3. 织梦5.7sp1最新问题：后台不显示编辑器

    1.在后台的“系统基本参数”里修改“站点设置”的“网页主页链接:空”. 2.修改“核心设置”DedeCMS安装目录:空“. 3.试试,问题解决.

  4. [AI开发]将深度学习技术应用到实际项目

    本文介绍如何将基于深度学习的目标检测算法应用到具体的项目开发中,体现深度学习技术在实际生产中的价值,算是AI算法的一个落地实现.本文算法部分可以参见前面几篇博客: [AI开发]Python+Tenso ...

  5. pycharm远程同步服务器代码，并设置权限

    Pycharm开发工具链接至上面创建的虚拟环境链接 权限问题:此时上传还可能遇到权限问题,即使用的用户名没有权限在给定的目录下写入和修改文件. ubuntu权限管理:移动到指定目标上传文件夹的父文件夹 ...

  6. mac-os安装autojump

    一 概念 autojump是一个命令行工具,它可以使用快捷命令,直接跳转到配置好的目录,而不用管现在身在何处,依赖zsh. 一 安装 安装zsh:sh -c "$(curl -fsSL ht ...

  7. Capacitor 新一代混合应用“神器” 会代替Cordova吗？？

    1.介绍or畅想 Capacitor是由ionic团队最新开发维护的一个跨平台的应用程序容器,可以轻松构建在iOS,Android,Electron 和 Web 上本机运行的Web应用程序.我们称这些 ...

  8. Jenkins高级用法 - Pipeline 安装

    一.总体介绍 总体介绍内容摘自 玩转Jenkins Pipeline(大宝鱼) 1.核心概念 Pipeline,简而言之,就是一套运行于Jenkins上的工作流框架,将原本独立运行于单个或者多个节点的 ...

  9. Python爬虫入门教程 43-100 百思不得姐APP数据-手机APP爬虫部分

    1. Python爬虫入门教程 爬取背景 2019年1月10日深夜,打开了百思不得姐APP,想了一下是否可以爬呢?不自觉的安装到了夜神模拟器里面.这个APP还是比较有名和有意思的. 下面是百思不得姐的 ...

  10. HTTP1.0和HTTP1.1的区别

    1.HTTP 1.1支持长连接(PersistentConnection)和请求的流水线(Pipelining)处理 HTTP 1.0规定浏览器与服务器只保持短暂的连接,浏览器的每次请求都需要与服务器 ...