小程式/H5水波動畫
阿新 • • 發佈:2018-12-21
//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; }