用纯 css3 做了一个在守望先锋加载地图时的 loading

ccg
ccg 发布于 2016-08-13 00:25:56 浏览:4394 类型:原创 - 随笔 分类:HTML/CSS - css动画 二维码: 作者原创 版权保护
之前用 css3 做了一个守望先锋开场的 loading
传送门:http://codepen.io/CCG/details/KrANmJ
但是觉得做的不是很好,这次重新做了一次,在加载地图的时候录了个视频,观察了好久,还原度比较高哈哈哈哈
传送门:http://codepen.io/CCG/pen/EyGjqy/
<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>Overwatch Loader only by css3</title>
    <style type="text/css">
      html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
    </style>
    <style type="text/css">
      html {
  height: 100%;
}

body {
  background: #282828;
}

.overwatch {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -80px 0px 0px -80px;
  background-color: transparent;
  border-radius: 50%;
  border: 20px solid #B6B8C0;
}
.overwatch div.across-line:after {
  content: "";
  height: 4px;
  width: 22px;
  background: #282828;
  position: absolute;
  top: 1px;
  left: 1px;
  transform: rotate(45deg);
  transform-origin: bottom left;
  z-index: 10;
}
.overwatch div.across-line:before {
  content: "";
  height: 4px;
  width: 22px;
  background: #282828;
  position: absolute;
  top: 15px;
  right: -5px;
  transform: rotate(-45deg);
  transform-origin: bottom left;
  z-index: 10;
}
.overwatch div.taper:after {
  content: "";
  border-width: 0 0 50px 20px;
  border-style: solid;
  border-color: transparent transparent #B6B8C0;
  width: 0;
  height: 0;
  position: absolute;
  right: 62px;
  bottom: 44px;
}
.overwatch div.taper:before {
  content: "";
  border-width: 0  20px 50px 0;
  border-style: solid;
  border-color: transparent transparent #B6B8C0;
  width: 0;
  height: 0;
  position: absolute;
  left: 63px;
  bottom: 44px;
}
.overwatch:after {
  content: "";
  height: 20px;
  width: 66px;
  background: #B6B8C0;
  position: absolute;
  bottom: -3px;
  left: 11px;
  transform: rotate(-45deg) skew(-45deg);
  transform-origin: bottom left;
}
.overwatch:before {
  content: "";
  height: 20px;
  width: 66px;
  background: #B6B8C0;
  position: absolute;
  bottom: 44px;
  right: -9px;
  transform: rotate(45deg) skew(45deg);
  transform-origin: bottom left;
}

.inner-ring {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 180px;
  height: 180px;
  margin: -100px 0px 0px -100px;
  background-color: transparent;
  border-radius: 50%;
  background-color: transparent;
  border-radius: 50%;
  border: 10px solid #F9D64A;
  clip: rect(90px, 200px, 110px, 100px);
  animation: rotate 3s linear infinite;
}

.inner-ring1 {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin: -100px 0px 0px -100px;
  background-color: transparent;
  border-radius: 50%;
  background-color: transparent;
  border-radius: 50%;
  animation: rotate21 2s linear infinite;
}
.inner-ring1 .inner-ring1-c {
  position: relative;
  width: 100px;
  height: 200px;
  overflow: hidden;
}
.inner-ring1 .inner-ring1-r {
  width: 180px;
  height: 180px;
  border: 10px solid transparent;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  border-top: 10px solid #F9D64A;
  border-left: 10px solid #F9D64A;
  transform: rotate(0deg);
  animation: ring11 2s linear infinite;
}

.inner-ring2 {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin: -100px 0px 0px -100px;
  background-color: transparent;
  border-radius: 50%;
  background-color: transparent;
  border-radius: 50%;
  animation: rotate22 2s linear infinite;
}
.inner-ring2 .inner-ring2-c {
  position: relative;
  width: 100px;
  height: 200px;
  overflow: hidden;
}
.inner-ring2 .inner-ring2-r {
  width: 180px;
  height: 180px;
  border: 10px solid transparent;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  border-top: 10px solid #F9D64A;
  border-left: 10px solid #F9D64A;
  transform: rotate(0deg);
  animation: ring12 2s linear infinite;
}

