模拟抽奖

最新推荐文章于 2022-05-18 15:59:39 发布

Albert_Tiger

最新推荐文章于 2022-05-18 15:59:39 发布

阅读量702

点赞数

分类专栏： css技巧

本文链接：https://blog.csdn.net/qq_35425276/article/details/80624691

版权

css技巧专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .box {
        position: relative;
        width: 800px;
        height: 600px;
        margin: 100px auto;
        border: 2px solid crimson;
    }

    .box img {
        position: absolute;
        width: 760px;
        height: 550px;
        left: 50%;
        margin-left: -360px;
    }

    .boxLeft,
    .boxRight {
        opacity: 0;
    }

    .box-moving .boxRight {
        animation: animate3 0.5s linear infinite 0.25s;
    }

    .box-moving .boxLeft {
        border: 1px solid;
        animation: animate2 0.5s linear infinite;
    }

    @keyframes animate1 {
        0% {}
        100% {
            opacity: 1;
        }
    }

    @keyframes animate2 {
        0% {}
        50% {
            opacity: 1;
        }
        100% {}
    }

    @keyframes animate3 {
        0% {}
        50% {
            opacity: 1;
        }
        100% {}
    }
</style>

<body>
    <div class="box">
        <img src="images/box.png" class="boxImg" alt="">
        <img src="images/boxLeft.png" class="boxLeft" alt="">
        <img src="images/boxRight.png" class="boxRight" alt="">
    </div>
    <button>开始</button>
    <script>
        document.querySelector('button').onclick = function() {
            document.querySelector('.box').className += ' box-moving'
        }
    </script>
</body>

</html>

Albert_Tiger

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模拟抽奖

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt;&lt;/head&gt;&lt;style&gt; .box {
复制链接

扫一扫