通过HTML+CSS 实现一个会动的泡泡
2022/4/19 23:17:36
本文主要是介绍通过HTML+CSS 实现一个会动的泡泡,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
HTML代码
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <title>泡泡</title> <link rel="stylesheet" href="pp.css"> </head> <body> <div class="container"> <div class="pp"></div> <div class="shadow"></div> </div> </body> </html>
CSS代码(可根据想要的效果改动相应的数值)
*{ 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; } .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 4s ease infinite; } /* 定义动画 */ /* 泡泡浮动动画 */ @keyframes bubble { 0%{ transform: translate(0px,0px); } 25%{ transform: translate(0px,-200px); } 50%{ transform: translate(100px,-200px); } 75%{ transform: translate(300px,0px); } 100%{ transform: translate(0px,0px); } } /* 投影动画 */ @keyframes shadow { 0%,100%{ transform: scale(1); } 50%{ transform: scale(2); } }
这篇关于通过HTML+CSS 实现一个会动的泡泡的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-21动态面包屑教程:新手入门指南
- 2024-12-21动态主题处理教程:新手必读指南
- 2024-12-21富文本编辑器教程:新手入门指南
- 2024-12-21前端项目部署教程:从零开始的全面指南
- 2024-12-21拖拽表格教程:轻松入门指南
- 2024-12-21Element-Plus教程:新手入门与实战指南
- 2024-12-21TagsView标签栏导航教程:轻松掌握标签栏导航
- 2024-12-21动态表格实战:新手入门教程
- 2024-12-21动态菜单项实战:一步步教你实现动态菜单项
- 2024-12-21动态面包屑实战:新手教程