css特效-實現幽靈浮動效果
阿新 • • 發佈：2021-02-04
技術標籤：# webcss定位htmlcss3animation
實現效果
實現原理
(1) 使用 border-top-left/right-radius 製作精靈的圓頭。
(2) 使用 box-shadow: 水平 垂直 寬度 inset 顏色製作精靈右邊的灰色陰影。
(3) 使用 before after 偽元素(當然你也可以使用在盒子裡巢狀兩個在一行的盒子)實現兩個眼睛、兩個腮紅。
(4) 使用 絕對定位實現4個腳 ，最後一個腳的內陰影 box-shadow: 水平 垂直 寬度 inset 顏色實現。
(5) 腳下陰影絕對定位實現，陰影的橢圓效果使用: 1.寬度>高度 2.border-radius:50%。
transfrom:translateY() scale()實現(也就是身體 Y 軸上移 + 影子放大)。
實現程式碼
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href='index.css' rel='stylesheet' type='text/css' /> </head> <body> <div class="ghost"> <div class="g-body"> <div class="g-eyes"></div> <div class="g-cheeks"></div> <div class="g-feet"> <div class="g-foot"></div> <div class="g-foot"></div> <div class="g-foot"></div> <div class="g-foot"></div> </div> </div> <div class="g-shadow"></div> </div> </body> </html>
css（便於閱讀less檔案格式）
body, div { padding: 0; margin: 0; } body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: aquamarine; } .ghost { position: relative; width: 300px; height: 400px; .g-body { animation: ghostMove 2s infinite; margin: 0 auto; position: relative; box-sizing: border-box; width: 60%; height: 50%; background-color: beige; border-top-left-radius: 40%; border-top-right-radius: 40%; box-shadow: -15px 0 0 inset grey, 0 0 50px green; padding: 10%; .g-eyes, .g-cheeks, .g-feet { display: flex; justify-content: space-around; align-items: center; height: 30%; } .g-eyes { &::before, &::after { content: ""; display: block; width: 20%; height: 60%; border-radius: 80%; background-color: black; } } .g-cheeks { &::before, &::after { content: ""; display: block; width: 30%; height: 60%; border-radius: 30%; background-color: pink; } } .g-feet { width: 100%; position: absolute; bottom: -10%; height: 10%; left: 0; .g-foot { width: 25%; height: 100%; background-color: beige; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; } .g-foot:nth-last-child(1) { box-shadow: -15px 0 0 inset grey; } } } .g-shadow { animation: gShadowMove 2s infinite; position: absolute; bottom: 20%; width: 70%; height: 20%; left: 50%; background-color: grey; border-radius: 50%; } } @keyframes ghostMove { 0%, 100% { transform: translateY(0); box-shadow: -15px 0 0 inset grey, 0 0 50px green; } 50% { transform: translateY(-10px); box-shadow: -15px 0 0 inset grey, 0 0 20px green; } } @keyframes gShadowMove { 0%, 100% { transform: scale(1) translateX(-50%); } 50% { transform: scale(0.9) translateX(-50%); } }