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

查看：125 发布时间：2016/5/15 21:21:48 html css animation

本文介绍了采用纯CSS HTML5自定义加载图标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是我想创造：

图片包含外圆一个外循环和一个内三角形，负载效应应该是逆时针和内部三角形应顺时针。

我已经创建使用这种外圆：

 .loader {\r
位置：相对;\r
边境顶：1.1em固体RGBA（255，255，255，0.2）;\r
边框右：1.1em固体RGBA（255，255，255，0.2）;\r
下边框：1.1em固体RGBA（255，255，255，0.2）;\r
左边框：1.1em固体#FFFFFF;变换：translateZ（0）;\r
动画：load8 1.1s无限线性的;\r
}\r
\r
.loader，.loader：{后\r
边界半径：50％;\r
宽度：10em;\r
高度：10em;\r
}\r
\r
@keyframes load8 {\r
0％{\r
变换：旋转（0deg）;\r
}\r
\r
100％{\r
变换：旋转（360deg）;\r
}\r
}

＆LT; DIV CLASS =装载机＆GT;＆LT; / DIV＆GT;

解决方案

这已经不再是一个社区的wiki职位。圆上的点之间的距离是由他们的立场做出，而在'玩'的象征，它是由动画迟延（之前它开始）。

的 codePEN DEMO

 {体\r
  背景色：天蓝色;\r
  溢出：隐藏;\r
}\r
\r
＃容器 {\r
  宽度：200像素;\r
  高度：200像素;\r
  边界半径：50％;\r
  边框：0像素固体RGBA（0，0，0，0.1）;\r
  位置：相对;\r
  的box-shadow：0像素0像素0像素10px的RGBA（255，255，255，0.05）插图;\r
}\r
\r
#innercontainer {\r
  位置：相对;\r
  宽度：200像素;\r
  高度：200像素;\r
  保证金：0汽车;\r
  动画名称：例如，\r
  动画持续时间：1.5秒;\r
  动画迭代计数：无限;\r
  动画定时功能：线性的;\r
}\r
\r
#container的.a2 {\r
  宽度：20像素;\r
  高度：20像素;\r
  顶部：50％;\r
  左：50％;\r
  背景：白色;\r
  边界半径：10px的;\r
  位置：绝对的;\r
  保证金：-10px;\r
}\r
\r
#container的.a1 {\r
  位置：绝对的;\r
  顶部：30PX;\r
  左：30像素;\r
  动画名称：example2a;\r
  动画持续时间：1.5秒;\r
  动画迭代计数：无限;\r
  动画定时功能：线性的;\r
  背景：白色;\r
  宽度：20像素;\r
  高度：20像素;\r
  边界半径：10px的;\r
}\r
\r
#container的.A {\r
  不透明度：1;\r
  -webkit-动画延迟：0; / *浏览器，Safari浏览器，歌剧* /\r
  动画延迟：0;\r
}\r
\r
#container的.B {\r
  不透明度：0.9;\r
  -webkit-动画延迟：0.1秒; / *浏览器，Safari浏览器，歌剧* /\r
  动画延迟：0.08s;\r
}\r
\r
#container的.C {\r
  不透明度：0.8;\r
  -webkit-动画延迟：0.2秒; / *浏览器，Safari浏览器，歌剧* /\r
  动画延迟：0.17s;\r
}\r
\r
#container的.D {\r
  不透明度：0.7;\r
  -webkit-动画延迟：0.3秒; / *浏览器，Safari浏览器，歌剧* /\r
  动画延迟：0.27s;\r
}\r
\r
#container的.ab {\r
  不透明度：0.6;\r
  -webkit-动画延迟：0; / *浏览器，Safari浏览器，歌剧* /\r
  动画延迟：0.38s;\r
}\r
\r
#container的的.bb {\r
  不透明度：0.5;\r
  -webkit-动画延迟：0.1秒; / *浏览器，Safari浏览器，歌剧* /\r
  动画延迟：0.50s;\r
}\r
\r
#container的.CB {\r
  不透明度：0.4;\r
  -webkit-动画延迟：0.2秒; / *浏览器，Safari浏览器，歌剧* /\r
  动画延迟：0.63s;\r
}\r
\r
#container的.db的{\r
  不透明度：0.3;\r
  -webkit-动画延迟：0.3秒; / *浏览器，Safari浏览器，歌剧* /\r
  动画延迟：0.77s;\r
}\r
\r
#container的.AC {\r
  不透明度：0.2;\r
  -webkit-动画延迟：0.2秒; / *浏览器，Safari浏览器，歌剧* /\r
  动画延迟：0.92s;\r
}\r
\r
#container的.BC {\r
  不透明度：0.1;\r
  -webkit-动画延迟：0.3秒; / *浏览器，Safari浏览器，歌剧* /\r
  动画延迟：1.08s;\r
}\r
\r
#play {\r
  位置：绝对的;\r
  宽度：0;\r
  高度：0;\r
  边境顶：50px的透明固体;\r
  边框底部：50px的透明固体;\r
  左边框：115px白色固体;\r
  边框右：50px的透明固体;\r
  不透明度：0.2;\r
  左：48像素;\r
  顶部：50像素;\r
}\r
\r
{.W\r
  变换：旋转（270deg）\r
  翻译（100像素），旋转（-270deg）;\r
  不透明度：1;\r
}\r
\r
。X {\r
  变换：旋转（280deg）\r
  翻译（100像素），旋转（-280deg）;\r
  不透明度：0.9;\r
}\r
\r
.Y {\r
  变换：旋转（291deg）\r
  翻译（100像素），旋转（-291deg）;\r
  不透明度：0.8;\r
}\r
\r
.Z {\r
  变换：旋转（303deg）\r
  翻译（100像素），旋转（-303deg）;\r
  不透明度：0.7;\r
}\r
\r
.wb {\r
  变换：旋转（316deg）\r
  翻译（100像素），旋转（-316deg）;\r
  不透明度：0.6;\r
}\r
\r
.xb {\r
  变换：旋转（330deg）\r
  翻译（100像素），旋转（-330deg）;\r
  不透明度：0.5;\r
}\r
\r
.yb {\r
  变换：旋转（346deg）\r
  翻译（100像素），旋转（-346deg）;\r
  不透明度：0.4;\r
}\r
\r
.zb {\r
  变换：旋转（363deg）\r
  翻译（100px的）旋转（-363deg）;\r
  不透明度：0.3;\r
}\r
\r
。厕所 {\r
  变换：旋转（381deg）\r
  翻译（100像素），旋转（-381deg）;\r
  不透明度：0.2;\r
}\r
\r
.xc {\r
  变换：旋转（400deg）\r
  翻译（100像素），旋转（-400deg）;\r
  不透明度：0.1;\r
}\r
\r
例如@keyframes {\r
  100％{\r
    -ms变换：旋转（-360deg）; / * IE 9 * /\r
    -webkit-变换：旋转（-360deg）; / * Safari浏览器* /\r
    变换：旋转（-360deg）;\r
  }\r
}\r
\r
@keyframes example2a {\r
\r
  33.3％{\r
  顶部：计算（50％ -  10px的）;\r
  左：计算（100％ -  25像素）;\r
  }\r
  \r
  \r
  66.6％{\r
  顶部：计算（100％ -  50像素）;\r
  左：30像素;\r
  }\r
  \r
  \r
  100％{\r
  顶部：30PX;\r
  左：30像素;\r
  }\r
}

