• css实现炫酷的圆环相交转动动画

    1.实现效果

    在这里插入图片描述

    2.实现原理

    CSS perspective 属性：属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
    perspective 属性只影响 3D 转换元素。（请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。）

    perspective: number（元素距离视图的距离，以像素计。）|none（默认值。与 0 相同。不设置透视。）

    • 1

    transform-style:让转换的子元素保留3D转换。指定嵌套元素是怎样在三维空间中呈现，使用此属性必须先使用 transform 属性.。

    transform-style: flat（表示所有子元素在2D平面呈现）|preserve-3d（表示所有子元素在3D空间中呈现）;

    • 1

    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;//

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    animation-delay：定义动画何时开始。
    允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。

    animation-delay: -2s /* W3C 和 Opera */
-moz-animation-delay: -2s /* Firefox */
-webkit-animation-delay: -2s /* Safari 和 Chrome */

    • 1
    • 2
    • 3

    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);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    <div class="loading">
	<div class="line"></div>
	<div class="line"></div>
	<div class="line"></div>
</div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 为每个圆弧设置transform进行一定角度的旋转
    • 圆弧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)
	}
}



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 圆弧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)
	}
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 圆弧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)
	}
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    3.2图例demo2

    • 画出两个半圆弧（border-bottom+border-top）

    在这里插入图片描述

    <div class="loading loading2">
	<div class="line2"></div>
	<div class="line2"></div>
</div>

    • 1
    • 2
    • 3
    • 4
    .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);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 为每个圆弧设置transform进行一定角度的旋转
    • 圆弧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)
	}
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 圆弧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)
	}
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170

    5.更多css相关，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！

  • 相关阅读:
    sqlserver 事务
    练习26-34：日期函数，ifnull函数
    （185）Verilog HDL：设计一个移位功能Lfsr5
    GPT-4o：引领人工智能新时代的强大引擎
    木聚糖-聚乙二醇-透明质酸,Hyaluronicacid-PEG-Xylan,透明质酸-PEG-木聚糖
    总结表的设计
    用编译配置与环境变量实现开发时切换配置文件
    PostgreSQL教程（三十四）：服务器管理（十六）之逻辑复制
    5-VMware Horizon 2203 虚拟桌面-Connect注册服务器（五）
    json----fastjson的使用，jackson的使用
  • 原文地址：https://blog.csdn.net/qq_48085286/article/details/126494230