<!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
95
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
520泡泡的源码
目录
相关文章
|
8月前
|
8月前
|
流计算
|
Java
Python
|
8月前
|
Java
程序员
图形学
程序员教你用代码制作飞翔的小鸟--Java小游戏，正好拿去和给女神一起玩
《飞扬的小鸟》Java实现摘要：使用IntelliJ IDEA和JDK 16开发，包含小鸟类`Bird`，处理小鸟的位置、速度和碰撞检测。代码示例展示小鸟图像的加载、绘制与旋转。同时有`Music`类用于循环播放背景音乐。游戏运行时检查小鸟是否撞到地面、柱子或星星，并实现翅膀煽动效果。简单易懂，可直接复制使用。
189
0
0
|
6月前
|
算法
C#
图形学
|
计算机视觉
Python
|
Java
|
API
图形学
C++
|
Python
|
Python