情人节——微信朋友圈浓浓爱意的9张拼图（HTML版本）-CFANZ编程社区

情人节——微信朋友圈浓浓爱意的9张拼图（HTML版本）

最终效果：

情人节——微信朋友圈浓浓爱意的9张拼图（HTML版本）_html

这个背景图片

图片地址：【https://s4.51cto.com/images/blog/202202/16030804_620bfa1444b3630251.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=】

情人节——微信朋友圈浓浓爱意的9张拼图（HTML版本）_背景图片_02

情人节——微信朋友圈浓浓爱意的9张拼图（HTML版本）_背景图片_03

组合效果：

情人节——微信朋友圈浓浓爱意的9张拼图（HTML版本）_d3_04

完整编码：

<!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>Document</title>
</head>

<body>
    <style>
        * {
            margin: 0px auto;
            padding: 0px;
        }
        
        #box {
            width: 900px;
            height: 900px;
            background-image: url('https://s4.51cto.com/images/blog/202202/16030804_620bfa1444b3630251.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            box-shadow: 15px 15px 15px 15px white inset;
            border-radius: 50px;
        }
        
        #img {
            width: 290px;
            height: 290px;
            text-align: center;
            position: relative;
            top: 35%;
            border-radius: 50px;
            will-change: scale;
            animation: BigShow 1s infinite;
        }
        
        #img img {
            width: 95%;
            height: 95%;
            border-radius: 50px;
        }
        
        @keyframes BigShow {
            100% {
                transform-origin: center;
                transform: scale(1.01, 1.01);
            }
            90% {
                transform-origin: center;
                transform: scale(1.02, 1.02);
            }
            80% {
                transform-origin: center;
                transform: scale(1.03, 1.04);
            }
            70% {
                transform-origin: center;
                transform: scale(1.05, 1.05);
            }
            60% {
                transform-origin: center;
                transform: scale(1.06, 1.06);
            }
            50% {
                transform-origin: center;
                transform: scale(1.07, 1.07);
            }
            40% {
                transform-origin: center;
                transform: scale(1.08, 1.08);
            }
            30% {
                transform-origin: center;
                transform: scale(1.09, 1.09);
            }
            20% {
                transform-origin: center;
                transform: scale(1.10, 1.10);
            }
            10% {
                transform-origin: center;
                transform: scale(1.11, 1.11);
            }
            0% {
                transform-origin: center;
                transform: scale(1.0, 1.0);
            }
        }
    </style>
    <div id="box">
        <div id="img">
            <img src="https://s4.51cto.com/images/blog/202202/16030804_620bfa148d3a828218.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=" title="love" alt="爱你的boby">
        </div>
    </div>
</body>

</html>

0 条评论