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

淼学派对
已于 2022-09-13 12:01:41 修改
阅读量786
点赞数 4
分类专栏：前端文章标签： html 前端
于 2022-09-13 00:05:41 首次发布
本文链接：https://blog.csdn.net/lbcyllqj/article/details/126824875
版权
前端专栏收录该内容
24 篇文章 16 订阅
订阅专栏
那么还是那句话"我们废话不多说！"

上代码！！！

好嘞！！！各位爷这次我们上代码！！！

<!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;
        }
        .zhongjian1{
            /*100%窗口高度*/
            height:100vh;
            /*渐变背景*/
            background: linear-gradient(150deg,#75c7f7,#afec5f);
            /*溢出隐藏*/
            overflow: hidden;
        }
        .zhongjianbigbox{
            margin: 300px 0 0 750px;
            width: 300px;
            height: 300px;
            /*相对定位*/
            position: relative;
        }
        .zhongjianpaopao{
            background-image: url(../泡泡特效/img/1.jpg);
            background-size: 120% 100%;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 75% 30%,#fff 5px,#f8b806 8%
            #5b5b5b 60%,#ff7221 100%);
            border-radius: 50%;
            /*阴影*/
            box-shadow:
                inset 0 0 10px #fff,
                inset -10px -20px 30px #87c55e,
                inset 10px -60px 50px #dff1c8,
                inset 0 20px 40px #f9f6de,
                0 0 40px #fff;
                /*执行动画：动画名 时长 加速后减速，无限循环*/
                animation: zhongjianpaopao 4s ease-in-out infinite;
        }
        .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: zhongjianyinying 4s ease-in-out infinite
        }
        /*定义动画*/
        /*泡泡浮动动画*/
        @keyframes zhongjianpaopao{
            0%,100%{
                transform: translateY(0);
            }
            50%{
                transform: translateY(-80px);
            }
        }
        @keyframes zhongjianyinying{
            0%,100%{
                transform: scale(0.5);
            }
            50%{
                transform: scale(1);
            }
        }

