HTML+CSS+JS实现发光糖果泡泡动画特效
【摘要】 HTML+CSS+JS实现发光糖果泡泡动画特效
🍅 作者主页：
🍅 简介：Java领域优质创作者🏆、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】
🍅 欢迎点赞 👍 收藏 ⭐留言 📝
效果演示： 文末获取源码
代码目录：
主要代码实现：
CSS样式：
body {
background-image: linear-gradient( to bottom right, #91defe, #99c0f9, #bdb6ec, #d7b3e3, #efb3d5, #f9bccc);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
}
.ball {
animation: float 3.5s ease-in-out infinite;
height: 200px;
width: 200px;
border-radius: 50%;
position: relative;
background: radial-gradient( circle at 75% 30%, white 5px, aqua 8%, darkblue 60%, aqua 100%);
box-shadow: inset 0 0 20px #fff, inset 10px 0 46px #eaf5fc, inset 88px 0px 60px #c2d8fe, inset -20px -60px 100px #fde9ea, inset 0 50px 140px #fde9ea, 0 0 90px #fff;
}
@keyframes float {
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-80px);
}
100% {
transform: translatey(0px);
}
}
.shadow {
background: #b490b2;
width: 150px;
height: 40px;
top: 70%;
animation: expand 4s infinite;
position: absolute;
border-radius: 50%;
}
@keyframes expand {
0%,
100% {
transform: scale(0.5);
}
50% {
transform: scale(1);
}
}
@media only screen and (max-width: 500px) {
.ball {
animation: float 4.5s ease-in-out infinite;
height: 120px;
width: 120px;
background: radial-gradient( circle at 65% 35%, white 5px, aqua 15%, darkblue 50%, aqua 100%);
box-shadow: inset 0 -20px 30px #fff, inset 40px 0 46px #eaf5fc, inset 58px 0px 60px #c2d8fe, inset -8px -30px 100px #fde9ea, inset 0 20px 110px #fde9ea, 0 0 90px #fff;
}
.shadow {
width: 90px;
height: 20px;
top: 78%;
animation: expand 5s infinite;
}
@keyframes float {
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-50px);
}
100% {
transform: translatey(0px);
}
}
}
HTML代码 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发光糖果泡泡动画特效</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="ball"></div>
<div class="shadow"></div>
</body>
</html>
源码获取
大家可以点赞、收藏、关注、评论我啦 、查看或下方微信公众号获取更多~！
打卡 文章 更新 48 / 100天
精彩推荐更新中：
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）