效果图
萌翻少女，，，！初一觉得不大可能，萌翻一片少男倒是挺有可能，可用作与跳转页以及网站预加载动画
HTML
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>萌翻少女心的发光果冻泡泡</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="bubble"></div>
<div class="shadow"></div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
body{
/* 100%窗口高度 */ height: 100vh;
/* 弹性布局 居中显示 */ display: flex;
justify-content: center;
align-items: center;
/* 渐变背景 */ background: linear-gradient(150deg,#d299c2,#fef9d7);
/* 溢出隐藏 */ overflow: hidden;
}
.container{
width: 200px;
height: 200px;
/* 相对定位 */ position: relative;
}
/* 泡泡 */.bubble{
width: 100%;
height: 100%;
/* 径向渐变 */ background: radial-gradient(circle at 75% 30%,#fff 5px,#ff21c0 8%,#5b5b5b 60%,#ff21c0 100%);
border-radius: 50%;
/* 阴影 */ box-shadow: inset 0 0 20px #fff,
inset 10px 0 46px #eaf5fc,
inset 80px 0 60px #efcde6,
inset -20px -60px 100px #f9f6de,
inset 0 50px 140px #f9f6de,
0 0 90px #fff;
/* 执行动画：动画名 时长 加速后减速 无限次播放 */ animation: bubble 4s ease-in-out infinite;
}
.shadow{
background-color: rgba(0,0,0,0.15);
width: 150px;
height: 40px;
border-radius: 50%;
/* 绝对定位 */ position: absolute;
left: 50%;
margin-left: -75px;
bottom: -100px;
/* 一点点模糊效果 */ filter: blur(1px);
/* 执行动画：动画名 时长 加速后减速 无限次播放 */ animation: shadow 4s ease-in-out infinite;
}
/* 定义动画 *//* 泡泡浮动动画 */@keyframes bubble {
0%,100%{
transform: translateY(0);
}
50%{
transform: translateY(-80px);
}
}
/* 投影动画 */@keyframes shadow {
0%,100%{
transform: scale(0.5);
}
50%{
transform: scale(1);
}
}
发表回复
要发表评论，您必须先登录。