js/h5/css3鲜花表白的效果图源代码

最新推荐文章于 2024-05-02 09:06:45 发布

陌上红尘三千—前端

最新推荐文章于 2024-05-02 09:06:45 发布

阅读量8.6k

点赞数 5

分类专栏： js 文章标签： js/h5/css3

本文链接：https://blog.csdn.net/rong0914/article/details/82391621

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            background-color: #000;
            margin:0 auto;
        }

        span {
            width: 30px;
            height: 30px;
            background: url("images/flower.gif") no-repeat;
            position: absolute;
            background-size: 100% 100%;
            animation: flash 1s alternate infinite;
        }

        @keyframes flash {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        span:hover{
            transform: scale(3,3) rotate(180deg) !important;
            transition:all  1s;
        }
    </style>

</head>
<body>
/*<!--<span></span>--> */
<script>
    window.onload = function () {
        // 1.求出屏幕的尺寸
        var screenW = document.documentElement.clientWidth;
        var screenH = document.documentElement.clientHeight;
        // console.log(screenW);
        // console.log(screenH);
        // 2.动态创建鲜花
        for (var i = 0; i < 150; i++) {
            // 循环遍历
            var span = document.createElement('span');
            document.body.appendChild(span);
            // 2.2随机坐标
            var x=parseInt(Math.random()*screenW);
            var y=parseInt(Math.random()*screenH);
            console.log(x,y);
            span.style.left=(x)+"px";
            span.style.top=y+"px";
            // 2.3随机缩放
            var scale=Math.random()*1.5;
            span.style.transform='scale('+scale+','+scale+')';
            // 2.4频率
            var rate=Math.random()*1.5;
                span.style.animationDelay=rate+"s";
        }
    }
</script>

</body>
</html>

陌上红尘三千—前端

关注

5
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
js/h5/css3鲜花表白的效果图源代码

&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,
复制链接

扫一扫