/* 中间泡泡完成 */
        .zuoshangbigbox{
            margin: -500px 0 0 50px;
            width: 200px;
            height: 200px;
            /*相对定位*/
            position: relative;
        }
        .zuoshangpaopao{
            background-image: url(../泡泡特效/img/1.jpg);
            background-size: 120% 100%;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 75% 30%,#fff 5px,#f8b806 8%
            #5b5b5b 60%,#ff7221 100%);
            border-radius: 50%;
            /*阴影*/
            box-shadow:
                inset 0 0 10px #fff,
                inset -10px -20px 30px #5ec5c0,
                inset 10px -60px 50px #dff1c8,
                inset 0 20px 40px #f9f6de,
                0 0 40px #fff;
                /*执行动画：动画名 时长 加速后减速，无限循环*/
                animation: zuoshangpaopao 4s ease-in-out infinite;
        }
        .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: zuoshangyinying 4s ease-in-out infinite
        }
        /*定义动画*/
        /*泡泡浮动动画*/
        @keyframes zuoshangpaopao{
            0%,100%{
                transform: translateY(0);
            }
            35%{
                transform: translateY(-80px);
            }
        }
        @keyframes zuoshangyinying{
            0%,100%{
                transform: scale(0.5);
            }
            60%{
                transform: scale(1);
            }
        }

        /* 左上完成 */
        .youshangbigbox{
            margin: -200px 0 0 1700px;
            width: 150px;
            height: 150px;
            /*相对定位*/
            position: relative;
        }
        .youshangpaopao{
            background-image: url(../泡泡特效/img/1.jpg);
            background-size: 120% 100%;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 75% 30%,#fff 5px,#f8b806 8%
            #5b5b5b 60%,#ff7221 100%);
            border-radius: 50%;
            /*阴影*/
            box-shadow:
                inset 0 0 10px #fff,
                inset -10px -20px 30px #c5735e,
                inset 10px -60px 50px #dff1c8,
                inset 0 20px 40px #f9f6de,
                0 0 40px #fff;
                /*执行动画：动画名 时长 加速后减速，无限循环*/
                animation: youshangpaopao 4s ease-in-out infinite;
        }
        .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: youshangyinying 4s ease-in-out infinite
        }
        /*定义动画*/
        /*泡泡浮动动画*/
        @keyframes youshangpaopao{
            0%,100%{
                transform: translateY(0);
            }
            35%{
                transform: translateY(-80px);
            }
        }
        @keyframes youshangyinying{
            0%,100%{
                transform: scale(0.5);
            }
            35%{
                transform: scale(1);
            }
        }
        
        /* 右上完成 */
        /* 其他开始 */
        .qitabigbox1{
            margin: 300px 0 0 1500px;
            width: 150px;
            height: 150px;
            /*相对定位*/
            position: relative;
        }
        .qtpaopao1{
            background-image: url(../泡泡特效/img/1.jpg);
            background-size: 120% 100%;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 75% 30%,#fff 5px,#f8b806 8%
            #5b5b5b 60%,#ff7221 100%);
            border-radius: 50%;
            /*阴影*/
            box-shadow:
                inset 0 0 10px #fff,
                inset -10px -20px 30px #715ec5,
                inset 10px -60px 50px #dff1c8,
                inset 0 20px 40px #f9f6de,
                0 0 40px #fff;
                /*执行动画：动画名 时长 加速后减速，无限循环*/
                animation: qtpaopao1 4s ease-in-out infinite;
        }
        .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: qtyinying1 4s ease-in-out infinite
        }
        /*定义动画*/
        /*泡泡浮动动画*/
        @keyframes qtpaopao1{
            0%,100%{
                transform: translateY(0);
            }
            65%{
                transform: translateY(-80px);
            }
        }
        @keyframes qtyinying1{
            0%,100%{
                transform: scale(0.5);
            }
            65%{
                transform: scale(1);
            }
        }

        .qitabigbox2{
            margin: -220px 0 0 100px;
            width: 150px;
            height: 150px;
            /*相对定位*/
            position: relative;
        }
        .qtpaopao2{
            background-image: url(../泡泡特效/img/1.jpg);
            background-size: 120% 100%;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 75% 30%,#fff 5px,#f8b806 8%
            #5b5b5b 60%,#ff7221 100%);
            border-radius: 50%;
            /*阴影*/
            box-shadow:
                inset 0 0 10px #fff,
                inset -10px -20px 30px #c3c55e,
                inset 10px -60px 50px #dff1c8,
                inset 0 20px 40px #f9f6de,
                0 0 40px #fff;
                /*执行动画：动画名 时长 加速后减速，无限循环*/
                animation: qtpaopao2 4s ease-in-out infinite;
        }
        .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: qtyinying2 4s ease-in-out infinite
        }
        /*定义动画*/
        /*泡泡浮动动画*/
        @keyframes qtpaopao2{
            0%,100%{
                transform: translateY(0);
            }
            65%{
                transform: translateY(-80px);
            }
        }
        @keyframes qtyinying2{
            0%,100%{
                transform: scale(0.5);
            }
            65%{
                transform: scale(1);
            }
        }

        .qitabigbox3{
            margin: -300px 0 0 300px;
            width: 150px;
            height: 150px;
            /*相对定位*/
            position: relative;
        }
        .qtpaopao3{
            background-image: url(../泡泡特效/img/1.jpg);
            background-size: 120% 100%;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 75% 30%,#fff 5px,#f8b806 8%
            #5b5b5b 60%,#ff7221 100%);
            border-radius: 50%;
            /*阴影*/
            box-shadow:
                inset 0 0 10px #fff,
                inset -10px -20px 30px #c55e9a,
                inset 10px -60px 50px #dff1c8,
                inset 0 20px 40px #f9f6de,
                0 0 40px #fff;
                /*执行动画：动画名 时长 加速后减速，无限循环*/
                animation: qtpaopao3 4s ease-in-out infinite;
        }
        .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: qtyinying3 4s ease-in-out infinite
        }
        /*定义动画*/
        /*泡泡浮动动画*/
        @keyframes qtpaopao3{
            0%,100%{
                transform: translateY(0);
            }
            45%{
                transform: translateY(-80px);
            }
        }
        @keyframes qtyinying3{
            0%,100%{
                transform: scale(0.5);
            }
            45%{
                transform: scale(1);
            }
        }

        .qitabigbox4{
            margin: 120px 0 0 1200px;
            width: 100px;
            height: 100px;
            /*相对定位*/
            position: relative;
        }
        .qtpaopao4{
            background-image: url(../泡泡特效/img/1.jpg);
            background-size: 120% 100%;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 75% 30%,#fff 5px,#f8b806 8%
            #5b5b5b 60%,#ff7221 100%);
            border-radius: 50%;
            /*阴影*/
            box-shadow:
                inset 0 0 10px #fff,
                inset -10px -20px 30px #5e9fc5,
                inset 10px -60px 50px #dff1c8,
                inset 0 20px 40px #f9f6de,
                0 0 40px #fff;
                /*执行动画：动画名 时长 加速后减速，无限循环*/
                animation: qtpaopao4 4s ease-in-out infinite;
        }
        .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: qtyinying4 4s ease-in-out infinite
        }
        /*定义动画*/
        /*泡泡浮动动画*/
        @keyframes qtpaopao4{
            0%,100%{
                transform: translateY(0);
            }
            55%{
                transform: translateY(-80px);
            }
        }
        @keyframes qtyinying4{
            0%,100%{
                transform: scale(0.5);
            }
            55%{
                transform: scale(1);
            }
        }

        .qitabigbox5{
            margin: -80px 0 0 400px;
            width: 150px;
            height: 150px;
            /*相对定位*/
            position: relative;
        }
        .qtpaopao5{
            background-image: url(../泡泡特效/img/1.jpg);
            background-size: 120% 100%;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 75% 30%,#fff 5px,#f8b806 8%
            #5b5b5b 60%,#ff7221 100%);
            border-radius: 50%;
            /*阴影*/
            box-shadow:
                inset 0 0 10px #fff,
                inset -10px -20px 30px #bd5ec5,
                inset 10px -60px 50px #dff1c8,
                inset 0 20px 40px #f9f6de,
                0 0 40px #fff;
                /*执行动画：动画名 时长 加速后减速，无限循环*/
                animation: qtpaopao5 4s ease-in-out infinite;
        }
        .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: qtyinying5 4s ease-in-out infinite
        }
        /*定义动画*/
        /*泡泡浮动动画*/
        @keyframes qtpaopao5{
            0%,100%{
                transform: translateY(0);
            }
            50%{
                transform: translateY(-80px);
            }
        }
        @keyframes qtyinying5{
            0%,100%{
                transform: scale(0.5);
            }
            50%{
                transform: scale(1);
            }
        }
        
        .qitabigbox6{
            margin: -600px 0 0 1200px;
            width: 150px;
            height: 150px;
            /*相对定位*/
            position: relative;
        }
        .qtpaopao6{
            background-image: url(../泡泡特效/img/1.jpg);
            background-size: 120% 100%;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 75% 30%,#fff 5px,#f8b806 8%
            #5b5b5b 60%,#ff7221 100%);
            border-radius: 50%;
            /*阴影*/
            box-shadow:
                inset 0 0 10px #fff,
                inset -10px -20px 30px #5ec563,
                inset 10px -60px 50px #dff1c8,
                inset 0 20px 40px #f9f6de,
                0 0 40px #fff;
                /*执行动画：动画名 时长 加速后减速，无限循环*/
                animation: qtpaopao6 4s ease-in-out infinite;
        }
        .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: qtyinying6 4s ease-in-out infinite
        }
        /*定义动画*/
        /*泡泡浮动动画*/
        @keyframes qtpaopao6{
            0%,100%{
                transform: translateY(0);
            }
            35%{
                transform: translateY(-80px);
            }
        }
        @keyframes qtyinying6{
            0%,100%{
                transform: scale(0.5);
            }
            35%{
                transform: scale(1);
            }
        }

        .qitabigbox7{
            margin: -300px 0 0 600px;
            width: 250px;
            height: 250px;
            /*相对定位*/
            position: relative;
        }
        .qtpaopao7{
            background-image: url(../泡泡特效/img/1.jpg);
            background-size: 120% 100%;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 75% 30%,#fff 5px,#f8b806 8%
            #5b5b5b 60%,#ff7221 100%);
            border-radius: 50%;
            /*阴影*/
            box-shadow:
                inset 0 0 10px #fff,
                inset -10px -20px 30px #c55e5e,
                inset 10px -60px 50px #dff1c8,
                inset 0 20px 40px #f9f6de,
                0 0 40px #fff;
                /*执行动画：动画名 时长 加速后减速，无限循环*/
                animation: qtpaopao7 4s ease-in-out infinite;
        }
        .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: qtyinying7 4s ease-in-out infinite
        }
        /*定义动画*/
        /*泡泡浮动动画*/
        @keyframes qtpaopao7{
            0%,100%{
                transform: translateY(0);
            }
            50%{
                transform: translateY(-80px);
            }
        }
        @keyframes qtyinying7{
            0%,100%{
                transform: scale(0.5);
            }
            50%{
                transform: scale(1);
            }
        }

        .qitabigbox8{
            margin: 400px 0 0 650px;
            width: 100px;
            height: 100px;
            /*相对定位*/
            position: relative;
        }
        .qtpaopao8{
            background-image: url(../泡泡特效/img/1.jpg);
            background-size: 120% 100%;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 75% 30%,#fff 5px,#f8b806 8%
            #5b5b5b 60%,#ff7221 100%);
            border-radius: 50%;
            /*阴影*/
            box-shadow:
                inset 0 0 10px #fff,
                inset -10px -20px 30px #8ce6d3,
                inset 10px -60px 50px #dff1c8,
                inset 0 20px 40px #f9f6de,
                0 0 40px #fff;
                /*执行动画：动画名 时长 加速后减速，无限循环*/
                animation: qtpaopao8 4s ease-in-out infinite;
        }
        .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: qtyinying8 4s ease-in-out infinite
        }
        /*定义动画*/
        /*泡泡浮动动画*/
        @keyframes qtpaopao8{
            0%,100%{
                transform: translateY(0);
            }
            50%{
                transform: translateY(-80px);
            }
        }
        @keyframes qtyinying8{
            0%,100%{
                transform: scale(0.5);
            }
            50%{
                transform: scale(1);
            }
        }

    </style>
