div+css实现一个简约计时器效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现一个简约计时器效果代码,无js代码,点击开始计时,再次点击暂停。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@property --n{
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --t{
syntax: '<color>';
inherits: true;
initial-value: #000;
}
@property --r{
syntax: '<color>';
inherits: true;
initial-value: #000;
}
@property --b{
syntax: '<color>';
inherits: true;
initial-value: #000;
}
@property --l{
syntax: '<color>';
inherits: true;
initial-value: #000;
}
.d {
width: 77px; /* size */
display: inline-grid;
aspect-ratio: .55;
}
.d:before,
.d:after {
content: "";
padding: 20%;
background:
conic-gradient(from -45deg at 50% 45%,var(--t) 90deg,#0000 0),
conic-gradient(from 45deg at 55% 50%,var(--r) 90deg,#0000 0),
conic-gradient(from 135deg at 50% 55%,var(--b) 90deg,#0000 0),
conic-gradient(from 225deg at 45% 50%,var(--l) 90deg,#0000 0);
--m: conic-gradient(#000 0 0) content-box,conic-gradient(#000 0 0);
-webkit-mask: var(--m);
mask: var(--m);
-webkit-mask-composite: xor;
mask-composite: exclude;
clip-path: polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%);
transition:--t .45s,--l .45s,--b .45s,--r .45s;
}
.d:after {
margin-top: -20%;
--t: #0000;
}
.d {
--1:(var(--n) - 1)*(var(--n) - 1);
--2:(var(--n) - 2)*(var(--.........完整代码请登录后点击上方下载按钮下载查看
网友评论0