效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>幽灵漂浮效果</title>
<style>
/* 页面初始化，清除元素的内外边距 */
*{
margin: 0;
padding: 0;
}
body{
/* 弹性布局，让元素在页面中垂直+水平居中 */
display: flex;
justify-content: center;
align-items: center;
/* 让页面占浏览器可视区域的高度 */
height: 100vh;
background-color: #00034b;
}
.container .ghost{
/* 相对定位 */
position: relative;
width: 150px;
height: 225px;
/* 圆角属性：左上角和右上角为圆角 */
border-radius: 75px 75px 0 0;
background-color: #fff;
/* 盒子阴影 inset 是内阴影 啥都不加就是默认外阴影 */
box-shadow: -17px 0 0 #dbdbdb inset,0 0 50px #5939db;
animation: ghost 2s infinite;
}
/* 眼睛 start */
.container .ghost .ghostEyes{
/* 弹性布局 */
display: flex;
/* 让元素平均分配宽度 */
justify-content: space-around;
width: 90px;
padding-top: 70px;
margin: 0 auto;
}
/* 利用两个伪元素做出卡姿兰大眼睛 */
.container .ghost .ghostEyes::before,
.container .ghost .ghostEyes::after{
content: "";
width: 15px;
height: 25px;
border-radius: 50%;
background-color: #00034b;
}
/* 眼睛 end */
/* 腮红 start */
/* 逻辑跟眼睛一样 */
.container .ghost .ghostDimples{
display: flex;
justify-content: space-around;
width: 130px;
padding-top:15px;
margin: 0 auto;
}
.container .ghost .ghostDimples::before,
.container .ghost .ghostDimples::after{
content: "";
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #ffbeff;
}
/* 腮红结束 */
/* 脚 start */
.container .ghost .ghostFeet{
/* 这个主要是向让四只脚水平排列 */
display: flex;
position: absolute;
bottom: -13px;
width: 100%;
}
.container .ghost .ghostFeet .ghostFoot{
width: 25%;
height: 26px;
border-radius: 50%;
background-color: #fff;
}
/* 设置一下最后一个 让它跟身体的内阴影一样 */
.container .ghost .ghostFeet .ghostFoot:last-child{
/* 利用背景渐变色实现 to right 是从左到右 */
background-image: linear-gradient(to right,#fff 55%,#dbdbdb 45%);
}
/* 脚 end */
/* 阴影 start */
.container .shadow {
width: 150px;
height: 40px;
margin-top: 50px;
border-radius: 50%;
background-color: #000232;
/* 绑定动画 名称 时长 无限循环*/
animation: shadow 2s infinite;
}
/* 阴影 end */
/* 然后开始制作动画 */
@keyframes ghost {
0%,100%{
transform: translateY(0);
}
50%{
/* 2D位移 -15px 是向上走 */
transform: translateY(-15px);
}
}
@keyframes shadow{
0%,100%{
transform: scale(1);
}
50%{
/* 缩放0.9比1小一点点 */
transform: scale(0.9);
}
}
</style>
</head>
<body>
<div class="container">
<div class="ghost">
<div class="ghostEyes"></div>
<ghostDimples></ghostDimples>
<div class="ghostFeet">
<div class="ghostFoot"></div>
<div class="ghostFoot"></div>
<div class="ghostFoot"></div>
<div class="ghostFoot"></div>
</div>
</div>
<div class="shadow"></div>
</div>
</body>
</html>
ps：此项目来自：阿阳热爱前端