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);
}
- 为每个圆弧设置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)
文章图片
.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.完整代码
- 锐客网 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)
}
}