html+css3绿色条纹loading进度条特效

来源：互联网 2023-03-16 19:09:45 版权归原作者所有，如有侵权，请联系我们

html css3绿色条纹loading进度条特效

工具/原料

adobe dreamweaver

方法/步骤

新建html文档。

html css3绿色条纹loading进度条特效

书写hmtl代码。

div class="container">

h1>百度经验/h1>

div class="warning">/div>

/div>

html css3绿色条纹loading进度条特效

初始化css代码。

style>

html, body { width : 100%; height : 100%; margin : 0; padding : 0; }

.wrapper { position : relative; width : 420px; margin : 0 auto; padding : 0; font-size : 0; }

.icon { position : relative; display : inline-block; width : 100px; height : 100px; margin : 20px; border-radius : 18px; -webkit-box-sizing : border-box; -moz-box-sizing : border-box; box-sizing : border-box; }

/style>

html css3绿色条纹loading进度条特效

书写css代码。

style>

body, html { position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: 100%; }

body { background-repeat: no-repeat; background-position: center; background-image: radial-gradient(circle, #c0e979, #96d923); }

.warning { position: relative; background-color: #6DA807; border: 1px solid #6DA807; border-radius: 10px; box-shadow: 1vw 3vh 10vh rgba(109, 168, 7, 0.8); background-size: 3em 3em; background-image: linear-gradient(-45deg, transparent 0em, transparent 0.8em, #96D923 0.9em, #96D923 2.1em, transparent 2.1em, transparent 2.9em, #96D923 3.1em); -webkit-animation: warning-animation 750ms infinite linear; -moz-animation: warning-animation 750ms infinite linear; animation: warning-animation 750ms infinite linear; }

@-webkit-keyframes warning-animation { 0% {

background-position: 0 0;

}

100% {

background-position: 3em 0;

}

@-moz-keyframes warning-animation { 0% {

background-position: 0 0;

}

100% {

background-position: 3em 0;

}

@keyframes warning-animation { 0% {

background-position: 0 0;

}

100% {

background-position: 3em 0;

}

.warning:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; border-radius: 10px; background-image: linear-gradient(to bottom, #6DA807, rgba(171, 226, 77, 0.6) 15%, transparent 60%, #6DA807); }

.container { width: 20vw; margin: 45vh auto 0; }

.container .warning { height: 3vh; }

/style>

html css3绿色条纹loading进度条特效