CSS3动画——飞行的小精灵
CSS3动画——飞行的小精灵
今天的这段代码通过多层结构、渐变色、圆角、多种动画效果以及细节处理，成功地创造了一个充满活力和趣味性的飞行小精灵动画效果。
效果如下：
（视频正在审核）
源代码如下：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>飞行的小精灵title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background-color: rgb(15, 17, 29);
width: 100%;
overflow: hidden;
}
div {
width: 150px;
height: 150px;
}
ul {
display: block;
width: 100%;
height: 100%;
font-size: 0px;
}
/* 最外层容器 */
.container {
translate: 0 50%;
margin: 0 auto;
width: 100%;
height: 300px;
}
.main-container {
position: relative;
width: 100%;
height: 100%;
}
/* 外层紫色盒子 */
.first {
margin: 0 auto;
translate: 0 50%;
/* border: 1px solid #fff; */
box-shadow: 5px 5px 10px 5px rgba(80, 72, 160, 0.9) 30%, rgb(126, 117, 224, 0.5);
}
/* 紫色拖尾 */
.first ul li {
width: 100%;
height: 25%;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
animation: first .7s ease-in-out infinite alternate;
background-image: linear-gradient(to right, rgba(80, 72, 160, 0.9) 30%, rgb(126, 117, 224, 0.5));
mask-image: linear-gradient(to right, rgba(80, 72, 160, 0.9) 70%, transparent);
}
.first ul li:nth-child(1) {
animation-delay: .3s;
}
.first ul li:nth-child(2) {
animation: first 2s 0.4s ease-out infinite alternate;
}
.first ul li:nth-child(3) {
animation: first 1.5s 0.3s ease-out infinite alternate;
}
.first ul li:nth-child(4) {
animation-delay: .5s;
}
@keyframes first {
0% {
width: 60%;
opacity: 1;
}
100% {
width: 140%;
}
}
.first::before {
content: '';
position: absolute;
left: -50%;
width: 50%;
height: 100%;
border-top-left-radius: 75px;
border-bottom-left-radius: 75px;
background-color: rgba(80, 72, 160, 0.9);
box-shadow: -2px 0 5px rgba(80, 72, 160, 0.7);
}
/* 第二层 */
.second {
margin: 0 auto;
translate: 0 -50%;
height: 130px;
}
.second ul li {
height: 25%;
width: 100%;
background-color: rgba(133, 237, 232, 0.6);
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
animation: second .6s ease-out infinite alternate;
mask-image: linear-gradient(to right, #85EDE8 50%, transparent);
}
.second ul li:last-child {
translate: 0 200%;
animation-delay: 0.4s;
}
@keyframes second {
0% {
width: 80%;
}
100% {
width: 130%;
}
}
.second::before {
content: '';
position: absolute;
left: -65px;
width: 50%;
height: 100%;
border-top-left-radius: 75px;
border-bottom-left-radius: 75px;
background: #85EDE8;
box-shadow: -2px 0 5px rgba(133, 237, 232, 0.7);
}
/* 第三层 */
.third {
position: relative;
margin: 0 auto;
translate: 0 -205px;
}
.third ul li {
width: 100%;
height: 10%;
border-top-right-radius: 7.5px;
border-bottom-right-radius: 7.5px;
background-color: rgb(133, 237, 232);
animation: third 1s infinite alternate;
box-shadow: 0 0 5px rgba(133, 237, 232, 0.5);
}
.third .top {
position: absolute;
top: 10px;
left: 0;
}
.third .bottom {
position: absolute;
bottom: 10px;
left: 0;
}
.third ul li:nth-child(1) {
animation-delay: 0.7s;
}
.third ul li:nth-child(2) {
width: 25px;
height: 15px;
border-radius: 50px;
animation: third-1 1.5s ease-out infinite;
}
.third ul li:nth-child(4) {
width: 15px;
border-radius: 50px;
animation: third-1 1.5s ease-out infinite;
}
.third ul li:nth-child(3) {
width: 50px;
border-radius: 50px;
animation: third-2 1s 0.1s ease-out infinite;
}
.third ul li:nth-child(5) {
width: 60px;
border-radius: 70px;
animation: third-2 1s 0.4s ease-out infinite;
}
@keyframes third {
0% {
width: 55%;
}
100% {
width: 85%;
}
}
@keyframes third-1 {
0% {
left: 35px;
}
80% {
cpacity: 0.7;
}
100% {
left: 200px;
opacity: 0;
}
}
@keyframes third-2 {
0% {
left: 35px;
}
80% {
cpacity: 0.7;
}
100% {
left: 200px;
opacity: 0;
}
}
.third::before {
content: '';
position: absolute;
top: 25px;
left: -50px;
width: 70px;
height: 100px;
border-top-left-radius: 65px;
border-bottom-left-radius: 65px;
background-color: #fff;
}
/* 面部的图案,待会儿取消注释*/
.fourth {
position: relative;
width: 100px;
height: 100px;
background-color: transparent;
margin: 0 auto;
/* 因为前面的div盒子撑起来了 */
translate: -25px -330%;
background-color: #fff;
}
.fourth .eyes {
position: absolute;
top: 40px;
left: 0px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #000;
}
.eyes::after {
content: "";
position: absolute;
top: 0;
left: 30px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #000;
}
.checks {
position: absolute;
top: 52px;
left: -10px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgb(133, 237, 232);
}
.checks::after {
content: "";
position: absolute;
top: 0;
left: 50px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgb(133, 237, 232);
}
.smile {
position: absolute;
top: 53px;
left: 8px;
width: 20px;
height: 10px;
border: 3px solid #000;
border-bottom-left-radius: 90px;
border-bottom-right-radius: 90px;
}
/* 嘴型的设置 */
.smile::after {
content: "";
position: absolute;
top: -5px;
left: -5px;
width: 30px;
height: 7px;
background-color: #fff;
}
/* 设置动画条 */
.fourth ul li {
position: absolute;
width: 100%;
height: 15px;
background-color: #fff;
left: 1px;
}
.fourth ul .odd {
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}
.fourth ul .even {
background: radial-gradient(circle at 100% 50%, transparent 15px, #fff 18px);
}
.fourth ul li:nth-child(1) {
top: 0px;
animation: fourth-1 1s ease-in-out infinite alternate;
}
.fourth ul li:nth-child(2) {
top: 12px;
height: 17px;
animation: fourth-2 1s 0.2s ease-in-out infinite alternate;
filter: blur(1px);
}
.fourth ul li:nth-child(3) {
top: 27px;
animation: fourth-3 1s 0.4s ease-in-out infinite alternate;
}
.fourth ul li:nth-child(4) {
top: 41px;
height: 17px;
animation: fourth-4 1s 0.6s ease-in-out infinite alternate;
}
.fourth ul li:nth-child(5) {
bottom: 28px;
animation: fourth-5 1s 0.6s ease-in-out infinite alternate;
}
.fourth ul li:nth-child(6) {
bottom: 14px;
animation: fourth-6 01s 0.6s ease-in-out infinite alternate;
}
.fourth ul li:nth-child(7) {
bottom: 0px;
animation: fourth-7 1s 0.6s ease-in-out infinite alternate;
}
@keyframes fourth-1 {
0% {
width: 120%;
}
100% {
width: 140%;
}
}
@keyframes fourth-2 {
0% {
width: 120%
}
100% {
width: 125%;
}
}
@keyframes fourth-3 {
0% {
width: 130%;
}
100% {
width: 150%;
}
}
@keyframes fourth-4 {
0% {
width: 125%;
}
100% {
width: 140%;
}
}
@keyframes fourth-5 {
0% {
width: 120%;
}
100% {
width: 150%;
}
}
@keyframes fourth-6 {
0% {
width: 120%;
}
100% {
width: 130%;
}
}
@keyframes fourth-7 {
0% {
width: 130%;
}
100% {
width: 155%;
}
}
@keyframes fourth-8 {
0% {
width: 155%;
}
100% {
width: 165%;
}
}
style>
head>
<body>
<div class="container">
<div class="main-container">
<div class="first">
<ul>
<li>li>
<li>li>
<li>li>
<li>li>
ul>
div>
<div class="second">
<ul>
<li>li>
<li>li>
ul>
div>
<div class="third">
<ul>
<li class="top">li>
<li class="top">li>
<li class="top">li>
<li class="bottom">li>
<li class="bottom">li>
<li class="bottom">li>
ul>
div>
<div class="fourth">
<ul>
<li class="odd">li>
<li class="even">li>
<li class="odd">li>
<li class="even">li>
<li class="odd">li>
<li class="even">li>
<li class="odd">li>
<li class="even">li>
ul>
<span class="eyes">span>
<span class="checks">span>
<span class="smile">span>
div>
div>
<div class=" flying-starts">div>
div>
body>
html>