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放大 ...

随机推荐

关于linux上postgresql的一些理解
刚开始接触postgresql,安装后就有一个默认用户postgres,而且在启动postgresql后只能通过切换到linux的postgres用户才能登录数据库进行操作,和Mysql的登录认证居然 ...
js取数组最大值的四种方式
var arr = [7,2,0,-3,5];1.apply()应用某一对象的一个方法,用另一个对象替换当前对象 var max = Math.max.apply(null,arr);console. ...
微信小程序picker组件关于objectArray数据类型绑定
一.前言: 我发现很多的同学都在抱怨说微信小程序的picker的mode = selector/mode = multiSelector 无法实现Object Array数据类型的绑定,其实很多人就想 ...
React教程（一） React介绍与搭建
React的介绍: React来自于Facebook公司的开源项目 React 可以开发单页面应用 spa(单页面应用) react 组件化模块化开发模式 React通过对DOM的模拟(虚拟dom) ...
10分钟详解Spring全家桶7大知识点
Spring框架自2002年诞生以来一直备受开发者青睐,它包括SpringMVC.SpringBoot.Spring Cloud.Spring Cloud Dataflow等解决方案.有人亲切的称之为 ...
Python面向对象组合（选课系统示例）
# Author : Kelvin # Date : 2019/1/15 20:44 """ 学校与老师关联课程与老师和学校关联 """ ...
C# 《编写高质量代码改善建议》整理&笔记 --(四)资源管理&序列化
1.显示释放资源需继承接口IDisposable 什么是资源:C#中每一个类型都代表一种资源,而资源又分为以下两类. 托管资源:由CLR管理分配和释放的资源,即从CLR里new出来的对象. 非托管资源 ...
《前端之路》之五 head 头标签指南
12:head 头标签指南常见头标签 DOCTYPE 文档模式对文档进行有效性验证告诉用户代理或浏览器这个文档是按照什么DTD写的,但是这个动作是被动的,每次页面加载时,浏览器并不会下载DTD, ...
Python获取网络中的存活主机以及哪些主机是Linux
这个脚本用于扫描网络中的存活主机,通常在CMDB中自动获取主机的时候用到. #!/usr/bin/env python # -*- coding: utf-8 -*- ""&quo ...
微信公众号开发C#系列-10、长链接转短链接
1.概述短网址的好处众多,便于记忆,占用字符少等,现在市面上出现了众多的将长网址转变为短网址的方法,但是由于他们都是小的公司在幕后运营,所以很不靠谱,面对随时关闭服务的可能,这样也导致我们将转换好了 ...