AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

H5+css+JavaScript满屏彩色泡泡小特效（适合表白哦~做完发给让你每天想念的人吧~）

2022-10-08 172
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： H5+css+JavaScript满屏彩色泡泡小特效（适合表白哦~做完发给让你每天想念的人吧~）

前端是做什么的？

1.前端工程师主要利用HMTL与CSS建构页面（其中html构建骨架，css构建样式），用JavaScript获取后端数据以及完善交互以及用户体验。

2.通俗来讲，前端在一个项目里，拿到UI设计师设计的设计稿，然后实现UI设计师设计稿，调用后端程序员给的数据接口以获取数据，然后测试，最后部署上线。

3.前端可以对设计图负责,大部分情况下,不需要特别的去理解业务逻辑,因为我们90后都是玩着十几年手机电脑长大的,十几年的经验足够我们在潜意识里想明白应该怎么做,怎么去一步步实现,会有什么意外情况。

4.我感觉前端发展有个很大的缺陷----晋升问题. 正如第三点所言,作为领导必须对项目有足够的了解,显然是要重点包括业务逻辑,这点上,后端开发者需要涉及数据库逻辑,是必须要跟业务逻辑打交道的(重中之重),因此,大部分的领导岗位都是后端开发者更有晋升的机会。当然,个别公司有专门的前端组长(这也不算什么),如果说前端开发者在自己工作范围之外还要腾出时间去研究业务逻辑,属实是觉得出力不讨好(因为这样的操作需要持续很久才能看出效果),而且再怎么研究业务逻辑也不会比每时每刻跟业务逻辑打交道的后端开发者了解更多。说实在的,大部分情况下,前端在配合后端进行开发.后端需要了解业务逻辑,要跟领导和客户商量细节,露脸机会很大,在老板面前刷脸次数众多。这些都是拉开前后端程序员晋升机会差距的因素。

前端的特效视觉：

层次结构的表现

动态效果，如缩放，覆盖，滑出网页或单个视觉元素，可帮助用户理解网页信息架构。通常是通过转场和菜单来展开网页。

表现层级关系

为了展现层与层的关系，是抽屉，是打开，还是平级切换等等。让用户知道这个界面和上一个、下一个的关系。

清晰明确

动效可以清晰地表明各种数据块中间的逻辑结构，即使在数据高度饱和的情况下也能使一切从观感上有组织性。

添加了图层

在网站制作过程中加上特效，每个元素都在用户滚动页面或者是鼠标经过的地方有动态效果，就像在平面层上多出了一个动态层，这样看起来更加有层次感。


2.gif

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>泡泡'小胖子'</title><style>        *{
margin: 0;
padding: 0;
        }
