圖片預覽

html布局

<div class="egg"><div class="liu"><div class="l"></div><div class="liu-l"></div><div class="l"></div><div class="liu-l"></div><div class="l"></div><div class="liu-l"></div><div class="l"></div></div><div class="dan"><div class="huang"><div class="g1"></div><div class="g2"></div><div class="yan"><div class="yanj"></div><div class="yanj"></div></div><div class="sai"><div class="s1"></div><div class="s1"></div></div><div class="zui"></div></div></div></div><div class="starts"><span class="start"></span><span class="start"></span><span class="start"></span><span class="start"></span><span class="start"></span><span class="start"></span><span class="start"></span></div>

css樣式實現

body {background-color: black;height: 100%;overflow: hidden;}.egg {display: flex;position: absolute;left: calc(50% - 144px);/* 居中.50%-這個容器寬的一半 */top: calc(50% - 90px);/* 同上,減去高的一半 */animation: fly 2.5s infinite;z-index: 9;}.dan {background-color: white;width: 200px;height: 180px;position: relative;/* 相對定位 *//* 圓角邊框border-radius.值為50%,則為正圓. */border-top-right-radius: 100px;border-bottom-right-radius: 100px;box-shadow: 0px 0px 15px white;}.huang {background-color: gold;width: 150px;height: 150px;border-radius: 50%;position: absolute;/* 絕對定位 */top: 15px;right: 15px;box-shadow: inset 10px 1px #ffcc24;/* box-shadow向框添加一個或者多個陰影box-shadow: h-shadow(*水平位置) v-shadow(*垂直位置) blur(模糊距離) spead(陰影尺寸) color(顏色) inset(內部陰影[outset 默認 外部陰影]); */}.g1 {background-color: white;width: 8px;height: 8px;border-radius: 50%;position: absolute;top: 10px;right: 38px;}.g2 {background-color: white;width: 8px;height: 12px;border-radius: 5px;position: absolute;top: 18px;right: 28px;transform: rotate(-40deg);/* 用于元素2·3d轉化.允許將元素旋轉·縮放·移動·傾斜rotate: 角度; 2d旋轉 */}.yan {display: flex;/* 下方需要.定義為彈性盒子 */justify-content: space-between;/* justify-content 設置彈性盒子在主軸(橫軸)方向上的對齊方向flex- start默認,容器開頭 end結尾center容器中心space- around位于各行之間,之前,之后都留有空白的容器between位于各行之間留有空白的容器 */position: absolute;top: 50px;right: 35px;width: 80px;/* 容器寬度,設置了時候才會有空白 */}.yanj {background-color: black;width: 15px;height: 15px;border-radius: 50%;animation: zyan 2.5s infinite;/* 添加動畫,并設置時間和屬性 */}.sai {display: flex;/* 下方需要.定義為彈性盒子 */justify-content: space-between;width: 100px;position: absolute;top: 65px;right: 26px;}.s1 {background-color: hotpink;width: 15px;height: 10px;border-radius: 9px;}.zui {width: 15px;height: 15px;border-radius: 50%;position: absolute;top: 65px;right: 65px;border-bottom: 5px solid #000000;/* 設置下邊框樣式 border-bottom: width style color; */}.liu {display: flex;flex-direction: column;/* */justify-content: space-between;align-items: flex-end;height: 180px;width: 100px;margin-right: -12px;}.l {background-color: #FFFFFF;width: 100px;height: 24px;border-top-left-radius: 25px;border-bottom-left-radius: 25px;position: relative;}.l:nth-child(1)/* 動畫 */{animation: ldong 1s .3s infinite;/* 名字 時間 延遲 屬性(永久) */}.l:nth-child(1)::before {animation: ldan 1s .6s infinite;}.l:nth-child(3) {animation: ldong 1s .7s infinite;}.l:nth-child(3)::before {animation: ldan 1s .7s infinite;}.l:nth-child(5) {animation: ldong 1s .1s infinite;}.l:nth-child(5)::before {animation: ldan 1s .1s infinite;}.l:nth-child(7) {animation: ldong 1s .9s infinite;}.l:nth-child(7)::before {animation: ldan 1s .9s infinite;}.l::before/* 偽類,小圓球 */{content: "";position: absolute;left: -40px;width: 24px;height: 24px;border-radius: 50%;background-color: white;/* animation: ldan 0.6s infinite; */}.liu-l {height: 29px;width: 30px;border-radius: 25px;background-color: black;z-index: 999;/* 層級關系 */}.start {width: 20px;height: 20px;border-radius: 50%;background: linear-gradient(to left, #48098b, #00baee);display: inline-block;position: absolute;top: 50px;left: 100%;animation: xing 1.5s infinite;z-index: 5;}.start:nth-child(2) {width: 30px;height: 2px;border-radius: 50%;background: linear-gradient(to left, #48098b, #00baee);display: inline-block;position: absolute;top: 100px;left: 100%;animation: xing .5s .6s infinite;}.start:nth-child(3) {width: 30px;height: 30px;border-radius: 50%;background: linear-gradient(to left, #48098b, #00baee);display: inline-block;position: absolute;top: 500px;left: 100%;animation: xing 1.5s .9s infinite;}.start:nth-child(4) {width: 10px;height: 10px;border-radius: 50%;background: linear-gradient(to left, #48098b, #00baee);display: inline-block;position: absolute;top: 200px;left: 100%;animation: xing 1s .3s infinite;}.start:nth-child(5) {width: 40px;height: 2px;border-radius: 50%;background: linear-gradient(to left, #48098b, #00baee);display: inline-block;position: absolute;top: 550px;left: 100%;animation: xing .5s .2s infinite;}.start:nth-child(6) {width: 15px;height: 15px;border-radius: 50%;background: linear-gradient(to left, #48098b, #00baee);display: inline-block;position: absolute;top: 400px;left: 100%;animation: xing .5s .4s infinite;}.start:nth-child(7) {width: 10px;height: 10px;border-radius: 50%;background: linear-gradient(to left, #48098b, #00baee);display: inline-block;position: absolute;top: 300px;left: 100%;animation: xing .5s .7s infinite;}/* //動畫 */@keyframes zyan/* 眨眼 */{0% {transform: scaleY(1);}40% {transform: scaleY(1);}50% {transform: scaleY(0);}60% {transform: scaleY(1);}100% {transform: scaleY(1);}}@keyframes ldong {/* 流動 */0% {transform: translateX(0);}50% {transform: translateX(60px);}100% {transform: translateX(0px);}}@keyframes ldan {/* 顏色變淡 */0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0;}}@keyframes fly {/* 飛天荷包蛋 */0% {transform: translateX(0px);}50% {transform: translateX(200px);}100% {transform: translateX(0px);}}@keyframes xing {/* 星星 */0% {left: 100%;}100% {left: -200px;}}

總結

以上是生活随笔為你收集整理的css动态飞飞荷包蛋的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。