div+css实现环形进度条设置值动画效果代码
代码语言:html
所属分类:进度条
代码描述:div+css实现环形进度条设置值动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=DM+Sans&family=Overpass:wght@300;400&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <script type="module" src="//repo.bfw.wiki/bfwrepo/js/ionicons.esm.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ionicons.7.1.0.js"></script> <style> :root { --primary-light: #39ddfa; --primary: #00abdf; --primary-dark: #008ada; --white: #FFFFFF; --greyLight-1: #ebf5fc; --greyLight-2: #d5e0f3; --greyLight-3: #c1d9f0; --greyDark: #646b8c; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: inherit; } html { box-sizing: border-box; font-size: 62.5%; overflow-y: scroll; font-family: "Inter", sans-serif; -webkit-font-smoothing: antialiased; letter-spacing: 0.5px; line-height: 1.4; } .container { min-height: 100vh; display: flex; justify-content: center; align-items: center; background: var(--greyLight-2); padding: 2rem; } .card { width: 34rem; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 2rem; background: var(--greyLight-1); box-shadow: 0px 20px 30px rgba(100, 131, 177, 0.2); padding: 5rem; border: 1px solid white; } .card__percent { position: relative; display: flex; justify-content: center; align-items: center; margin-bottom: 6rem; } .card__number { position: absolute; color: var(--greyDark); font-size: 3.6rem; font-family: "DM Sans", sans-serif; } .card__description { display: flex; flex-direction: column; align-items: center; text-align: center; } .card__description h2 { font-size: 1.8rem; font-family: "DM Sans", sans-serif; letter-spacing: 1.2px; margin-bottom: 1rem; color: var(--primary); } .card__description p { font-size: 1.4rem; color: var(--greyDark); } svg { position: relative; width: 24rem; height: 24rem; z-index: 1000; transform: rotate(-90deg); } svg circle { width: 100%; height: 100%; fill: none; stroke-linecap: round; transform: translate(3rem, 3rem); stroke-dasharray: 565.49; stroke-dashoffset: 282.75; transition: all 1s ease; stroke-width: 24; } .circle { position: absolute; width: 23rem; height: 23rem; border-radius: 50%; box-shadow: 6px 6px 8px var(--greyLight-2), -6px -6px 8px var(--white); background: var(--greyLight-1); } .circle__medium { width: 20.5rem; height: 20.5rem; box-shadow: inset 8px 8px 10px var(--greyLight-2), inset -4px -4px 8px var(--white); } .circle__small { width: 15.5rem; height: 15.5rem; box-shadow: 6px 6px 8px var(--greyLight-2), -2px -2px 8px var(--white); } .form { display: grid; grid-template-columns: 40% 60%; justify-items: center; padding: 4rem; margin-left: 4rem; border-radius: 2rem; background: var(--greyLight-1); text-align: center; box-shadow: 0px 20px 30px rgba(100, 131, 177, 0.2); border: 1px solid var(--white); position: relative; } .form__text { grid-column: 1/3; font-weight: 400; margin-bottom: 2rem; color: var(--greyDark); } .form input { border: none; outline: none; background: none; font-family: inherit; width: 5rem; font-size: 1.6rem; text-align: center; padding: 0.8rem; border-radius: 1rem; margin-right: 1rem; color: var(--primary); box-shadow: inset 0.2rem 0.2rem 0.4rem var(--greyLight-2), inset -0.3rem -0.3rem 0.4rem var(--white); } .form input::placeholder { color: var(--greyLight-3); } .form input:focus { color: var(--primary); box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-3), -0.2rem -0.2rem 0.5rem var(--white); } .form__btn { border: none; outline: none; font-family: "DM Sans", sans-serif; letter-spacing: 0.8px; background: var(--greyLight-1); padding: 0.8rem 2rem; border-radius: 2rem; color: var(--white); cursor: pointer; background: linear-gradient(-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0