CSS3动画——全屏广告“跳过”按钮样式

傷城~ 2022-11-03 05:42 38阅读 0赞

先放个效果图：  
![在这里插入图片描述][20210227081825800.gif_pic_center]  
上代码：

html{ 
    	box-shadow: 0 0 10px 5px rgba(0,0,0,0.05);
        padding: 20px;
        margin: 30px;
    }
    #timer div{ 
    	box-sizing: border-box;
    }
    #timer{ 
    	position: relative;
    	width: 36px;height: 36px;
    	margin: 0 auto;
    }
    .timer-text{ 
    	width: 100%;height: 100%;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	font-size: 12px;
    	color: #FFFFFF;
    	background: rgba(0,0,0,0.2);
    	border-radius: 50%;
    }
    .timer-round{ 
    	width: 100%;height: 100%;
    	position: absolute;
    	top: 0;left:0;
    }
    .wrap{ 
    	width: 50%;height: 100%;
    	position: absolute;
    	top: 0;
    	overflow: hidden;
    }
    .left{ left:0;}
    .right{ right:0;}
    .radius{ 
    	width: 200%;height: 100%;
    	border-radius: 50%;
    	position: absolute;
    	top: 0;
    	border: 2px solid #FFFFFF;
    }
    .left-radius{ 
    	left: 0;
    	transform: rotate(45deg);
    	border-left-color: #3385ff;
    	border-bottom-color: #3385ff;
    	animation: leftRadius 4s linear;
    	/*动画停留在最后一帧*/
    	animation-fill-mode: forwards;
    	-moz-animation-fill-mode: forwards;
    	-webkit-animation-fill-mode: forwards;
    	-o-animation-fill-mode: forwards;
    }
    .right-radius{ 
    	right: 0;
    	transform: rotate(45deg);
    	border-right-color: #3385ff;
    	border-top-color: #3385ff;
    	animation: rightRadius 4s linear;
    	/*动画停留在最后一帧*/
    	animation-fill-mode: forwards;
    	-moz-animation-fill-mode: forwards;
    	-webkit-animation-fill-mode: forwards;
    	-o-animation-fill-mode: forwards;
    }
    @keyframes leftRadius{ 
    	0%{ 
    		transform: rotate(45deg);
    	}
    	50%{ 
    		transform: rotate(45deg);
    	}
    	100%{ 
    		transform: rotate(225deg);
    	}
    }
    @keyframes rightRadius{ 
    	0%{ 
    		transform: rotate(45deg);
    	}
    	50%{ 
    		transform: rotate(225deg);
    	}
    	100%{ 
    		transform: rotate(225deg);
    	}
    }

[20210227081825800.gif_pic_center]: /images/20221024/839a7b4dca774d00863fdd6c04a5209b.png