＆LT; DIV ID =容器＆GT;\r
＆LT; DIV CLASS =A1一个＆GT;＆LT; / DIV＆GT;＆LT; DIV CLASS =A1 B＆GT;＆LT; / DIV＆GT;\r
＆LT; DIV CLASS =A1 C＆GT;＆LT; / DIV＆GT;＆LT; DIV CLASS =A1 D＆GT;＆LT; / DIV＆GT;\r
＆LT; DIV CLASS =A1 AB＆GT;＆LT; / DIV＆GT;＆LT; DIV CLASS =A1 BB＆GT;＆LT; / DIV＆GT;\r
＆LT; DIV CLASS =A1 CB＆GT;＆LT; / DIV＆GT;＆LT; DIV CLASS =A1 DB＆GT;＆LT; / DIV＆GT;\r
＆LT; DIV CLASS =A1交流＆GT;＆LT; / DIV＆GT;＆LT; DIV CLASS =A1 BC＆GT;＆LT; / DIV＆GT;\r
＆LT; DIV ID =播放与GT;＆LT; / DIV＆GT;\r
＆LT; DIV ID = innercontainer＆GT;\r
＆LT; DIV CLASS =A2 W＆GT;＆LT; / DIV＆GT;＆LT; DIV CLASS =A2-X＆GT;＆LT; / DIV＆GT;\r
＆LT; DIV CLASS =A2 Y＆GT;＆LT; / DIV＆GT;＆LT; DIV CLASS =A2 Z＆GT;＆LT; / DIV＆GT;\r
＆LT; DIV CLASS =A2 WB＆GT;＆LT; / DIV＆GT;＆LT; DIV CLASS =A2 XB＆GT;＆LT; / DIV＆GT;\r
＆LT; DIV CLASS =A2 YB＆GT;＆LT; / DIV＆GT;＆LT; DIV CLASS =A2 ZB＆GT;＆LT; / DIV＆GT;\r
＆LT; DIV CLASS =A2 WC＆GT;＆LT; / DIV＆GT;＆LT; DIV CLASS =A2 XC＆GT;＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

This is I want to create:

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.

I have created outer circle using this:

.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>

解决方案

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屋！

查看全文

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

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

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

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