利用边框盒子和动画做呼吸灯的步骤为：

1. 完成呼吸灯的静态模型
呼吸灯的静态模型就是用几个块标签嵌套，代码如下：
body中的代码：

	<div class="article">
        <div class="top">
            <div id="outer"><!--外圆-->
                <div id="inner"></div><!--内圆-->
            </div>
        </div>
        <div class="text">Hi!</div>
    </div>
css代码：
 
            box-sizing: border-box;/*将所有块级元素设置成边框盒子*/
        div.article{
            width: 200px;
            height: 300px;
            background-color: black;
            margin: 0 auto;
        div.top{
            width: 200px;
            height: 200px;
            padding: 20px;
        div#outer{
            height: 100%;
            border:5px solid #ccc;
            border-radius: 50%;
            padding: 20px;
        div#inner{
            height: 100%;
            border: 10px solid #ffff;
            border-radius: 50%;
        div.text{
            color:#ffff;
            text-align: center;
呼吸灯静态模型为：
 
 
2. 设置动画
 要让呼吸灯动起来，其实就是利用边框盒子的特性(改变其内边距，盒子宽高不变，内容大小发生变化)，改变外圆父级的内边距使外圆发生变化，改变外圆的内边距使内圆发生变化。需要注意的是，外圆变化时其内容也会变化，即内圆也会变化，所以需要在外圆变化时给外圆设置一个内边距以阻止内圆的变化。下面是动画的代码：
 
   		@keyframes outer{       /* 设置给外圆的父级使外圆进行动画 */
            25%{
                padding: 10px;
            50%{
                padding: 20px;
            100%{
                padding: 20px;
        @keyframes inner{       /* 设置给外圆使内圆进行动画 */
            25%{
                padding: 30px;
            50%{
                padding: 20px;
            75%{
                padding: 32px;
            100%{
                padding: 20px;
3. 应用动画
 首先使外圆的动画，将以下代码添加到外圆的父级，即class为top的div的样式中：
 
animation-name: outer;                  /*应用动画*/
animation-duration: 5s;                 /*设置动画持续时间*/
animation-iteration-count: infinite;    /*使动画循环*/
animation-timing-function: linear;      /*使动画的速度曲线为线性增长*/
接下来使内圆的动画，将以下代码添加到外圆的样式中：
 
animation-name: inner;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
至此，呼吸灯已经完成了，效果图如下：
 
                    利用边框盒子和动画做呼吸灯的步骤为：1. 完成呼吸灯的静态模型呼吸灯的静态模型就是用几个块标签嵌套，代码如下：body中的代码：	&lt;div class="article"&gt;        &lt;div class="top"&gt;            &lt;div id="outer"&gt;&lt;!--外圆--&gt;                &lt;div id="inner"&gt;&lt;/div&gt;&lt;!--内圆--&gt;           
<div class="mapdaohang">
	<a href="https://surl.amap.com/7d9OsE1faeQ">
		<i class="iconfont icon-map"></i>
CSS 引用 iconfont
<link rel="stylesheet" href="//at.alicdn.com/t/font_1876690_xdmjsxzdn2k.css"
&lt;head&gt;
.arrow_box{animation: glow 800ms ease-out infinite alternate; }
@keyframes glow {
        border-color: #393;
        box-shadow: 0 0 5px rgba(0,25...
<img src="./../assets/icon_tasks.png" v-if="showDot" class="rightTask taskAnimation"  @click="jumpTasks">
      <img src="./../assets/icon_tasks.png" v-i
				
用到的API：@keyframes、animation、transform: scale()、transform: translateY()
<view class="createAnimation">
	<view class="logo">
		<image src="../../static/mine/2.png" mode=""></image>
	</view>
</view>
.createAnimation{
&lt;html&gt;
&lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html;charset=utf-8"/&gt;
    &lt;title&gt;呼吸灯&lt;/title&gt;
				
记录在项目开发过程中遇到的小问题，积累开发经验，欢迎大家一起留言探讨
如何最简单的制作呼吸灯效果,之前的文章也有提到过,如何制作呼吸灯效果,本篇文章是通过CSS3来进行呼吸灯效果的制作的,话不多说,上代码
	<img src="https://up.enterdesk.com/edpic/87/05/78/8705784b4c6ad3d2f70e643eef69fff3.jpg"/>
style
    height: 300px.
				
HTML+CSS实现呼吸灯效果呼吸灯原理呼吸灯主体部分三级目录二级目录
呼吸灯原理
呼吸灯抽象过来就像呼吸一样，实现的效果是一种渐变循环的，从明亮到微弱以此无限循环的一种效果。那么用HTML写出基本框架，CSS实现样式，效果。两种方法的HTML代码是一样的
呼吸灯主体部分
两种方法的HTML代码是一样的，先贴代码。
    <div class="container">
        <div class="outer">
- 设置一个带有边框和内部填充的DIV元素，使用`animation`属性指定动画。
- 创建名为`marquee`的`@keyframes`动画，通过在不同的百分比位置更改边框颜色来实现跑马灯效果。
- 将`animation`属性设置为`marquee`，持续时间为5秒，线性运动，并且无限循环。