侧边广告之心跳动画

我们经常看到在浏览器的左边或者右边的屏幕边界处会显示悬浮广告的位置，今天的博文就是实现一个悬浮在右边的带有心跳动画的侧边广告。

首先，我们需要先理一下需求：
1、悬浮在右边，即确定了广告的位置，并且悬浮则说明该元素是高于其他的页面元素的。
2、不是静止不懂的，仿若心脏跳动的轨迹，一张一收的。
3、视觉上不随页面滚动。
需求理清楚后，我们就开始编码啦~

先是定义广告盒子：
1、设置广告区域的宽高。width: 115px; height: 130px;
2、使用固定定位，即相对于浏览器窗口进行定位。position: fixed;
3、设置元素固定的具体位置。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
bottom: 380px; right: 6px;
4、设置悬浮。即高于页面上的其他元素。z-index: 1000;

然后再定义需要使用动画展示的内容元素：
1、设置盒子内容的宽高。这里是以盒子的大小定义盒子内容的大小。width: 100%; height: 100%;
2、设置盒子的背景色。background: yellowgreen;
3、加入重点之心跳动画：animation: pulse 1.6s ease 0s infinite normal both running;
4、设置动画行动轨迹pulse。
至此就完成了。

完整代码：

<div id="rfbanner">
	<p className="area">
		<i>广告位</i>
	</p>
</div>

#rfbanner{
    width: 115px;
    height: 130px;
    position: fixed;
    bottom: 380px;
    right: 6px;
    z-index: 1000;
    .area{
        width: 100%;
        height: 100%;
        background: yellowgreen;
        animation: pulse 1.6s ease 0s infinite normal both running;
    }
}
// 动画行为
@keyframes pulse{
    0% {
        transform: scale3d(1, 1, 1);
    }
    40% {
        transform: scale3d(1, 1, 1);
    }
    68.75% {
        transform: scale3d(1.05, 1.05, 1.05);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}

博文到此就结束了。博主才疏学浅，有什么不对之处，劳驾各位指点，以求进步。谢谢啦(^__)