jQuery 实现萤火虫效果

最新推荐文章于 2023-02-23 09:57:55 发布

代码小迷弟

最新推荐文章于 2023-02-23 09:57:55 发布

阅读量504

点赞数

文章标签： jquery css html5

本文链接：https://blog.csdn.net/lzc147258/article/details/120300849

版权

<!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">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <title>萤火虫动态按钮</title>
</head>
<style>
    @font-face {
        font-family: 'firefly';
        src: url(ZCOOLKuaiLe-Regular.ttf);
    }
    * {
        padding: 0;
        margin: 0;
    }
    body {
        height: 100vh;
        background: url(yh.bmp) no-repeat;
        background-size: cover;
    }
    ul {
        list-style: none;
    }
    button {
        outline: none;
        border: none;
    }
    .firefly {
        width: 180px;
        height: 60px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: linear-gradient(to right, #6EB46E 10%, #55B455);
        border-radius: 40px;
        opacity: .88;
        cursor: pointer;
        transition: 1s;
    }
    .firefly:hover {
        box-shadow: 0 0 10px #B4FFB4;
    }
    .firefly p {
        line-height: 60px;
        font-size: 22px;
        color: #F5DD8F;
        font-family: firefly;
        opacity: .88;
    }
    .lightning {
        width: 95%;
        height: 80%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 40px;
        transition: .8s;
        overflow: hidden;
    }
    .firefly:hover .lightning {
        box-shadow: 0 0 4px #B4FFB4 inset;
    }
    .lightning ul {
        opacity: 0;
        transition: .8s;
    }
    .firefly:hover ul {
        opacity: .8;
    }
    .lightning ul li {
        width: 5px;
        height: 5px;
        background-color: #91FA91;
        position: absolute;
        bottom: 10%;
        border-radius: 50%;
        opacity: .6;
        animation: fireflymove infinite linear;
    }
    @keyframes fireflymove {
        100% {
            bottom: 100%;
        }
    }
</style>
<body>
    <button class="firefly">
        <p>萤火虫</p>
        <div class="lightning">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </button>
</body>
<script>
    var lgh = $('.lightning li').length;
    console.log(lgh)

    $('.lightning li').each(function(i) {
        $(this).css({
            left: i * (100/lgh) + '%',
            bottom: randomNum(-20, 10) + '%',
            animationDuration: randomNum(1, 5) + 's'
        });
    });

    function randomNum(max, min) {
        var num = Math.floor(Math.random() * (max-min+1) + min);
        return num;
    }

</script>
</html>

代码小迷弟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 实现萤火虫效果

<!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"> <script src=.
复制链接

扫一扫