程序员的浪漫之爱心（Css3）小动画

朴灿烈づ我的快乐病毒、 2024-04-17 15:09 72阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
           * {
               padding: 0;
               margin: 0;
           }
           .boss {
               width: 800px;
               height: 800px;
           }
           .dv {
               animation: animation1 1.5S infinite;
           }
           .div {
               top: 30%;
               width: 300px;
               height: 300px;
               position: absolute;
               left: 20%;
           }
           .d1 ,.d2,.d3  {
               position: absolute;
               width: 64%;
               height: 64%;
               background: #E88D8D;
           }
           .d1 ,.d2 {
               border-radius: 50%;
           }
           .d1 {
            left: 0;
           }
           .d2 {
            right: 0;
           }
           .d3 {
                width: 56%;
                height: 56%;
                bottom: 16%;
                left: 50%;
                transform: translateX(-50%)rotate(45deg);
                z-index: 1;
           }
           .d3 h4 {
               width: 100%;
               height: 100%;
               z-index: 999;
               font-size: 12px;
               color: #E88D8D;
           }
           .pink {
               color: #E88D8D;
               animation: pink 2S forwards ;
           }
           @keyframes pink {
                0%  {color: #E88D8D}
                100% {color: #fff;}
           }
            @keyframes animation1 {
                0% {
                    width: 300px;
                    height: 300px;
                    top: 30%;
                    opacity: 1;
                    left: 20%;
                }
                100%{
                    width: 500px;
                    height: 500px;
                    top: 20%;
                    opacity: 0;
                    left: 15%;
                }
            }
    
            .animation2 {
                animation: animation2 2S forwards ;
                z-index: 999;
                /* transform: scale(1.3); */
            }
            .animation3 {
                animation: animation3 2S forwards ;
                z-index: 999;
            }
           @keyframes animation2 {
                0%  {transform: scale(1);}
                100% {transform: scale(6);}
           }
           @keyframes animation3 {
                0%  {transform: scale(6);}
                100% {transform: scale(1);}
           }
        </style>
    </head>
    <body>
            <div class="boss">
                <div class="div dv">
                    <div class="d1"></div>
                    <div class="d3"></div>
                    <div class="d2"></div>
                </div>
                <div class="div" id="dv">
                    <div class="d1"></div>
                    <div class="d3"><h4 id="h4">I LOVE YOU ! :)<br > My mather and father :)</h4></div>
                    <div class="d2"></div>
                </div>
            </div>
        <script>
            window.onload = function(argument) {
                var dv = document.querySelector('#dv');
                var h4 = document.querySelector('#h4');
                var qq = true;
                dv.addEventListener('click',function () {
                   if(qq){
                    qq = false;
                    dv.className = 'div animation2'
                    h4.className = 'pink'
                    console.log(qq);
                   }else {
                    qq = true;
                    dv.className = 'div animation3'
                    console.log(qq);
                   }
                })
            }
        </script>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hsNDI3Nw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hsNDI3Nw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/91ae899974a54debb78775b15e766c78.png