2018年3月6日
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹性果冻动画</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
display: flex;
font-size: 2rem;
overflow: hidden;
}
.box {
position: absolute;
width: 100vw;
height: 100vh;
background-color: #fff;
filter: blur(4vmin) contrast(100);
}
.main,
.secondary {
position: absolute;
top: 50%;
left: 50%;
background-color: #000;
}
.main {
width: 30vmin;
height: 30vmin;
margin: -15vmin;
border-radius: 50%;
}
.secondary {
width: 15vmin;
height: 15vmin;
margin: -7.5vmin;
background-color: #000;
border-radius: 50%;
animation: move 1.5s infinite alternate cubic-bezier(0.18, 0, 0.26, 1);
}
.secondary:nth-child(1) {
--degree: 0deg;
animation-delay: 0s;
background-color: red;
}
.secondary:nth-child(2) {
--degree: 45deg;
animation-delay: -0.375s;
background-color: #ffbf00;
}
.secondary:nth-child(3) {
--degree: 90deg;
animation-delay: -0.75s;
background-color: #80ff00;
}
.secondary:nth-child(4) {
--degree: 135deg;
animation-delay: -1.125s;
background-color: #00ff40;
}
.secondary:nth-child(5) {
--degree: 180deg;
animation-delay: -1.5s;
background-color: cyan;
}
.secondary:nth-child(6) {
--degree: 225deg;
animation-delay: -1.875s;
background-color: #0040ff;
}
.secondary:nth-child(7) {
--degree: 270deg;
animation-delay: -2.25s;
background-color: #8000ff;
}
.secondary:nth-child(8) {
--degree: 315deg;
animation-delay: -2.625s;
background-color: #ff00bf;
}
.secondary:nth-child(9) {
--degree: 360deg;
animation-delay: -3s;
background-color: red;
}
@keyframes move {
0% {
transform: rotate(var(--degree)) translateY(0);
}
70%,
100% {
transform: rotate(var(--degree)) translateY(-30vmin);
}
}
</style>
</head>
<body>
<div class="box">
<div class="main"></div>
<div class="secondary"></div>
<div class="secondary"></div>
<div class="secondary"></div>
<div class="secondary"></div>
<div class="secondary"></div>
<div class="secondary"></div>
<div class="secondary"></div>
<div class="secondary"></div>
</div>
</body>
</html>
