模拟抽奖

最新推荐文章于 2022-04-09 23:40:04 发布

原创最新推荐文章于 2022-04-09 23:40:04 发布 · 775 阅读

0 ·

CC 4.0 BY-SA版权

css技巧专栏收录该内容

25 篇文章

订阅专栏

本文通过一个具体的实例演示了如何使用HTML和CSS实现图片的动画效果，包括元素定位、透明度变化及动画循环播放等技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>