html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div id="div2">
<div id="div21">
</div>
</div>
<div id="div3"></div>
<div id="div4"></div>
<div class="container">
<div class="pp">
<div class="pp1">我的神啊</div>
</div>
<div class="shadow"></div>
</div>
</body>
</html>
css 样式
#div2{
width: 0px;height: 0;
border: 50px solid white;
border-bottom-color: lightblue;
border-left-color: green;
border-radius: 50%;
}
#div21{
position:relative;
left:-29px;top:-29px;
width: 0px;height: 0;
border: 30px solid white;
border-bottom-color: white;
border-radius: 50%;
}
#div3{
width: 0px;height: 0px;
border: 50px solid white;
border-bottom-color: lightblue;
}
#div4 {
position: absolute;
bottom: -50px;
background: transparent;
border-radius: 50%;
pointer-events: none;
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
animation: animate 4s linear infinite;
}
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(150deg,#ffd9e5,#fff0b2,#affffc);
overflow: hidden;
}
.container{
width: 200px;
height: 200px;
position: relative;
}
.pp{
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 #fadbe5,
inset 10px 0 46px #f8c4d5,
inset 80px 0 60px #c5faf8,
inset -20px -60px 100px #9cf6f3,
inset 0 50px 140px #ccfffd,
0 0 90px #eafefd;
animation: bubble 5s ease-in-out infinite;
}
.pp .pp1{
color:red;
font-size:35px;
text-align:center;
padding-top:70px;
//padding-bottom:50px;
//border:1px red solid;
}
.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 5s ease infinite;
}
@keyframes bubble {
0%{
transform: translate(0px,0px);
}
50%{
transform: translate(0px,-100px);
}
100%{
transform: translate(0px,0px);
}
}
@keyframes shadow {
0%,100%{
transform: scale(1);
}
50%{
transform: scale(2);
}
}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）