首先，先介绍一下主要用到的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. uboot的驱动模型理解

    uboot的驱动模型,简称dm, 具体细节建议参考./doc/driver-model/README.txt 关于dm的三个概念: uclass:一组同类型的devices,uclass为同一个gro ...

  2. 查找第三方银行官方app下载链接探索过程

    需求:最近有个需求,点击按钮,弹出一个所需银行选项的非全屏弹出层,再点击某银行选项,随即跳转到该银行的app下载界面,如下图所示           注:这里只是引用相关银行的链接,不需要做什么逻辑处 ...

  3. java集合常见面试题

    1. Array和ArrayList的区别,什么时候更合适用Array a)      Array是数组,可以容纳基本类型和对象,而ArrayList是集合,只能容纳对象 b)      Array是 ...

  4. MaterialCalendarDialog【Material样式的日历对话框】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 Material样式的日历对话框 前提条件:Activity界面必须继承FragmentActivity或者其子类(比如AppCom ...

  5. 103 - kube-scheduler源码分析 - 调度算法-寻找predicates和priorities

    scheduler的主要逻辑是predicate和priority,前者回答哪些节点可以运行pod的问题,后者回答哪个节点更合适运行pod的问题.今天我们的任务是:从主函数出发,寻找predicate ...

  6. RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.2版本正式发布

     RDIFramework.NET .NET快速信息化系统开发框架 V3.2版本 正式发布 精益求精求完美! 1.RDIFramework.NET框架介绍 RDIFramework.NET,基于.NE ...

  7. 【带着canvas去流浪（6）】绘制雷达图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文 ...

  8. 简简单单的Vue3（插件开发，路由系统，状态管理）

    既然选择了远方,便只顾风雨兼程 __ HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 插件 路由(vue-router) 状态管理模式(Vuex) 那在上篇文章,我们讲了, ...

  9. C#根据屏幕分辨率改变图片尺寸

    最近工作中遇到一个问题,就是需要将程序文件夹中的图片根据此时电脑屏幕的分辨率来重新改变图片尺寸 以下为代码实现过程: 1.获取文件夹中的图片,此文件夹名为exe程序同目录下 //读取文件夹中文件 Di ...

  10. 由于服务主机:DCOM服务进程占用过多CPU，导致系统卡死

    最近在使用电脑的时候,总是出现电脑死机,而且鼠标也是经常卡在那里不动了,开始以为是鼠标的问题,还换了个鼠标(飙泪中),这还是一个血的教训啊!!!之后打开任务管理器发现CPU占用已经达到100%,而且一 ...