正在准备设计规范
01.easter-animation {02 position: relative;03}04 05.egg {06 position: relative;07 width: 150px;08 height: 200px;09 border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;10 background: linear-gradient(11 295deg,12 #ff595e 15%,13 #8ac926 15%,14 #8ac926 30%,15 #ff595e 30%,16 #ff595e 49%,17 #8ac926 49%,18 #8ac926 70%,19 #ff595e 70%20 );21 overflow: hidden;22 animation: bounce 1s linear infinite;23}24 25.egg:before,26.egg:after {27 position: absolute;28 content: "";29}30 31.egg:before {32 width: 200px;33 height: 100px;34 background-color: #1982c4;35 top: 160px;36 box-shadow: 0 -50px #ffca3a, 0 -65px #8ac926, 0 -90px #6a4c93, 0 -95px #ffca3a;37}38 39.egg:after {40 border-radius: 50%;41 width: 15px;42 height: 15px;43 background-color: #ffca3a;44 left: 90px;45 top: 75px;46 box-shadow: -40px 0 #ffca3a, 40px 0 #ffca3a, -80px 0 #ffca3a, -120px 0 #ffca3a;47}48 49.eyes {50 position: absolute;51 background-color: #333;52 border-radius: 50%;53 width: 20px;54 height: 30px;55 left: 90px;56 top: 120px;57 box-shadow: 20px 0 #333;58}59 60.eyes:before {61 position: absolute;62 content: "";63 background-color: #fff;64 width: 5px;65 height: 12px;66 border-radius: 50%;67 left: 12px;68 top: 10px;69 box-shadow: 20px 0 #fff;70}71 72.eyes:after {73 content: "";74 position: absolute;75 width: 200px;76 height: 30px;77 background-color: #1982c4;78 top: -130px;79 left: -100px;80}81 82@keyframes bounce {83 0% {84 transform: scale(1, 1) translateY(0);85 }86 10% {87 transform: scale(1.1, 0.9) translateY(0);88 }89 30% {90 transform: scale(0.9, 1.1) translateY(-70px) translateX(30px);91 }92 50% {93 transform: scale(1.05, 0.95) translateY(0) translateX(30px) rotate(-10deg);94 }95 58% {96 transform: scale(1, 1) translateY(-7px) translateX(0);97 }98 65% {99 transform: scale(1, 1) translateY(0);100 }101 100% {102 transform: scale(1, 1) translateY(0);103 }104}105 106.shadow {107 position: absolute;108 z-index: -1;109 background-color: rgba(0, 0, 0, 0.2);110 width: 100px;111 height: 20px;112 border-radius: 50%;113 left: 20px;114 top: 190px;115 animation: move 1s linear infinite;116}117 118@keyframes move {119 0% {120 transform: translateX(0);121 }122 10% {123 transform: translateX(0) scale(0.8);124 }125 30% {126 transform: translateX(0) scale(0.8);127 }128 50% {129 transform: translateX(30px) scale(0.7);130 }131 58% {132 transform: translateX(20px);133 }134 65% {135 transform: translateX(0);136 }137 100% {138 transform: translateX(0);139 }140}141 142.clouds {143 position: absolute;144 width: 500px;145}146 147.cloud1,148.cloud2,149.cloud3 {150 position: absolute;151 background-color: white;152 width: 100px;153 height: 25px;154 border-radius: 100px;155}156 157.cloud1:before,158.cloud2:before,159.cloud3:before {160 position: absolute;161 content: "";162 width: 40px;163 height: 40px;164 top: -20px;165 left: 20px;166 background-color: white;167 border-radius: 50%;168}169 170.cloud1 {171 top: -150px;172 z-index: -1;173 animation: clouds 2s linear infinite;174}175 176.cloud2 {177 top: -70px;178 opacity: 0.5;179 transform: scale(0.7);180 animation: clouds 1.8s linear infinite;181}182 183.cloud3 {184 top: -100px;185 opacity: 0.5;186 transform: scale(0.9);187 animation: clouds 1.5s linear infinite;188 z-index: -2;189}190 191@keyframes clouds {192 from {193 left: 500px;194 }195 to {196 left: -500px;197 }198}