南昌天和建设有限公司网站,推广网站平台,无锡网站建设 无锡和诚科技,dw网页制作作业#x1f345; 作者主页#xff1a;Java李杨勇 #x1f345; 简介#xff1a;Java领域优质创作者#x1f3c6;、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我#xff0c;都给你】 #x1f345; 欢迎点赞 #x1f44d; 收藏 ⭐留言 … 作者主页Java李杨勇 简介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 langenheadmeta charsetUTF-8title发光糖果泡泡动画特效/titlelink relstylesheet hrefcss/style.css/headbodydiv classball/divdiv classshadow/div/body/html 源码获取 大家可以点赞、收藏、关注、评论我啦 、查看博主主页或下方微信公众号获取更多~ 打卡 文章 更新 48 / 100天 精彩推荐更新中 HTML5大作业实战案例《100套》 Java毕设项目精品实战案例《100套》
