新增第233个小实例：环形文字加载动画
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
parent
da62c0bdca
commit
56d80cb355
|
|
@ -240,6 +240,7 @@
|
|||
230. HTML5+CSS3+JS小实例：原生JS实现全屏滚动
|
||||
231. HTML5+CSS3小实例：文字边框视觉错位
|
||||
232. HTML5+CSS3小实例：旋转中的视差效果
|
||||
233. HTML5+CSS3小实例：环形文字加载动画
|
||||
|
||||
#### 赞赏作者
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,172 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body{
|
||||
height: 100vh;
|
||||
background-color: #000;
|
||||
color: aqua;
|
||||
font-size: 28px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.loader{
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
/* 弹性布局 居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* 垂直排列 */
|
||||
flex-direction: column;
|
||||
/* 绑定动画：动画名 时长 线性 无限播放 */
|
||||
animation: tiltSpin 8s linear infinite;
|
||||
}
|
||||
.loader,.loader-ring{
|
||||
/* 开启3D */
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.loader-ring{
|
||||
font-size: 56px;
|
||||
position: relative;
|
||||
width: 42px;
|
||||
height: 84px;
|
||||
/* 绑定动画 */
|
||||
animation: spin 4s linear infinite;
|
||||
}
|
||||
/* 第二个环 */
|
||||
.loader-ring:nth-child(2){
|
||||
/* 反向动画 */
|
||||
animation-direction: reverse;
|
||||
}
|
||||
.loader-sector{
|
||||
font-weight: 600;
|
||||
/* 转大写 */
|
||||
text-transform: uppercase;
|
||||
/* 绝对定位 */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
transform: translateZ(200px);
|
||||
}
|
||||
.loader-sector,.loader-sector:empty::before{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* 画线段 */
|
||||
.loader-sector:empty::before{
|
||||
content: '';
|
||||
background: linear-gradient(transparent 45%,currentColor 45% 50%,transparent 55%);
|
||||
}
|
||||
/* 分别为每个div设置旋转角度和Z轴偏移量 */
|
||||
.loader-sector:nth-child(2){
|
||||
transform: rotateY(12deg) translateZ(200px);
|
||||
}
|
||||
.loader-sector:nth-child(3){
|
||||
transform: rotateY(24deg) translateZ(200px);
|
||||
}
|
||||
.loader-sector:nth-child(4){
|
||||
transform: rotateY(36deg) translateZ(200px);
|
||||
}
|
||||
.loader-sector:nth-child(5){
|
||||
transform: rotateY(48deg) translateZ(200px);
|
||||
}
|
||||
.loader-sector:nth-child(6){
|
||||
transform: rotateY(60deg) translateZ(200px);
|
||||
}
|
||||
.loader-sector:nth-child(7){
|
||||
transform: rotateY(72deg) translateZ(200px);
|
||||
}
|
||||
.loader-sector:nth-child(8){
|
||||
transform: rotateY(84deg) translateZ(200px);
|
||||
}
|
||||
.loader-sector:nth-child(9){
|
||||
transform: rotateY(96deg) translateZ(200px);
|
||||
}
|
||||
.loader-sector:nth-child(10){
|
||||
transform: rotateY(108deg) translateZ(200px);
|
||||
}
|
||||
.loader-sector:nth-child(11){
|
||||
transform: rotateY(120deg) translateZ(200px);
|
||||
}
|
||||
.loader-sector:nth-child(12){
|
||||
transform: rotateY(132deg) translateZ(200px);
|
||||
}
|
||||
.loader-sector:nth-child(13){
|
||||
transform: rotateY(144deg) translateZ(200px);
|
||||
}
|
||||
.loader-sector:nth-child(14){
|
||||
transform: rotateY(156deg) translateZ(200px);
|
||||
}
|
||||
.loader-sector:nth-child(15){
|
||||
transform: rotateY(168deg) translateZ(200px);
|
||||
}
|
||||
.loader-sector:nth-child(16){
|
||||
transform: rotateY(180deg) translateZ(200px);
|
||||
}
|
||||
.loader-sector:nth-child(17){
|
||||
transform: rotateY(192deg) translateZ(200px);
|
||||
}
|
||||
.loader-sector:nth-child(18){
|
||||
transform: rotateY(204deg) translateZ(200px);
|
||||
}
|
||||
.loader-sector:nth-child(19){
|
||||
transform: rotateY(216deg) translateZ(200px);
|
||||
}
|
||||
.loader-sector:nth-child(20){
|
||||
transform: rotateY(228deg) translateZ(200px);
|
||||
}
|
||||
.loader-sector:nth-child(21){
|
||||
transform: rotateY(240deg) translateZ(200px);
|
||||
}
|
||||
.loader-sector:nth-child(22){
|
||||
transform: rotateY(252deg) translateZ(200px);
|
||||
}
|
||||
.loader-sector:nth-child(23){
|
||||
transform: rotateY(264deg) translateZ(200px);
|
||||
}
|
||||
.loader-sector:nth-child(24){
|
||||
transform: rotateY(276deg) translateZ(200px);
|
||||
}
|
||||
.loader-sector:nth-child(25){
|
||||
transform: rotateY(288deg) translateZ(200px);
|
||||
}
|
||||
.loader-sector:nth-child(26){
|
||||
transform: rotateY(300deg) translateZ(200px);
|
||||
}
|
||||
.loader-sector:nth-child(27){
|
||||
transform: rotateY(312deg) translateZ(200px);
|
||||
}
|
||||
.loader-sector:nth-child(28){
|
||||
transform: rotateY(324deg) translateZ(200px);
|
||||
}
|
||||
.loader-sector:nth-child(29){
|
||||
transform: rotateY(336deg) translateZ(200px);
|
||||
}
|
||||
.loader-sector:nth-child(30){
|
||||
transform: rotateY(348deg) translateZ(200px);
|
||||
}
|
||||
|
||||
/* 定义动画 */
|
||||
/* 倾斜旋转动画 */
|
||||
@keyframes tiltSpin {
|
||||
from{
|
||||
transform: rotateY(0) rotateX(30deg);
|
||||
}
|
||||
to{
|
||||
transform: rotateY(1turn) rotateX(30deg);
|
||||
}
|
||||
}
|
||||
/* 旋转动画 */
|
||||
@keyframes spin {
|
||||
from{
|
||||
transform: rotateY(0);
|
||||
}
|
||||
to{
|
||||
transform: rotateY(1turn);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>环形文字加载动画</title>
|
||||
<link rel="stylesheet" href="233.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="loader">
|
||||
<div class="loader-ring">
|
||||
<div class="loader-sector">l</div>
|
||||
<div class="loader-sector">o</div>
|
||||
<div class="loader-sector">a</div>
|
||||
<div class="loader-sector">d</div>
|
||||
<div class="loader-sector">i</div>
|
||||
<div class="loader-sector">n</div>
|
||||
<div class="loader-sector">g</div>
|
||||
<div class="loader-sector">.</div>
|
||||
<div class="loader-sector">.</div>
|
||||
<div class="loader-sector">.</div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
</div>
|
||||
<div class="loader-ring">
|
||||
<div class="loader-sector">l</div>
|
||||
<div class="loader-sector">o</div>
|
||||
<div class="loader-sector">a</div>
|
||||
<div class="loader-sector">d</div>
|
||||
<div class="loader-sector">i</div>
|
||||
<div class="loader-sector">n</div>
|
||||
<div class="loader-sector">g</div>
|
||||
<div class="loader-sector">.</div>
|
||||
<div class="loader-sector">.</div>
|
||||
<div class="loader-sector">.</div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
<div class="loader-sector"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue