<!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{ 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: 100px; height: 100px; 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; } .showed{ background-color:rgba(39, 211, 139, 0.15); animation: showed 4s ease-in-out infinite; } @keyframes bubble{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-80px); } } @keyframes showed{ 0%,100%{ transform: scale(0.5); } 50%{ transform: scale(1); } } </style> </head> <body> <div class="container"></div> <div class="bubble"></div> <div class="showed"></div> </body> </html>
520泡泡的源码
2022-10-09
82
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
520泡泡的源码
目录
相关文章
|
4月前
|
前端开发
JavaScript
|
4月前
|
4月前
|
流计算
|
20天前
宇宙星星转动特效带背景音乐引导页源码
宇宙星星转动特效带背景音乐引导页源码，源码由HTML+CSS+JS组成，记事本打开源码文件可以进行内容文字之类的修改，双击html文件可以本地运行效果，也可以上传到服务器里面，重定向这个界面
36
7
7
|
3月前
|
4月前
|
前端开发
JavaScript
Go
|
12月前
|
移动开发
前端开发
JavaScript
|
前端开发
JavaScript
|
前端开发
JavaScript