css+div实现滚动页面驱动数字圈圈进度动画效果代码
代码语言:html
所属分类:进度条
代码描述:css+div实现滚动页面驱动数字圈圈进度动画效果代码
代码标签: css div 滚动 页面 驱动 数字 圈圈 进度 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
:root {
--color-bg: #fffefd;
--color-text: #020617;
--color-theme: #ffedd5;
--color-theme-accent: #fed7aa;
}
@property --progress {
syntax: "<integer>";
initial-value: 0;
inherits: false;
}
body {
color: var(--color-text);
background-color: var(--color-bg);
font-family: system-ui, sans-serif;
}
.component {
--size: 30vmin;
display: grid;
grid-template-areas:
"timer"
"caption";
place-items: center;
place-content: center;
gap: 0.2em;
position: fixed;
inset: 0;
margin: auto;
}
.timer-wrapper {
grid-area: timer;
display: grid;
place-items: center;
place-content: center;
grid-template-areas: "container";
width: var(--size);
height: var(--size);
border-radius: 50%;
background: conic-gradient(
from 45deg,
var(--color-theme-accent) calc(var(--progress) * 1%),
transparent 0
);
}
.timer-wrapper > * {
grid-area: container;
}
.timer {
width: calc(var(--size) / 1.2);
height: calc(var(--size) / 1.2);
}
.caption {
grid-area: caption;
}
.caption::before,
.caption::after {
margin-inline: auto;
content: counter(progress);
font-size: calc(0.6em + var(--size) / 6);
font-weight: bold;
text-align: center;
font-variant-numeric: tabular-nums;
}
.caption::after {
content: "%";
}
/* Warning for unsupported browsers */
.warning {
color: black;
background: papayawhip;
padding: 1rem;
line-height: 1.3;
text-align: center;
}
@supports (animation-timeline: scroll()) {
.warning {
display: none;
}
body {
height: 1000vh;
}
:is(.component, .timer-wrapper, .timer, .timer-hand, .timer-switch) {
-webkit-animation-fill-mode: both;
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0