利用动画属性设置一个固定的对联广告

1、对联弹窗

该方法最大的优点就是简单，因为利用了动画属性，但相比传统的对联广告肯定是有不足之处，但是也可以完善。以下代码是微信小程序的，稍微修改标签HTML也可以用。

WXML:

<view class="body">
<image class="bannerLeft" src="https://6d69-mini-p-nbnvq-1300763744.tcb.qcloud.la/happy%20new%20year/2e7ec519c16857fbbc90e1a329cbae7c.png?sign=96814fdbbd634a7422afbc1f46fd687c&t=1579157599"></image>
<image class="bannerRight"src="https://6d69-mini-p-nbnvq-1300763744.tcb.qcloud.la/happy%20new%20year/2e7ec519c16857fbbc90e1a329cbae7c.png?sign=96814fdbbd634a7422afbc1f46fd687c&t=1579157599"></image>
</view>

WXSS：

.bannerLeft
{
	width:0px;
	height:0px;
	position:absolute;
  top: 100px;
  left: 0;
	animation:myfirst 15s ease-in-out;
}
.bannerRight{
  width:0px;
	height:0px;
	position:absolute;
  right:0;
  top: 100px;
  animation:myfirst 15s ease-in-out;
}

@keyframes myfirst
{
	0%   {width:0rpx; height:0rpx;}
	20%  { width:196rpx; height:320rpx;}
	40%  {width:196rpx; height:320rpx;}
	60%  { width:0rpx; height:320rpx;}
	80% {width:196rpx; height:320rpx;}
  100% { width:0rpx; height:0rpx;}
}