CSS动画总结与呼吸灯效果

　　首先，先介绍一下主要用到的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动画总结与呼吸灯效果的更多相关文章

Android呼吸灯效果实现
最近需要做一个搜索动画的呼吸灯效果,在网上查了下有以下两种实现方式,现记录下来. 实现呼吸灯效果本质上都是使用ImageView动画,实现alpha值变化. 第一种方式,直接使用动画实现,代码如下: ...
ZYNQ自定义AXI总线IP应用——PWM实现呼吸灯效果
一.前言在实时性要求较高的场合中,CPU软件执行的方式显然不能满足需求,这时需要硬件逻辑实现部分功能.要想使自定义IP核被CPU访问,就必须带有总线接口.ZYNQ采用AXI BUS实现PS和PL之间 ...
css动画属性--轮播图效果
通过css的动画属性实现轮播图的显示效果代码如下: 主体部分: <div id="move"> <ul> <li><img src=&q ...
好玩的WPF第二弹：电子表字体显示时间+多彩呼吸灯特效button
我们先来看看Quartz MS字体动态显示系统时间的效果,难度相较于上一篇也要简单很多. 首先是定义一个TextBlock例如以下. <Grid> <TextBlock Name=& ...
15个来自 CodePen 的酷炫 CSS 动画效果【下篇】
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
赞！15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
CSS动画效果的回调
用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...
CSS动画效果之animation
Y(^o^)Y css动画大乱弹之animation. 概述什么是animation呢?在回答这个问题之前,先要说明什么叫做@keyframe(关键帧).@keyframe算是一个动画模板.在其中, ...
CSS动画效果
CSS变形效果 Transform translate:平移 translate(x,y) translateX(x) translateY(y)相对于元素原始位置平移. scale:缩放大于1放大 ...

随机推荐

redis-dump实现redis库迁移
最近公司有切换redis库的需求,找了个简单的redis迁移方法,不过也有缺点.就是对于实时性要求很高的redis库迁移无法做到数据的实时同步.不过对于简单的redis库备份和迁移还是可以的,各位看官 ...
c# word文档的操作
参考https://blog.csdn.net/ruby97/article/details/7406806 Word对象模型 (.Net Perspective) 本文主要针对在Visual St ...
客户端和服务端（C#）时间戳的生成和转换
C# DateTime与时间戳的相互转换,包括JavaScript时间戳和Unix的时间戳. 1. 什么是时间戳首先要清楚JavaScript与Unix的时间戳的区别: JavaScript时间戳: ...
Docker 搜索镜像
文章首发个人网站: https://www.exception.site/docker/docker-search-image 本文中,您将学习 Docker 如何搜索镜像? 一.search 命令 ...
Java注解（Annotation）：请不要小看我！
Java注解是一系列元数据,它提供数据用来解释程序代码,但是注解并非是所解释的代码本身的一部分.注解对于代码的运行效果没有直接影响. 网络上对注解的解释过于严肃.刻板,这并不是我喜欢的风格.尽管这样的 ...
colly源码学习
colly源码学习 colly是一个golang写的网络爬虫.它使用起来非常顺手.看了一下它的源码,质量也是非常好的.本文就阅读一下它的源码. 使用示例 func main() { c := coll ...
spring boot 集成 zookeeper 搭建微服务架构
PRC原理 RPC 远程过程调用(Remote Procedure Call) 一般用来实现部署在不同机器上的系统之间的方法调用,使得程序能够像访问本地系统资源一样,通过网络传输去访问远程系统资源,R ...
.NET Core和Swagger 生成 Api 文档
测试/生产环境的BUG 这里更新一下在本地调试正常,在INT/PROD上抛错,错误信息为: */**/*.xml(Swagger json file) 文件找不到,在startup 里builder ...
Docker进阶之五:容器管理
容器管理一.创建容器常用选项 docker container --help 指令描述资源限制指令 -i, --interactive 交互式 -m,--memory 容器可以使用的最大内存量 ...
页面优化，谈谈重绘(repaint)和回流(reflow)
一.前言偶尔在面试过程中遇到过重汇与回流reflow的问题,毕竟页面优化也是考核一个开发者能力的关键之一,上篇文章聊了下documentfragment也是为了减轻回流问题,那么本篇文章好好介绍下重 ...