使用纯CSS HTML5自定义加载图标 [英] Custom loading icon using pure CSS HTML5

问题描述

这是我要创建：

图片包含一个外圆和一个内三角，外圆上的加载效果应为逆时针，内三角应为顺时针。

The image contains one outer circle and one inner triangle, and loading effect on outer circle should be anticlockwise and on inner triangle should be Clockwise.

我已创建外圆使用此：

.loader { 
	position: relative; 
	border-top: 1.1em solid rgba(255, 255, 255, 0.2); 
	border-right: 1.1em solid rgba(255, 255, 255, 0.2); 
	border-bottom: 1.1em solid rgba(255, 255, 255, 0.2); 
	border-left: 1.1em solid #ffffff; transform: translateZ(0); 
	animation: load8 1.1s infinite linear; 
} 
	
.loader, .loader:after { 
	border-radius: 50%; 
	width: 10em; 
	height: 10em; 
} 

@keyframes load8 { 
	0% { 
		transform: rotate(0deg); 
	} 

	100% { 
		transform: rotate(360deg); 
	} 
} 

<div class="loader"></div> 

推荐答案

更长的社区wiki帖子。圆圈上的点之间的距离由它们的位置决定，而在播放符号中，它是由动画延迟（在它开始之前）产生的。

This is no longer a community wiki post. The distance between the dots on the circle is being made by their position, while in the 'play' symbol, it is being made by the animation delay (before of it starts).

Codepen DEMO

body {
  background-color: skyblue;
  overflow: hidden;
}

#container {
  width: 200px;
  height: 200px;
  border-radius:50%;
  border: 0px solid rgba(0, 0, 0, 0.1);
  position: relative;
  box-shadow:0px 0px 0px 10px rgba(255, 255, 255, 0.05) inset;
}

#innercontainer {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto ;
  animation-name: example;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;  
}

#container .a2 {  
  width:20px;
  height: 20px;
  top: 50%;
  left: 50%;
  background: white;
  border-radius: 10px;
  position: absolute;
  margin: -10px;
}

#container .a1 {
  position: absolute;
  top:30px;
  left:30px;
  animation-name: example2a;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  background: white;
  width: 20px;
  height: 20px;
  border-radius: 10px;
}

#container .a {
  opacity: 1;
  -webkit-animation-delay: 0s; /* Chrome, Safari, Opera */
  animation-delay: 0s;  
}

#container .b {
  opacity: 0.9;
  -webkit-animation-delay: 0.1s; /* Chrome, Safari, Opera */
  animation-delay: 0.08s;  
}

#container .c {
  opacity: 0.8;
  -webkit-animation-delay: 0.2s; /* Chrome, Safari, Opera */
  animation-delay: 0.17s;  
}

#container .d {
  opacity: 0.7;
  -webkit-animation-delay: 0.3s; /* Chrome, Safari, Opera */
  animation-delay: 0.27s;  
}

#container .ab {
  opacity: 0.6;
  -webkit-animation-delay: 0s; /* Chrome, Safari, Opera */
  animation-delay: 0.38s;  
}

#container .bb {
  opacity: 0.5;
  -webkit-animation-delay: 0.1s; /* Chrome, Safari, Opera */
  animation-delay: 0.50s;  
}

#container .cb {
  opacity: 0.4;
  -webkit-animation-delay: 0.2s; /* Chrome, Safari, Opera */
  animation-delay: 0.63s;  
}

#container .db {
  opacity: 0.3;
  -webkit-animation-delay: 0.3s; /* Chrome, Safari, Opera */
  animation-delay: 0.77s;  
}

#container .ac {
  opacity: 0.2;
  -webkit-animation-delay: 0.2s; /* Chrome, Safari, Opera */
  animation-delay: 0.92s;  
}

#container .bc {
  opacity: 0.1;
  -webkit-animation-delay: 0.3s; /* Chrome, Safari, Opera */
  animation-delay: 1.08s;  
}

#play {
  position: absolute;
  width:0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 115px solid white;
  border-right: 50px solid transparent;
  opacity: 0.2;
  left: 48px;
  top: 50px;
}

.w {
  transform: rotate(270deg)
  translate(100px) rotate(-270deg);
  opacity: 1;
}

.x {
  transform: rotate(280deg)
  translate(100px) rotate(-280deg);
  opacity: 0.9;
}

.y {
  transform: rotate(291deg)
  translate(100px) rotate(-291deg);
  opacity: 0.8;
}

.z {
  transform: rotate(303deg)
  translate(100px) rotate(-303deg);
  opacity: 0.7;
}

.wb {
  transform: rotate(316deg)
  translate(100px) rotate(-316deg);
  opacity: 0.6;
}

.xb {
  transform: rotate(330deg)
  translate(100px) rotate(-330deg);
  opacity: 0.5;
}

.yb {
  transform: rotate(346deg)
  translate(100px) rotate(-346deg);
  opacity: 0.4;
}

.zb {
  transform: rotate(363deg)
  translate(100px) rotate(-363deg);
  opacity: 0.3;
}

.wc {
  transform: rotate(381deg)
  translate(100px) rotate(-381deg);
  opacity: 0.2;
}

.xc {
  transform: rotate(400deg)
  translate(100px) rotate(-400deg);
  opacity: 0.1;
}

@keyframes example {
  100% {
    -ms-transform: rotate(-360deg); /* IE 9 */
    -webkit-transform: rotate(-360deg); /* Safari */
    transform: rotate(-360deg);
  }
}

@keyframes example2a {

  33.3% {
  top:calc( 50% - 10px);
  left:calc(100% - 25px);
  }
  
  
  66.6% {
  top:calc( 100% - 50px);
  left: 30px;
  }  
  
  
  100% {
  top:30px;
  left:30px;
  }
}

<div id=container>
<div class="a1 a"></div><div class="a1 b"></div>
<div class="a1 c"></div><div class="a1 d"></div>
<div class="a1 ab"></div><div class="a1 bb"></div>
<div class="a1 cb"></div><div class="a1 db"></div>
<div class="a1 ac"></div><div class="a1 bc"></div>
<div id=play></div>
<div id=innercontainer>
<div class="a2 w"></div><div class="a2 x"></div>
<div class="a2 y"></div><div class="a2 z"></div>
<div class="a2 wb"></div><div class="a2 xb"></div>
<div class="a2 yb"></div><div class="a2 zb"></div>
<div class="a2 wc"></div><div class="a2 xc"></div>
</div>
</div>

这篇关于使用纯CSS HTML5自定义加载图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！