.zhongjian1{
/*100%窗口高度*/height:100vh;
/*渐变背景*/background: linear-gradient(150deg,#75c7f7,#afec5f);
/*溢出隐藏*/overflow: hidden;
        }
.zhongjianbigbox{
margin: 300px00750px;
width: 300px;
height: 300px;
/*相对定位*/position: relative;
        }
.zhongjianpaopao{
background-image: url(../泡泡特效/img/1.jpg);
background-size: 120%100%;
width: 100%;
height: 100%;
background: radial-gradient(circleat75%30%,#fff5px,#f8b8068%#5b5b5b60%,#ff7221100%);
border-radius: 50%;
/*阴影*/box-shadow:
inset0010px#fff,
inset-10px-20px30px#87c55e,
inset10px-60px50px#dff1c8,
inset020px40px#f9f6de,
0040px#fff;
/*执行动画：动画名 时长 加速后减速，无限循环*/animation: zhongjianpaopao4sease-in-outinfinite;
        }
.zhongjianyinying{
background-color: rgba(0, 0, 0, 0.15);
width: 200px;
height: 80px;
border-radius: 50%;
/*绝对定位*/position: absolute;
left: 50%;
margin-left: -95px;
bottom: -100px;
/*一点模糊效果*/filter: blur(1px);
animation: zhongjianyinying4sease-in-outinfinite        }
/*定义动画*//*泡泡浮动动画*/@keyframeszhongjianpaopao{
0%,100%{
transform: translateY(0);
            }
50%{
transform: translateY(-80px);
            }
        }
@keyframeszhongjianyinying{
0%,100%{
transform: scale(0.5);
            }
50%{
transform: scale(1);
            }
        }
/* 中间泡泡完成 */.zuoshangbigbox{
margin: -500px0050px;
width: 200px;
height: 200px;
/*相对定位*/position: relative;
        }
.zuoshangpaopao{
background-image: url(../泡泡特效/img/1.jpg);
background-size: 120%100%;
width: 100%;
height: 100%;
background: radial-gradient(circleat75%30%,#fff5px,#f8b8068%#5b5b5b60%,#ff7221100%);
border-radius: 50%;
/*阴影*/box-shadow:
inset0010px#fff,
inset-10px-20px30px#5ec5c0,
inset10px-60px50px#dff1c8,
inset020px40px#f9f6de,
0040px#fff;
/*执行动画：动画名 时长 加速后减速，无限循环*/animation: zuoshangpaopao4sease-in-outinfinite;
        }
.zuoshangyinying{
background-color: rgba(0, 0, 0, 0.15);
width: 100px;
height: 60px;
border-radius: 50%;
/*绝对定位*/position: absolute;
left: 50%;
margin-left: -55px;
bottom: -100px;
/*一点模糊效果*/filter: blur(1px);
animation: zuoshangyinying4sease-in-outinfinite        }
/*定义动画*//*泡泡浮动动画*/@keyframeszuoshangpaopao{
0%,100%{
transform: translateY(0);
            }
35%{
transform: translateY(-80px);
            }
        }
@keyframeszuoshangyinying{
0%,100%{
transform: scale(0.5);
            }
60%{
transform: scale(1);
            }
        }
/* 左上完成 */.youshangbigbox{
margin: -200px001700px;
width: 150px;
height: 150px;
/*相对定位*/position: relative;
        }
.youshangpaopao{
background-image: url(../泡泡特效/img/1.jpg);
background-size: 120%100%;
width: 100%;
height: 100%;
background: radial-gradient(circleat75%30%,#fff5px,#f8b8068%#5b5b5b60%,#ff7221100%);
border-radius: 50%;
/*阴影*/box-shadow:
inset0010px#fff,
inset-10px-20px30px#c5735e,
inset10px-60px50px#dff1c8,
inset020px40px#f9f6de,
0040px#fff;
/*执行动画：动画名 时长 加速后减速，无限循环*/animation: youshangpaopao4sease-in-outinfinite;
        }
.youshangyinying{
background-color: rgba(0, 0, 0, 0.15);
width: 90px;
height: 50px;
border-radius: 50%;
/*绝对定位*/position: absolute;
left: 50%;
margin-left: -55px;
bottom: -100px;
/*一点模糊效果*/filter: blur(1px);
animation: youshangyinying4sease-in-outinfinite        }
/*定义动画*//*泡泡浮动动画*/@keyframesyoushangpaopao{
0%,100%{
transform: translateY(0);
            }
35%{
transform: translateY(-80px);
            }
        }
@keyframesyoushangyinying{
0%,100%{
transform: scale(0.5);
            }
35%{
transform: scale(1);
            }
        }
/* 右上完成 *//* 其他开始 */.qitabigbox1{
margin: 300px001500px;
width: 150px;
height: 150px;
/*相对定位*/position: relative;
        }
.qtpaopao1{
background-image: url(../泡泡特效/img/1.jpg);
background-size: 120%100%;
width: 100%;
height: 100%;
background: radial-gradient(circleat75%30%,#fff5px,#f8b8068%#5b5b5b60%,#ff7221100%);
border-radius: 50%;
/*阴影*/box-shadow:
inset0010px#fff,
inset-10px-20px30px#715ec5,
inset10px-60px50px#dff1c8,
inset020px40px#f9f6de,
0040px#fff;
/*执行动画：动画名 时长 加速后减速，无限循环*/animation: qtpaopao14sease-in-outinfinite;
        }
.qtyinying1{
background-color: rgba(0, 0, 0, 0.15);
width: 90px;
height: 50px;
border-radius: 50%;
/*绝对定位*/position: absolute;
left: 50%;
margin-left: -55px;
bottom: -100px;
/*一点模糊效果*/filter: blur(1px);
animation: qtyinying14sease-in-outinfinite        }
/*定义动画*//*泡泡浮动动画*/@keyframesqtpaopao1{
0%,100%{
transform: translateY(0);
            }
65%{
transform: translateY(-80px);
            }
        }
@keyframesqtyinying1{
0%,100%{
transform: scale(0.5);
            }
65%{
transform: scale(1);
            }
        }
.qitabigbox2{
margin: -220px00100px;
width: 150px;
height: 150px;
/*相对定位*/position: relative;
        }
.qtpaopao2{
background-image: url(../泡泡特效/img/1.jpg);
background-size: 120%100%;
width: 100%;
height: 100%;
background: radial-gradient(circleat75%30%,#fff5px,#f8b8068%#5b5b5b60%,#ff7221100%);
border-radius: 50%;
/*阴影*/box-shadow:
inset0010px#fff,
inset-10px-20px30px#c3c55e,
inset10px-60px50px#dff1c8,
inset020px40px#f9f6de,
0040px#fff;
/*执行动画：动画名 时长 加速后减速，无限循环*/animation: qtpaopao24sease-in-outinfinite;
        }
.qtyinying2{
background-color: rgba(0, 0, 0, 0.15);
width: 90px;
height: 50px;
border-radius: 50%;
/*绝对定位*/position: absolute;
left: 50%;
margin-left: -55px;
bottom: -100px;
/*一点模糊效果*/filter: blur(1px);
animation: qtyinying24sease-in-outinfinite        }
/*定义动画*//*泡泡浮动动画*/@keyframesqtpaopao2{
0%,100%{
transform: translateY(0);
            }
65%{
transform: translateY(-80px);
            }
        }
@keyframesqtyinying2{
0%,100%{
transform: scale(0.5);
            }
65%{
transform: scale(1);
            }
        }
.qitabigbox3{
margin: -300px00300px;
width: 150px;
height: 150px;
/*相对定位*/position: relative;
        }
.qtpaopao3{
background-image: url(../泡泡特效/img/1.jpg);
background-size: 120%100%;
width: 100%;
height: 100%;
background: radial-gradient(circleat75%30%,#fff5px,#f8b8068%#5b5b5b60%,#ff7221100%);
border-radius: 50%;
/*阴影*/box-shadow:
inset0010px#fff,
inset-10px-20px30px#c55e9a,
inset10px-60px50px#dff1c8,
inset020px40px#f9f6de,
0040px#fff;
/*执行动画：动画名 时长 加速后减速，无限循环*/animation: qtpaopao34sease-in-outinfinite;
        }
.qtyinying3{
background-color: rgba(0, 0, 0, 0.15);
width: 90px;
height: 50px;
border-radius: 50%;
/*绝对定位*/position: absolute;
left: 50%;
margin-left: -55px;
bottom: -100px;
/*一点模糊效果*/filter: blur(1px);
animation: qtyinying34sease-in-outinfinite        }
/*定义动画*//*泡泡浮动动画*/@keyframesqtpaopao3{
0%,100%{
transform: translateY(0);
            }
45%{
transform: translateY(-80px);
            }
        }
@keyframesqtyinying3{
0%,100%{
transform: scale(0.5);
            }
45%{
transform: scale(1);
            }
        }
.qitabigbox4{
margin: 120px001200px;
width: 100px;
height: 100px;
/*相对定位*/position: relative;
        }
.qtpaopao4{
background-image: url(../泡泡特效/img/1.jpg);
background-size: 120%100%;
width: 100%;
height: 100%;
background: radial-gradient(circleat75%30%,#fff5px,#f8b8068%#5b5b5b60%,#ff7221100%);
border-radius: 50%;
/*阴影*/box-shadow:
inset0010px#fff,
inset-10px-20px30px#5e9fc5,
inset10px-60px50px#dff1c8,
inset020px40px#f9f6de,
0040px#fff;
/*执行动画：动画名 时长 加速后减速，无限循环*/animation: qtpaopao44sease-in-outinfinite;
        }
.qtyinying4{
background-color: rgba(0, 0, 0, 0.15);
width: 70px;
height: 30px;
border-radius: 50%;
/*绝对定位*/position: absolute;
left: 50%;
margin-left: -35px;
bottom: -100px;
/*一点模糊效果*/filter: blur(1px);
animation: qtyinying44sease-in-outinfinite        }
/*定义动画*//*泡泡浮动动画*/@keyframesqtpaopao4{
0%,100%{
transform: translateY(0);
            }
55%{
transform: translateY(-80px);
            }
        }
@keyframesqtyinying4{
0%,100%{
transform: scale(0.5);
            }
55%{
transform: scale(1);
            }
        }
.qitabigbox5{
margin: -80px00400px;
width: 150px;
height: 150px;
/*相对定位*/position: relative;
        }
.qtpaopao5{
background-image: url(../泡泡特效/img/1.jpg);
background-size: 120%100%;
width: 100%;
height: 100%;
background: radial-gradient(circleat75%30%,#fff5px,#f8b8068%#5b5b5b60%,#ff7221100%);
border-radius: 50%;
/*阴影*/box-shadow:
inset0010px#fff,
inset-10px-20px30px#bd5ec5,
inset10px-60px50px#dff1c8,
inset020px40px#f9f6de,
0040px#fff;
/*执行动画：动画名 时长 加速后减速，无限循环*/animation: qtpaopao54sease-in-outinfinite;
        }
.qtyinying5{
background-color: rgba(0, 0, 0, 0.15);
width: 90px;
height: 50px;
border-radius: 50%;
/*绝对定位*/position: absolute;
left: 50%;
margin-left: -55px;
bottom: -100px;
/*一点模糊效果*/filter: blur(1px);
animation: qtyinying54sease-in-outinfinite        }
/*定义动画*//*泡泡浮动动画*/@keyframesqtpaopao5{
0%,100%{
transform: translateY(0);
            }
50%{
transform: translateY(-80px);
            }
        }
@keyframesqtyinying5{
0%,100%{
transform: scale(0.5);
            }
50%{
transform: scale(1);
            }
        }
.qitabigbox6{
margin: -600px001200px;
width: 150px;
height: 150px;
/*相对定位*/position: relative;
        }
.qtpaopao6{
background-image: url(../泡泡特效/img/1.jpg);
background-size: 120%100%;
width: 100%;
height: 100%;
background: radial-gradient(circleat75%30%,#fff5px,#f8b8068%#5b5b5b60%,#ff7221100%);
border-radius: 50%;
/*阴影*/box-shadow:
inset0010px#fff,
inset-10px-20px30px#5ec563,
inset10px-60px50px#dff1c8,
inset020px40px#f9f6de,
0040px#fff;
/*执行动画：动画名 时长 加速后减速，无限循环*/animation: qtpaopao64sease-in-outinfinite;
        }
.qtyinying6{
background-color: rgba(0, 0, 0, 0.15);
width: 90px;
height: 50px;
border-radius: 50%;
/*绝对定位*/position: absolute;
left: 50%;
margin-left: -55px;
bottom: -100px;
/*一点模糊效果*/filter: blur(1px);
animation: qtyinying64sease-in-outinfinite        }
/*定义动画*//*泡泡浮动动画*/@keyframesqtpaopao6{
0%,100%{
transform: translateY(0);
            }
35%{
transform: translateY(-80px);
            }
        }
@keyframesqtyinying6{
0%,100%{
transform: scale(0.5);
            }
35%{
transform: scale(1);
            }
        }
.qitabigbox7{
margin: -300px00600px;
width: 250px;
height: 250px;
/*相对定位*/position: relative;
        }
.qtpaopao7{
background-image: url(../泡泡特效/img/1.jpg);
background-size: 120%100%;
width: 100%;
height: 100%;
background: radial-gradient(circleat75%30%,#fff5px,#f8b8068%#5b5b5b60%,#ff7221100%);
border-radius: 50%;
/*阴影*/box-shadow:
inset0010px#fff,
inset-10px-20px30px#c55e5e,
inset10px-60px50px#dff1c8,
inset020px40px#f9f6de,
0040px#fff;
/*执行动画：动画名 时长 加速后减速，无限循环*/animation: qtpaopao74sease-in-outinfinite;
        }
.qtyinying7{
background-color: rgba(0, 0, 0, 0.15);
width: 100px;
height: 60px;
border-radius: 50%;
/*绝对定位*/position: absolute;
left: 50%;
margin-left: -65px;
bottom: -100px;
/*一点模糊效果*/filter: blur(1px);
animation: qtyinying74sease-in-outinfinite        }
/*定义动画*//*泡泡浮动动画*/@keyframesqtpaopao7{
0%,100%{
transform: translateY(0);
            }
50%{
transform: translateY(-80px);
            }
        }
@keyframesqtyinying7{
0%,100%{
transform: scale(0.5);
            }
50%{
transform: scale(1);
            }
        }
.qitabigbox8{
margin: 400px00650px;
width: 100px;
height: 100px;
/*相对定位*/position: relative;
        }
.qtpaopao8{
background-image: url(../泡泡特效/img/1.jpg);
background-size: 120%100%;
width: 100%;
height: 100%;
background: radial-gradient(circleat75%30%,#fff5px,#f8b8068%#5b5b5b60%,#ff7221100%);
border-radius: 50%;
/*阴影*/box-shadow:
inset0010px#fff,
inset-10px-20px30px#8ce6d3,
inset10px-60px50px#dff1c8,
inset020px40px#f9f6de,
0040px#fff;
/*执行动画：动画名 时长 加速后减速，无限循环*/animation: qtpaopao84sease-in-outinfinite;
        }
.qtyinying8{
background-color: rgba(0, 0, 0, 0.15);
width: 80px;
height: 40px;
border-radius: 50%;
/*绝对定位*/position: absolute;
left: 50%;
margin-left: -35px;
bottom: -100px;
/*一点模糊效果*/filter: blur(1px);
animation: qtyinying84sease-in-outinfinite        }
/*定义动画*//*泡泡浮动动画*/@keyframesqtpaopao8{
0%,100%{
transform: translateY(0);
            }
50%{
transform: translateY(-80px);
            }
        }
@keyframesqtyinying8{
0%,100%{
transform: scale(0.5);
            }
50%{
transform: scale(1);
            }
        }
</style></head><body><divclass="zhongjian1"><divclass="zhongjianbigbox"><divclass="zhongjianpaopao"></div><divclass="zhongjianyinying"></div></div><divclass="zuoshangbigbox"><divclass="zuoshangpaopao"></div><divclass="zuoshangyinying"></div></div><divclass="youshangbigbox"><divclass="youshangpaopao"></div><divclass="youshangyinying"></div></div><divclass="qitabigbox1"><divclass="qtpaopao1"></div><divclass="qtyinying1"></div></div><divclass="qitabigbox2"><divclass="qtpaopao2"></div><divclass="qtyinying2"></div></div><divclass="qitabigbox3"><divclass="qtpaopao3"></div><divclass="qtyinying3"></div></div><divclass="qitabigbox4"><divclass="qtpaopao4"></div><divclass="qtyinying4"></div></div><divclass="qitabigbox5"><divclass="qtpaopao5"></div><divclass="qtyinying5"></div></div><divclass="qitabigbox6"><divclass="qtpaopao6"></div><divclass="qtyinying6"></div></div><divclass="qitabigbox7"><divclass="qtpaopao7"></div><divclass="qtyinying7"></div></div><divclass="qitabigbox8"><divclass="qtpaopao8"></div><divclass="qtyinying8"></div></div></div></body></html>


文章标签：
JavaScript
前端开发
UED
程序员
数据库
开发者
关键词：
h5 JavaScript
JavaScript CSS
CSS javascript
CSS表白
h5 CSS
lqj_本人
目录
相关文章
光明顶阳顶天
|
19天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染，了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略，可以提高网页的性能和用户体验，确保页面能够快速、流畅地呈现给用户。在实际开发中，要根据具体情况进行权衡和调整，以达到最佳的效果。
光明顶阳顶天
28 1
大树营养快线
|
7天前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量？
【10月更文挑战第28天】通过以上方法，可以在JavaScript中灵活地访问和修改CSS变量，从而实现根据用户交互、页面状态等动态地改变页面样式，为网页添加更多的交互性和动态效果。在实际应用中，可以根据具体的需求和场景选择合适的方法来操作CSS变量。
大树营养快线
37 15
大树营养快线
|
7天前
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同？
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念，但由于它们所属的语言和应用场景不同，其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
大树营养快线
42 14
蓝易云
|
2天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript，我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验，还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能，提升网站的安全性和用户友好性。
蓝易云
8 3
大树营养快线
|
7天前
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值？
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化，根据不同的应用场景和需求，可以选择合适的方法来实现CSS变量的动态修改，从而提高页面的灵活性和用户体验。
大树营养快线
22 5
进步`于辰
|
4天前
|
移动开发 前端开发 JavaScript
前端实训，刚入门，我用原生技术（H5、C3、JS、JQ）手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面，开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面，涉及多种特效实现，如动态图片切换和人物聚合效果。作品源码已上传至CSDN，视频效果可在CSDN预览。
进步`于辰
4 0
前端实训，刚入门，我用原生技术（H5、C3、JS、JQ）手写【网易游戏】页面特效
疯狂的猿
|
13天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码，带歌词显示。包括支持单曲循环，歌词显示，歌曲搜索，音量控制，列表循环等功能。利用json获取音乐歌单和歌词，基于html5 audio属性手机音乐播放器代码。
疯狂的猿
63 6
游客qeoynko2nmbgk
|
2月前
|
前端开发 JavaScript
HTML+JavaScript+CSS DIY 分隔条splitter
HTML+JavaScript+CSS DIY 分隔条splitter
游客qeoynko2nmbgk
68 2
游客qeoynko2nmbgk
|
2月前
用CSS+JavaScript打造网页中的选项卡
用CSS+JavaScript打造网页中的选项卡
游客qeoynko2nmbgk
51 1
bruce刘晓伟-18435
|
1月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
bruce刘晓伟-18435
31 0