.inner-ring3 {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin: -100px 0px 0px -100px;
  background-color: transparent;
  border-radius: 50%;
  background-color: transparent;
  border-radius: 50%;
  animation: ring6 2s infinite linear;
}
.inner-ring3 .inner-ring3-p1-c {
  position: relative;
  float: left;
  width: 100px;
  height: 200px;
  overflow: hidden;
}
.inner-ring3 .inner-ring3-p1-r {
  width: 180px;
  height: 180px;
  border: 10px solid transparent;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  border-top: 10px solid rgba(189, 186, 62, 0.25);
  border-left: 10px solid rgba(189, 186, 62, 0.25);
  transform: rotate(-45deg);
  animation: ring4 2s linear infinite;
}
.inner-ring3 .p1-an {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  animation: ring5 2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.inner-ring3 .inner-ring3-p2-c {
  position: relative;
  float: right;
  width: 100px;
  height: 200px;
  transform: rotate(180deg);
  overflow: hidden;
}
.inner-ring3 .inner-ring3-p2-r {
  width: 180px;
  height: 180px;
  border: 10px solid transparent;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  border-top: 10px solid rgba(189, 186, 62, 0.25);
  border-left: 10px solid rgba(189, 186, 62, 0.25);
  transform: rotate(-45deg);
  animation: ring2 2s cubic-bezier(0.5, 0, 1, 0.5) infinite;
}
.inner-ring3 .p2-an {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  animation: ring3 2s linear infinite;
}

.outer-ring {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 220px;
  margin: -116px 0px 0px -116px;
  background-color: transparent;
  border-radius: 50%;
  border: 6px solid transparent;
}
.outer-ring:after {
  content: "";
  display: block;
  position: absolute;
  top: -6px;
  left: -6px;
  width: 220px;
  height: 220px;
  border: 6px solid rgba(161, 164, 176, 0.5);
  border-radius: 50%;
  clip: rect(112px, 232px, 120px, 100px);
  animation: rotate3602 3s linear infinite reverse;
}
.outer-ring:before {
  content: "";
  display: block;
  position: absolute;
  top: -6px;
  left: -6px;
  width: 220px;
  height: 220px;
  border: 6px solid rgba(161, 164, 176, 0.5);
  border-radius: 50%;
  clip: rect(105px, 232px, 127px, 100px);
  animation: rotate3603 3s cubic-bezier(0.34, 0.07, 0.68, 0.93) infinite;
}

.outer-ring2 {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 220px;
  margin: -116px 0px 0px -116px;
  background-color: transparent;
  border-radius: 50%;
  border: 6px solid transparent;
}
.outer-ring2:after {
  content: "";
  display: block;
  position: absolute;
  top: -6px;
  left: -6px;
  width: 220px;
  height: 220px;
  border: 6px solid rgba(161, 164, 176, 0.5);
  border-radius: 50%;
  transform: rotate(120deg);
  clip: rect(80px, 232px, 152px, 100px);
  animation: rotate3602 3s linear infinite;
}
.outer-ring2:before {
  content: "";
  display: block;
  position: absolute;
  top: -6px;
  left: -6px;
  width: 220px;
  height: 220px;
  border: 6px solid rgba(161, 164, 176, 0.5);
  border-radius: 50%;
  transform: rotate(230deg);
  clip: rect(60px, 232px, 172px, 100px);
  animation: rotate360 3s cubic-bezier(0.34, 0.07, 0.68, 0.93) infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(360deg);
    clip: rect(96px, 200px, 108px, 100px);
  }
  50% {
    clip: rect(92px, 200px, 108px, 100px);
  }
  100% {
    clip: rect(96px, 200px, 108px, 100px);
    transform: rotate(0deg);
  }
}
@keyframes rotate21 {
  0% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(540deg);
  }
}
@keyframes rotate22 {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate3602 {
  0% {
    transform: rotate(120deg);
  }
  100% {
    transform: rotate(480deg);
  }
}
@keyframes rotate3603 {
  0% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(-90deg);
  }
}
@keyframes ring11 {
  0% {
    transform: rotate(-223deg);
  }
  50% {
    transform: rotate(-170deg);
  }
  100% {
    transform: rotate(-223deg);
  }
}
@keyframes ring12 {
  0% {
    transform: rotate(-205deg);
  }
  50% {
    transform: rotate(-135deg);
  }
  100% {
    transform: rotate(-205deg);
  }
}
@keyframes ring2 {
  0% {
    transform: rotate(-45deg);
  }
  35.5% {
    transform: rotate(135deg);
  }
  100% {
    transform: rotate(135deg);
  }
}
@keyframes ring3 {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(0deg);
  }
  64.5% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@keyframes ring4 {
  0% {
    transform: rotate(-45deg);
  }
  35.5% {
    transform: rotate(-45deg);
  }
  50% {
    transform: rotate(135deg);
  }
  100% {
    transform: rotate(135deg);
  }
}
@keyframes ring5 {
  0% {
    transform: rotate(0deg);
  }
  64.5% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@keyframes ring6 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

    </style>
  </head>

  <body>

    <div class="overwatch">
  <div class="across-line"></div>
  <div class="taper"></div>
</div>
<div class="inner-ring3">
	<div class="inner-ring3-p1-c">
		<div class="p1-an">
    	<div class="inner-ring3-p1-r"></div>
		</div>
  </div>
	<div class="inner-ring3-p2-c">
		<div class="p2-an">
    	<div class="inner-ring3-p2-r"></div>
		</div>
  </div>
</div>
<div class="inner-ring"></div> 
<!--
<div class="inner-ring1">
  <div class="inner-ring1-c">
    <div class="inner-ring1-r"></div>
  </div>
</div>
-->
<div class="inner-ring2">
  <div class="inner-ring2-c">
    <div class="inner-ring2-r"></div>
  </div>
</div>
<div class="outer-ring"></div> 
<div class="outer-ring2"></div>
    
    
    
    
    
  </body>
</html>
z
给个赞 36 人点赞
收藏 38 人收藏
评论 已有 11 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最热评论
老姚
老姚2016-08-13 14:05:492F
简单的如下:展开代码
<style>
div{
	width:100px;
	height:100px;
	float:left;
	border:10px solid transparent;
	border-radius:50%;
}
div:nth-of-type(1){
	border-left:10px solid red;
}
div:nth-of-type(2){
	border-left:10px solid red;
	border-top:10px solid red;
}
div:nth-of-type(3){
	border-left:10px solid red;
	border-top:10px solid red;
	border-right:10px solid red;
}
div:nth-of-type(4){
	border:none;
	border-left:10px solid red;
}
div:nth-of-type(5){
	border-left:10px solid red;
	border-radius: 100% 0 0 0;
}
</style>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
//@老姚:此文带给我的思考是如何画出各种圆弧。原来border-radius就可以!
举报 支持 (1) 回复 (2)
最新评论
极乐网
极乐网2016-08-23 10:26:5511F
不错不错,看的我以为在玩游戏,等了半天。。。emoticon
举报 支持 (0) 回复 (0)
243790605
2437906052016-08-17 14:08:3110F
真心不错  我也做个试试 哈哈哈emoticon
举报 支持 (0) 回复 (0)
您听说过前端吗
您听说过前端吗2016-08-16 17:56:129F
emoticon //@老姚emoticon,你也是一个善于利用水平思维的人。“不然看完效果后,只会觉得效果很帅,但对我没啥用。”,如果只凭直觉产生这种想法后,然后再看下一帖子,是学不到东西的,哈哈。 //@您听说过前端吗:原来border-radius还能这么玩emoticon展开代码
<style type="text/css">
			div {
				width: 100px;
				height: 100px;
				float: left;
				border: 10px solid black;
				border-radius: 50%;
				margin-left: 20px;
			}
			
			div:nth-of-type(1) {
				border-left: 10px solid red;
			}
			
			div:nth-of-type(2) {
				border-left: 10px solid red;
				border-top: 10px solid red;
			}
			
			div:nth-of-type(3) {
				border-left: 10px solid red;
				border-top: 10px solid red;
				border-right: 10px solid red;
			}
			
			div:nth-of-type(4) {
				border: none;
				border-left: 10px solid red;
			}
			
			div:nth-of-type(5) {
				border-left: 10px solid red;
				border-radius: 100% 0 0 0;
			}
			div:nth-of-type(6) {
				border-left: 10px solid red;
				border-radius: 100% 100% 100% 0;
			}
			div:nth-of-type(7) {
				border-left: 10px solid red;
				border-radius: 100% 0 100% 0;
			}
			div:nth-of-type(8) {
				border-left: 10px solid red;
				border-radius: 0 100% 100% 0;
			}
		</style>

	<body>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</body>
//@老姚:简单的如下:展开代码
<style>
div{
	width:100px;
	height:100px;
	float:left;
	border:10px solid transparent;
	border-radius:50%;
}
div:nth-of-type(1){
	border-left:10px solid red;
}
div:nth-of-type(2){
	border-left:10px solid red;
	border-top:10px solid red;
}
div:nth-of-type(3){
	border-left:10px solid red;
	border-top:10px solid red;
	border-right:10px solid red;
}
div:nth-of-type(4){
	border:none;
	border-left:10px solid red;
}
div:nth-of-type(5){
	border-left:10px solid red;
	border-radius: 100% 0 0 0;
}
</style>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
//@老姚:此文带给我的思考是如何画出各种圆弧。原来border-radius就可以!
举报 支持 (0) 回复 (0)
老姚
老姚2016-08-16 15:59:438F
emoticon,你也是一个善于利用水平思维的人。“不然看完效果后,只会觉得效果很帅,但对我没啥用。”,如果只凭直觉产生这种想法后,然后再看下一帖子,是学不到东西的,哈哈。 //@您听说过前端吗:原来border-radius还能这么玩emoticon展开代码
<style type="text/css">
			div {
				width: 100px;
				height: 100px;
				float: left;
				border: 10px solid black;
				border-radius: 50%;
				margin-left: 20px;
			}
			
			div:nth-of-type(1) {
				border-left: 10px solid red;
			}
			
			div:nth-of-type(2) {
				border-left: 10px solid red;
				border-top: 10px solid red;
			}
			
			div:nth-of-type(3) {
				border-left: 10px solid red;
				border-top: 10px solid red;
				border-right: 10px solid red;
			}
			
			div:nth-of-type(4) {
				border: none;
				border-left: 10px solid red;
			}
			
			div:nth-of-type(5) {
				border-left: 10px solid red;
				border-radius: 100% 0 0 0;
			}
			div:nth-of-type(6) {
				border-left: 10px solid red;
				border-radius: 100% 100% 100% 0;
			}
			div:nth-of-type(7) {
				border-left: 10px solid red;
				border-radius: 100% 0 100% 0;
			}
			div:nth-of-type(8) {
				border-left: 10px solid red;
				border-radius: 0 100% 100% 0;
			}
		</style>

	<body>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</body>
//@老姚:简单的如下:展开代码
<style>
div{
	width:100px;
	height:100px;
	float:left;
	border:10px solid transparent;
	border-radius:50%;
}
div:nth-of-type(1){
	border-left:10px solid red;
}
div:nth-of-type(2){
	border-left:10px solid red;
	border-top:10px solid red;
}
div:nth-of-type(3){
	border-left:10px solid red;
	border-top:10px solid red;
	border-right:10px solid red;
}
div:nth-of-type(4){
	border:none;
	border-left:10px solid red;
}
div:nth-of-type(5){
	border-left:10px solid red;
	border-radius: 100% 0 0 0;
}
</style>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
//@老姚:此文带给我的思考是如何画出各种圆弧。原来border-radius就可以!
举报 支持 (0) 回复 (1)
您听说过前端吗
您听说过前端吗2016-08-16 15:44:047F
原来border-radius还能这么玩emoticon展开代码
<style type="text/css">
			div {
				width: 100px;
				height: 100px;
				float: left;
				border: 10px solid black;
				border-radius: 50%;
				margin-left: 20px;
			}
			
			div:nth-of-type(1) {
				border-left: 10px solid red;
			}
			
			div:nth-of-type(2) {
				border-left: 10px solid red;
				border-top: 10px solid red;
			}
			
			div:nth-of-type(3) {
				border-left: 10px solid red;
				border-top: 10px solid red;
				border-right: 10px solid red;
			}
			
			div:nth-of-type(4) {
				border: none;
				border-left: 10px solid red;
			}
			
			div:nth-of-type(5) {
				border-left: 10px solid red;
				border-radius: 100% 0 0 0;
			}
			div:nth-of-type(6) {
				border-left: 10px solid red;
				border-radius: 100% 100% 100% 0;
			}
			div:nth-of-type(7) {
				border-left: 10px solid red;
				border-radius: 100% 0 100% 0;
			}
			div:nth-of-type(8) {
				border-left: 10px solid red;
				border-radius: 0 100% 100% 0;
			}
		</style>

	<body>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</body>
//@老姚:简单的如下:展开代码
<style>
div{
	width:100px;
	height:100px;
	float:left;
	border:10px solid transparent;
	border-radius:50%;
}
div:nth-of-type(1){
	border-left:10px solid red;
}
div:nth-of-type(2){
	border-left:10px solid red;
	border-top:10px solid red;
}
div:nth-of-type(3){
	border-left:10px solid red;
	border-top:10px solid red;
	border-right:10px solid red;
}
div:nth-of-type(4){
	border:none;
	border-left:10px solid red;
}
div:nth-of-type(5){
	border-left:10px solid red;
	border-radius: 100% 0 0 0;
}
</style>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
//@老姚:此文带给我的思考是如何画出各种圆弧。原来border-radius就可以!
举报 支持 (0) 回复 (1)
97646476
976464762016-08-16 14:17:106F
展开代码
<style>
div{
	width:100px;
	height:100px;
	float:left;
	border:10px solid transparent;
	border-radius:50%;
	border-left:10px solid red;
}
</style>
<div></div>
举报 支持 (0) 回复 (0)
fuier
fuier2016-08-15 15:52:365F
border-radius:50%和border-radius:100%没啥区别呢 //@老姚:简单的如下:展开代码
<style>
div{
	width:100px;
	height:100px;
	float:left;
	border:10px solid transparent;
	border-radius:50%;
}
div:nth-of-type(1){
	border-left:10px solid red;
}
div:nth-of-type(2){
	border-left:10px solid red;
	border-top:10px solid red;
}
div:nth-of-type(3){
	border-left:10px solid red;
	border-top:10px solid red;
	border-right:10px solid red;
}
div:nth-of-type(4){
	border:none;
	border-left:10px solid red;
}
div:nth-of-type(5){
	border-left:10px solid red;
	border-radius: 100% 0 0 0;
}
</style>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
//@老姚:此文带给我的思考是如何画出各种圆弧。原来border-radius就可以!
举报 支持 (0) 回复 (0)
ccg
ccg2016-08-14 11:09:164F
懒得写了 //@qq98188759qq:没写兼容
举报 支持 (0) 回复 (0)
qq98188759qq
qq98188759qq2016-08-14 09:11:043F
没写兼容
举报 支持 (0) 回复 (1)
老姚
老姚2016-08-13 14:05:492F
简单的如下:展开代码
<style>
div{
	width:100px;
	height:100px;
	float:left;
	border:10px solid transparent;
	border-radius:50%;
}
div:nth-of-type(1){
	border-left:10px solid red;
}
div:nth-of-type(2){
	border-left:10px solid red;
	border-top:10px solid red;
}
div:nth-of-type(3){
	border-left:10px solid red;
	border-top:10px solid red;
	border-right:10px solid red;
}
div:nth-of-type(4){
	border:none;
	border-left:10px solid red;
}
div:nth-of-type(5){
	border-left:10px solid red;
	border-radius: 100% 0 0 0;
}
</style>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
//@老姚:此文带给我的思考是如何画出各种圆弧。原来border-radius就可以!
举报 支持 (1) 回复 (2)
老姚
老姚2016-08-13 13:52:301F
此文带给我的思考是如何画出各种圆弧。原来border-radius就可以!
举报 支持 (0) 回复 (1)
ccg ccg 作者

作者最新