1.实现成果
2.实现原理
CSS perspective 属性：属性定义 3D 元素距视图的间隔，以像素计。该属性容许您扭转 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会取得透视成果，而不是元素自身。
perspective 属性只影响 3D 转换元素。（请与 perspective-origin 属性一起应用该属性，这样您就可能扭转 3D 元素的底部地位。）
perspective: number（元素间隔视图的间隔，以像素计。）|none（默认值。与 0 雷同。不设置透视。）transform-style:让转换的子元素保留3D转换。指定嵌套元素是怎么在三维空间中出现，应用此属性必须先应用 transform 属性.。
transform-style: flat（示意所有子元素在2D立体出现）|preserve-3d（示意所有子元素在3D空间中出现）;pointer-events ：设置元素是否对鼠标事件做出反馈。
pointer-events: auto|none;/* 属性值 */pointer-events: auto;//默认值，设置该属性链接能够失常点击拜访pointer-events: none;//元素不能对鼠标事件做出反馈pointer-events: visiblePainted; /* 只实用于 SVG */pointer-events: visibleFill; /* 只实用于 SVG */pointer-events: visibleStroke; /* 只实用于 SVG */pointer-events: visible; /* 只实用于 SVG */pointer-events: painted; /* 只实用于 SVG */pointer-events: fill; /* 只实用于 SVG */pointer-events: stroke; /* 只实用于 SVG */pointer-events: all; /* 只实用于 SVG *//* 全局值 */pointer-events: inherit;//从父元素继承该属性pointer-events: initial;//initial 关键字用于设置 CSS 属性为它的默认值pointer-events: unset;//animation-delay：定义动画何时开始。
容许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。
animation-delay: -2s /* W3C 和 Opera */-moz-animation-delay: -2s /* Firefox */-webkit-animation-delay: -2s /* Safari 和 Chrome */3.实现步骤
3.1图例demo1
- 画出三个半圆弧（只设置border-bottom）
.loading { position: relative; width: 8rem; height: 8rem; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 40rem; perspective: 40rem; pointer-events: none; margin-bottom: 40px;}.loading .line { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; border-bottom: 0.15rem solid var(--color);}<div class="loading"> <div class="line"></div> <div class="line"></div> <div class="line"></div></div>- 为每个圆弧设置transform进行肯定角度的旋转
- [x] 圆弧1：
.loading .line:first-child { -webkit-animation: rotate1 1.15s linear infinite; animation: rotate1 1.15s linear infinite;}.loading .line:first-child { -webkit-animation-delay: -.8s; animation-delay: -.8s;}@keyframes rotate1 { 0% { -webkit-transform: rotateX(35deg) rotateY(-45deg) rotate(0); transform: rotateX(35deg) rotateY(-45deg) rotate(0) } to { -webkit-transform: rotateX(35deg) rotateY(-45deg) rotate(1turn); transform: rotateX(35deg) rotateY(-45deg) rotate(1turn) }}- [x] 圆弧2：
.loading .line:nth-child(2) { -webkit-animation: rotate2 1.15s linear infinite; animation: rotate2 1.15s linear infinite}.loading .line:nth-child(2) { -webkit-animation-delay: -.4s; animation-delay: -.4s}@keyframes rotate2 { 0% { -webkit-transform: rotateX(50deg) rotateY(10deg) rotate(0); transform: rotateX(50deg) rotateY(10deg) rotate(0) } to { -webkit-transform: rotateX(50deg) rotateY(10deg) rotate(1turn); transform: rotateX(50deg) rotateY(10deg) rotate(1turn) }}- [x] 圆弧3：
.loading .line:nth-child(3) { -webkit-animation: rotate3 1.15s linear infinite; animation: rotate3 1.15s linear infinite}.loading .line:nth-child(3) { -webkit-animation-delay: 0s; animation-delay: 0s}@-webkit-keyframes rotate3 { 0% { -webkit-transform: rotateX(35deg) rotateY(55deg) rotate(0); transform: rotateX(35deg) rotateY(55deg) rotate(0) } to { -webkit-transform: rotateX(35deg) rotateY(55deg) rotate(1turn); transform: rotateX(35deg) rotateY(55deg) rotate(1turn) }}3.2图例demo2
- 画出两个半圆弧（border-bottom+border-top）
<div class="loading loading2"> <div class="line2"></div> <div class="line2"></div></div>.loading2 .line2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; border-bottom: 0.1rem solid var(--color); border-top: 0.1rem solid var(--color);}为每个圆弧设置transform进行肯定角度的旋转
- [x] 圆弧1：
.loading2 .line2:nth-child(2) { -webkit-animation: rotate5 1.15s linear infinite; animation: rotate5 1.15s linear infinite}@keyframes rotate4 { 0% { -webkit-transform: rotateX(55deg) rotateY(-30deg) rotate(0); transform: rotateX(55deg) rotateY(-30deg) rotate(0) } to { -webkit-transform: rotateX(55deg) rotateY(-30deg) rotate(1turn); transform: rotateX(55deg) rotateY(-30deg) rotate(1turn) }}- [x] 圆弧2:
.loading2 .line2:nth-child(2) { -webkit-animation: rotate5 1.15s linear infinite; animation: rotate5 1.15s linear infinite}@keyframes rotate5 { 0% { -webkit-transform: rotateX(55deg) rotateY(30deg) rotate(0); transform: rotateX(55deg) rotateY(30deg) rotate(0) } to { -webkit-transform: rotateX(55deg) rotateY(30deg) rotate(1turn); transform: rotateX(55deg) rotateY(30deg) rotate(1turn) }}4.残缺代码
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <link rel="stylesheet" type="text/css" href="../common.css" /> <style type="text/css"> body { background: #222; overflow: hidden; } :root { --color: rgba(255, 165, 0, 1); } .loading { position: relative; width: 8rem; height: 8rem; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 40rem; perspective: 40rem; pointer-events: none; margin-bottom: 40px; } .loading .line { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; border-bottom: 0.15rem solid var(--color); } .loading .line:first-child { -webkit-animation: rotate1 1.15s linear infinite; animation: rotate1 1.15s linear infinite; } .loading .line:nth-child(2) { -webkit-animation: rotate2 1.15s linear infinite; animation: rotate2 1.15s linear infinite } .loading .line:nth-child(3) { -webkit-animation: rotate3 1.15s linear infinite; animation: rotate3 1.15s linear infinite } .loading .line:first-child { -webkit-animation-delay: -.8s; animation-delay: -.8s; } .loading .line:nth-child(2) { -webkit-animation-delay: -.4s; animation-delay: -.4s } .loading .line:nth-child(3) { -webkit-animation-delay: 0s; animation-delay: 0s } @keyframes rotate1 { 0% { -webkit-transform: rotateX(35deg) rotateY(-45deg) rotate(0); transform: rotateX(35deg) rotateY(-45deg) rotate(0) } to { -webkit-transform: rotateX(35deg) rotateY(-45deg) rotate(1turn); transform: rotateX(35deg) rotateY(-45deg) rotate(1turn) } } @keyframes rotate2 { 0% { -webkit-transform: rotateX(50deg) rotateY(10deg) rotate(0); transform: rotateX(50deg) rotateY(10deg) rotate(0) } to { -webkit-transform: rotateX(50deg) rotateY(10deg) rotate(1turn); transform: rotateX(50deg) rotateY(10deg) rotate(1turn) } } @keyframes rotate3 { 0% { -webkit-transform: rotateX(35deg) rotateY(55deg) rotate(0); transform: rotateX(35deg) rotateY(55deg) rotate(0) } to { -webkit-transform: rotateX(35deg) rotateY(55deg) rotate(1turn); transform: rotateX(35deg) rotateY(55deg) rotate(1turn) } } /* 第二个 */ .loading2 .line2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; border-bottom: 0.1rem solid var(--color); border-top: 0.1rem solid var(--color); } .loading2 .line2:first-child { -webkit-animation: rotate4 1.15s linear infinite; animation: rotate4 1.15s linear infinite; } .loading2 .line2:nth-child(2) { -webkit-animation: rotate5 1.15s linear infinite; animation: rotate5 1.15s linear infinite } @keyframes rotate4 { 0% { -webkit-transform: rotateX(55deg) rotateY(-30deg) rotate(0); transform: rotateX(55deg) rotateY(-30deg) rotate(0) } to { -webkit-transform: rotateX(55deg) rotateY(-30deg) rotate(1turn); transform: rotateX(55deg) rotateY(-30deg) rotate(1turn) } } @keyframes rotate5 { 0% { -webkit-transform: rotateX(55deg) rotateY(30deg) rotate(0); transform: rotateX(55deg) rotateY(30deg) rotate(0) } to { -webkit-transform: rotateX(55deg) rotateY(30deg) rotate(1turn); transform: rotateX(55deg) rotateY(30deg) rotate(1turn) } } </style> <body> <section> <div class="loading"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> <div class="loading loading2"> <div class="line2"></div> <div class="line2"></div> </div> </section> </body></html>