1. 程式人生 > >小程式/H5水波動畫

小程式/H5水波動畫

 

//WXML
//最外層檢視
<view class="animate cont">
//內容
  <view class="tab1">q</view>
  <view class="tab2">w</view>
  <view class="tab3">e</view>
  <view class="tab4">r</view>
</view>

//WXSS樣式

 page{
   background-color:  cadetblue;
 }
	@-webkit-keyframes opac{
		from {
			opacity: 1;
			width:0;
			height:0;
			top:50%;
			left:50%;
		}
		to {
			opacity : 0;
			width:100%;
			height:100%;
			top:0;
			left:0;
		}
	}
	.animate .tab2{
		-webkit-animation-delay:1s;
	}
	.animate .tab3{
		-webkit-animation-delay:2s;
	}
	.animate .tab4{
		-webkit-animation-delay:3s;
	}
	.cont{
		width:100px;
		height:100px;
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	.cont view{
		border:1px solid #fff;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20rpx;
		position:absolute;
		border-radius:50%;
		-webkit-animation:opac 4s infinite;
	}