共计 6836 个字符,预计需要花费 18 分钟才能阅读完成。
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>
正文完