效果图:
html:
60%
css:
/*进度条*/
.progress-wrap {
width: 100%;
height: 12px;
border-radius: 8px;
position: relative;
}
.progress-wrap span{
position:absolute;
left:50%;
top:-20px;
color:#000;
}
/*进度条底层背景样式*/
.progress-inner {
height: inherit;
background: rgb(142 193 255 / 20%);
border-radius: 8px;
}
/*进度层样式效果,使用动画效果*/
.progress-nums {
width: 60%;
height: inherit;
border-radius: 6px;
background: repeating-linear-gradient(-45deg, #008bdd 25%, #49beff 0, #49beff 50%, #008bdd 0, #008bdd 75%, #49beff 0);
background-size: 16px 16px;
animation: panoramic 30s linear infinite;
}
/*定义动画*/
@keyframes panoramic{
to {
background-position: 200% 0;
}
}
上篇:css 渐变跟随鼠标光标按钮动画
页面更新:2024-03-15
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2008-2024 All Rights Reserved. Powered By bs178.com 闽ICP备11008920号-3
闽公网安备35020302034844号