今天在CodePen上看见一个用纯css写出来的动画，所以就自己敲了一下 源代码链接
下面是效果图
下面是源代码
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
/* border: black 10px solid; */
}
html {
background-color: #09f;
height: 100vh;
}
.wrapper {
border-bottom: solid 2px rgb(255, 255, 255);
height: 40vmin;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
position: fixed;
width: 120vmin;
/* border: black 1px solid; */
}
.wrapper .rainbow {
animation: spin 4s ease-in-out infinite;
height: 80vmin;
margin: 0 auto;
position: relative;
width: 80vmin;
/* border: rgb(230, 26, 26) 1px solid; } */
}
.wrapper .rainbow::after {
animation: fadeInOut 4s ease-in-out infinite;
/* 和内容一起转，遮盖住彩虹 */
background-color: #09f;
bottom: 40vmin;
color: #fff;
content: "Stay Home Stye Safe";
font-family: sans-serif;
font-size: 8vmin;
left: 0;
padding: 8vmin 11.4285714286vmin;
position: absolute;
right: 0;
text-align: center;
text-transform: uppercase;
top: 0;
/* margin: 50px; */
/* border: rgb(230, 26, 26) 1px solid; */
}
.wrapper .rainbow .arc {
border: solid 3.2vmin;
border-radius: 50%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
}
/* .arc.red这两个选择器之间没有空格，得写在一起 */
.wrapper .rainbow .arc.red {
border-color: red;
}
.wrapper .rainbow .arc.orange {
border-color: orange;
margin: 3.2vmin;
}
.wrapper .rainbow .arc.yellow {
border-color: yellow;
margin: 6.4vmin;
}
.wrapper .rainbow .arc.green {
border-color: yellowgreen;
margin: 9.6vmin;
}
.wrapper .rainbow .arc.blue {
border-color: skyblue;
margin: 12.8vmin;
}
.wrapper .rainbow .arc.violet {
border-color: violet;
margin: 16vmin;
}
.wrapper .rainbow .arc.purple {
border-color: mediumpurple;
margin: 19.2vmin;
}
@keyframes spin {
0% {
transform: rotate(0);
}
50%,
100% {
transform: rotate(360deg);
}
}
@keyframes fadeInOut {
0%,
50%,
100% {
color: #09f;
}
/* 60%{color: rgb(226, 156, 27);} */
70%,
80% {
color: #fff;
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="rainbow">
<div class="arc red"></div>
<div class="arc orange"></div>
<div class="arc yellow"></div>
<div class="arc green"></div>
<div class="arc blue"></div>
<div class="arc violet"></div>
<div class="arc purple"></div>
</div>
</div>
</body>
学到的知识点
- 这段代码表示居中
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-
vmin
说明：
相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin
示例代码：h1 {
font-size: 8vm;
font-size: 8vmin;
}
如果视口的宽度是300mm，高度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100，因为高度比宽度要小，所以计算的时候相对于高度。 -
vh
说明：
相对于视口的高度。视口被均分为100单位的vh
示例代码：h1 {
font-size: 8vh;
}
如果视口的高度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100