网页加载效果

最新推荐文章于 2024-07-18 15:48:23 发布

喜欢爱笑的女孩子

最新推荐文章于 2024-07-18 15:48:23 发布

阅读量216

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/qq_52899829/article/details/121423310

版权

html代码：

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/load.css" />
	</head>
	<body>
		<link href='https://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet' type='text/css'>
<div class="container" style="">
  <div class='ring blue'></div>
  <div id="content">
    <span>加载中，请稍后</span>
  </div>
</div>
	</body>
</html>

css样式：

body { background: #222 }
/* ANIMATION */
@-webkit-keyframes rotate { 
  from { -webkit-transform: rotate(0deg) } 
  to { -webkit-transform: rotate(360deg) } }
@-moz-keyframes rotate { 
  from { -moz-transform: rotate(0deg) } 
  to { -moz-transform: rotate(360deg) } }
@-o-keyframes rotate { 
  from { -o-transform: rotate(0deg) } 
  to { -o-transform: rotate(360deg) } }
@keyframes rotate { 
  from { transform: rotate(0deg) } 
  to { transform: rotate(360deg) } }

@-webkit-keyframes fade { 
  from { opacity: 1 }
  50% { opacity: 0 }
  to { opacity: 1 } }
@-moz-keyframes fade { 
  from { opacity: 1 }
  50% { opacity: 0 }
  to { opacity: 1 } }
@-o-keyframes fade { 
  from { opacity: 1 }
  50% { opacity: 0 }
  to { opacity: 1 } }
@keyframes fade { 
  from { opacity: 1 }
  50% { opacity: 0 }
  to { opacity: 1 } }

/* CONTAINER */
.container {
  width: 150px;
  height: 150px;
  /* PRESENTATIONAL PURPOSES */
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  /**/
  cursor: pointer;
  -webkit-user-select: none;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 0 6px #222,
    0 0 6px 10px #444;
  -moz-box-shadow: 0 0 0 6px #222,
    0 0 6px 10px #444;
  box-shadow: 0 0 0 6px #222,
    0 0 6px 10px #444
}

/* TEXT */
#content {
  background: #222;
  background: -webkit-linear-gradient(#222,#111);
  background: -moz-linear-gradient(#222,#111);
  background: -o-linear-gradient(#222,#111);
  background: linear-gradient(#222,#111);
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  text-align: center;
  font: normal normal normal 12px/140px 
    'Electrolize', Helvetica, Arial, sans-serif;
  color: #fff
}

#content span {
  vertical-align: middle;
  -webkit-animation: fade 1s linear infinite;
  -moz-animation: fade 1s linear infinite;
  -o-animation: fade 1s linear infinite;
  animation: fade 1s linear infinite
}

/* SPINNING GRADIENT */
.ring {
  margin: 0 auto;
  border-radius: 110px;
  padding: 10px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-animation: rotate 1s linear infinite;
  -moz-animation: rotate 1s linear infinite;
  -o-animation: rotate 1s linear infinite;
  animation: rotate 1s linear infinite
}

/* COLORS */
.green { 
  background: -webkit-linear-gradient(#bfff00,transparent,#bfff00);
  background: -moz-linear-gradient(#bfff00,transparent,#bfff00);
  background: -o-linear-gradient(#bfff00,transparent,#bfff00);
  background: linear-gradient(#bfff00,transparent,#bfff00)
}

.blue {
  background: -webkit-linear-gradient(#3cf,transparent,#3cf);
  background: -moz-linear-gradient(#3cf,transparent,#3cf);
  background: -o-linear-gradient(#3cf,transparent,#3cf);
  background: linear-gradient(#3cf,transparent,#3cf)
}

.red {
  background: -webkit-linear-gradient(#cd5c5c,transparent,#cd5c5c);
  background: -moz-linear-gradient(#cd5c5c,transparent,#cd5c5c);
  background: -o-linear-gradient(#cd5c5c,transparent,#cd5c5c);
  background: linear-gradient(#cd5c5c,transparent,#cd5c5c)
}

.purple {
  background: -webkit-linear-gradient(#e166e1,transparent,#e166e1);
  background: -moz-linear-gradient(#e166e1,transparent,#e166e1);
  background: -o-linear-gradient(#e166e1,transparent,#e166e1);
  background: linear-gradient(#e166e1,transparent,#e166e1)
}

效果：

喜欢爱笑的女孩子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
网页加载效果

html代码：<html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/load.css" /> </head> <body> <link href='https://fonts.googleapis.com/css?family=Electrolize' rel=.
复制链接

扫一扫