当前位置：首页 > news >正文

CSS3动画——飞行的小精灵

news 来源：原创 2024/9/19 0:30:25

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>