css实现小球滚动loading加载动画效果代码

代码语言:html

所属分类:加载滚动

代码描述:css实现小球滚动loading加载动画效果代码

代码标签: css 小球 加载 滚动

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <style>
        body:after {
        	content:"";
        	z-index:-1;
        	position:absolute;
        	top:0;
        	right:0;
        	bottom:0;
        	left:0;
        	background:-webkit-radial-gradient(center center,circle cover,rgba(0,0,0,0),rgba(0,0,0,0.5));
        	background:-moz-radial-gradient(center center,circle cover,rgba(0,0,0,0),rgba(0,0,0,0.5));
        	background:-ms-radial-gradient(center center,circle cover,rgba(0,0,0,0),rgba(0,0,0,0.5));
        	background:-o-radial-gradient(center center,circle cover,rgba(0,0,0,0),rgba(0,0,0,0.5));
        	background:radial-gradient(center center,circle cover,rgba(0,0,0,0),rgba(0,0,0,0.5));
        }
        .bar {
        	font-size:20px;
        	width:10em;
        	height:1em;
        	position:relative;
        	margin:100px auto;
        	border-radius:.5em;
        	background:rgba(255,255,255,0.6);
        	box-shadow:0 0 0 .05em rgba(100,100,100,0.075),0 0 0 .25em rgba(0,0,0,0.1),inset 0 .1em .05em rgba(0,0,0,0.1),0 .05em rgba(255,255,255,0.7);
        }
        .bar:after {
        	content:"Please wait.";
        	position:absolute;
        	left:25%;
        	top:150%;
        	font-family:'Carrois Gothic',sans-serif;
        	font-size:1em;
    .........完整代码请登录后点击上方下载按钮下载查看

网友评论0