css实现倒计时圆环的的原理,其实就是通过css的overflow以及旋转来实现
1. 结构
首先,是左侧和右侧的半圆,拼接成一个完整的圆形,然后由一个小一圈的圆形对中间部分进行遮罩,就形成了一个圆环
import './index.less';
export default function IndexPage({ second = 4 }) {
return (
<div className="box">
{/* 左半边 */}
<div className="left_box">
{/* 左侧半圆 */}
<div
className="left_item"
style={{ animationDuration: `${second}s` }}
></div>
</div>
{/* 右半边 */}
<div className="right_box">
{/* 右侧半圆 */}
<div
className="right_item"
style={{ animationDuration: `${second}s` }}
></div>
</div>
{/* 中间部分,对非圆环部分进行遮罩 */}
<div className="mask"></div>
</div>
);
}
2. css样式
.box {
/* 最外层的盒子 */
box-sizing: border-box;
width: 48px;
height: 48px;
position: relative;
overflow: hidden;
border-radius: 50%;
// background-color: #FF8301;
border: none;
padding: 0;
}
.left_box,
.right_box {
/*
左右两边用于 隐藏 旋转的div的盒子
通过overflow来隐藏内部div旋转出去的部分
*/
position: absolute;
top: 0;
width: 24px;
height: 48px;
overflow: hidden;
z-index: 0;
border: none;
padding: 0;
}
.left_box {
left: 0px;
}
.right_box {
right: 0px;
}
.left_item,
.right_item {
/*
这是需要旋转的div(没有被mask遮盖展示出来的部分作为倒计时的线条)
*/
width: 24px;
height: 48px;
background-color: #FF8301;
border: none;
padding: 0;
}
.left_item {
/*
1.设置圆角,圆角大小为高度的一半
2.这只旋转的中心店,这是左边圆,中心点设置到右边中心点,右边圆则设置到左边中心点
*/
border-top-left-radius: 24px;
border-bottom-left-radius: 24px;
transform-origin: right center;
animation-name: loading_left;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
.right_item {
border-top-right-radius: 24px;
border-bottom-right-radius: 24px;
transform-origin: left center;
animation-name: loading_right;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
.mask {
/* 遮住div多余的部分,呈现出线条的效果 */
position: absolute;
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
z-index: 0;
border-radius: 50%;
background-color: rgb(252 247 227);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
white-space: nowrap;
}
@keyframes loading_right {
0% {
transform: rotate(180deg);
}
50% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loading_left {
0% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}