</head>
<body>
    <div class="zhongjian1">
        <div class="zhongjianbigbox">
            <div class="zhongjianpaopao"></div>
            <div class="zhongjianyinying"></div>
        </div>
        <div class="zuoshangbigbox">
            <div class="zuoshangpaopao"></div>
            <div class="zuoshangyinying"></div>
        </div>
        <div class="youshangbigbox">
            <div class="youshangpaopao"></div>
            <div class="youshangyinying"></div>
        </div>
        <div class="qitabigbox1">
            <div class="qtpaopao1"></div>
            <div class="qtyinying1"></div>
        </div>
        <div class="qitabigbox2">
            <div class="qtpaopao2"></div>
            <div class="qtyinying2"></div>
        </div>
        <div class="qitabigbox3">
            <div class="qtpaopao3"></div>
            <div class="qtyinying3"></div>
        </div>
        <div class="qitabigbox4">
            <div class="qtpaopao4"></div>
            <div class="qtyinying4"></div>
        </div>
        <div class="qitabigbox5">
            <div class="qtpaopao5"></div>
            <div class="qtyinying5"></div>
        </div>
        <div class="qitabigbox6">
            <div class="qtpaopao6"></div>
            <div class="qtyinying6"></div>
        </div>
        <div class="qitabigbox7">
            <div class="qtpaopao7"></div>
            <div class="qtyinying7"></div>
        </div>
        <div class="qitabigbox8">
            <div class="qtpaopao8"></div>
            <div class="qtyinying8"></div>
        </div>
    </div>
    
    
</body>
</html>
我相信爱好前端（小特效）的朋友们已经等不及了，这里可以复制粘贴的哦~（如果不嫌弃的话，嘿嘿）当然最好是自己整明白之后写出更棒的（升级版啦~）