【CSS】模仿微信拆红包文字左右不停旋转

mac2024-04-16  47

/**HTML*/ <div class="btn rotate">開</div> /**WXML*/ <view class="btn rotate">開</view> /**CSS*/ .btn { background-color: rgba(0, 0, 0, 0); border: 5px solid rgba(0, 183, 229, 0.9); opacity: 0.9; /* border-left: 5px solid rgba(0, 0, 0, 0); border-right: 5px solid rgba(0, 0, 0, 0); */ border-radius: 50px; box-shadow: 0 0 15px #2187e7; width: 46px; height: 46px; line-height: 46px; text-align: center; position: absolute; left: 50%; top: 50%; margin-left: -23px; margin-top: -23px; } .rotate { -webkit-animation: anim 0.6s infinite alternate; -ms-animation: anim 0.6s infinite alternate; animation: anim 0.6s infinite alternate; } @-webkit-keyframes anim { from { -webkit-transform: rotateY(180deg); } to { -webkit-transform: rotateY(360deg); } } @keyframes anim { from { transform: rotateY(180deg); } to { transform: rotateY(360deg); } }

 

最新回复(0)