用到的API:@keyframes
、animation
、transform: scale()
、transform: translateY()
<view class="createAnimation">
<view class="logo">
<image src="../../static/mine/2.png" mode=""></image>
</view>
</view>
.createAnimation{
width: 750rpx;
height: 750rpx;
display: flex;
align-items: center;
justify-content: center;
border: 1rpx solid red;
.logo{
width: 120rpx;
height: 120rpx;
border-radius: 50%;
border:1px solid transparent;
animation: huxi 1200ms ease-out infinite alternate;
uni-image{
width: 120rpx;
height: 120rpx;
}
}
@keyframes huxi{
0%{
opacity: .2;
transform: scale(.8);
transform: translateY(10px);
box-shadow:0 1px 2px rgba(255,255,255,0.1);
}
100%{
opacity: 1;
transform: scale(1);
transform: translateY(-10px);
box-shadow:0 1px 30px rgba(59,255,255,1);
}
}
}