android 锥形进度条,CSS3 锥形发光进度条
android 锥形进度条,CSS3 锥形发光进度条
CSS
语言:
CSSSCSS
确定
.progress-bar {
height: 3px;
width: 100%;
position: relative;
z-index: 10;
background-color: #55708d;
}
.progress-bar .progress {
position: relative;
height: 100%;
background-color: #cfd6dd;
transition: width 0.5s ease-out;
border-radius: 0px 2px 2px 0px;
}
.progress-bar .glow {
width: 60px;
max-width: 100%;
height: 100%;
float: right;
}
.progress-bar .glow::before,
.progress-bar .glow::after {
content: '';
display: block;
position: relative;
border-radius: 0px 2px 2px 0px;
}
.progress-bar .glow::before {
background: transparent;
height: 100%;
box-shadow: 0px 0px 10px #cfd6dd, 0px 0px 10px #04bfff;
z-index: -5;
}
.progress-bar .glow::after {
background: linear-gradient(to right, #3d5980 0%, transparent 100%);
height: calc(100% + 10px + 10px);
width: calc(100% + 10px);
top: -10px;
left: -10px;
z-index: -3;
}
.label {
font-family: Poppins;
color: #cfd6dd;
text-shadow: 0px 0px 2px #cfd6dd;
font-size: 24px;
}
.fill-1 {
animation: fill-1 0.5s ease-out 0s;
animation-fill-mode: forwards;
width: 0%;
}
.fill-2 {
animation: fill-2 0.5s ease-out 0.5s;
animation-fill-mode: forwards;
width: 0%;
}
.fill-3 {
animation: fill-3 0.5s ease-out 1s;
animation-fill-mode: forwards;
width: 0%;
}
@keyframes fill-1 {
0% {
width: 0%;
}
100% {
width: 70%;
}
}
@keyframes fill-2 {
0% {
width: 0%;
}
100% {
width: 40%;
}
}
@keyframes fill-3 {
0% {
width: 0%;
}
100% {
width: 90%;
}
}
.label.one {
animation: label 0.5s ease-out 0s;
animation-fill-mode: forwards;
opacity: 0;
}
.label.two {
animation: label 0.5s ease-out 0.5s;
animation-fill-mode: forwards;
opacity: 0;
}
.label.three {
animation: label 0.5s ease-out 1.0s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes label {
0% {
opacity: 0;
transform: translateY(10px);
}
100% {
opacity: 0.9;
transform: translateY(0);
}
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
background-color: #3d5980;
box-sizing: border-box;
}
body {
padding: 60px 20px;
}
body .wrapper {
max-width: 600px;
margin: 0 auto;
}
body .wrapper .container {
padding: 20px;
}
body .wrapper .container > * {
margin-bottom: 10px;
}
- phpcms api接口开发
- 设计非关系型数据库
- cmd md命令 创建文件夹
- Module and Component
- linux 下dump文件放在那里,怎么查看dump文件目录
- spring boot checktoken Principal 如何注入
- java中principal对象,如何使用OAuth2获取Spring的自定义Principal对象?
- 电话银行
- 详解mmap:是什么 为什么 怎么用
- Jmeter 之 Beanshell 用法
- ext2和ext3的主要区别
- C语言中的void和void指针
- Mac OS X下Adwaremalware 的简单手动排除方法
- CSS3实现图片的3D旋转效果
- 机器学习并没有那么深奥,它很有趣(2)
- CList 动态链表的学习笔记
- HTML实现简单的注册页面
- Shiro详解
- CLAHE
- 渗透常用SQL注入语句大全