1、 旋转动画
代码:
<view class="view_circle"></view>
.view_circle {
margin: 50upx;
width: 200upx;
height: 200upx;
border-radius: 50%;
/* inset 表示内阴影 */
/* box-shadow: 0 3px 150upx #62d0d6 inset; */
box-shadow: -10px 0px 50upx #7ce2c0,
/*左边阴影*/
0px -10px 50upx #65dee2,
/*上边阴影*/
10px 0px 50upx #f7dc77,
/*右边阴影*/
0px 10px 50upx #c84848;
animation: turn 1s linear infinite;
}
/*
turn : 定义的动画名称
1s : 动画时间
linear : 动画以何种运行轨迹完成一个周期
infinite :规定动画应该无限次播放
*/
@keyframes turn {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(270deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
2、 闪烁动画
效果图: