在小程序中的使用:
<view class='test1'> <image src='/images/light.png'></image> </view> <!--星星的缩放效果--> <view class='test2'> <image src='/images/star.png'></image> </view> <!--转动效果--> <view class='test3'> <image src='/images/cross.png'></image> </view> <!--望远镜--> <view class='test4'> <image src='/images/telescope.png'></image> </view>
.test1{ 160rpx; height: 160rpx; background-color: #188eee; } .test1 image{ 160rpx; height: 160rpx; animation: light 1.5s infinite; } @keyframes light{ from{ transform: rotate(0deg); } 80%,to{ transform: rotate(360deg); } } /*星星特效:*/ .test2{ 100rpx; height: 100rpx; } .test2 image{ 100rpx; height: 100rpx; animation: star .5s linear infinite alternate } @keyframes star{ form{ transform: scale(1); } to{ transform: scale(.5); } } /*转动效果:*/ .test3{ 100rpx; height: 100rpx; } .test3 image{ 100rpx; height: 100rpx; animation: cross 1s linear infinite; } @keyframes cross{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } .test4{ 500px; height: 500px; text-align: center } .test4 image{ 96px; height: 221px; animation: eyes 3.2s infinite; } @keyframes eyes{ from,90%,to{ transform: rotate(80deg) } 40%,50%{ transform: rotate(-60deg) } }