/**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);
}
}