js+css3的卡牌抽奖特效动画

最新推荐文章于 2024-07-24 11:08:27 发布

no bug no life

最新推荐文章于 2024-07-24 11:08:27 发布

阅读量2.6k

点赞数

文章标签： javascript css3

本文链接：https://blog.youkuaiyun.com/weixin_51364599/article/details/114396716

版权

本文介绍了如何结合javascript和css3来创建一个卡牌抽奖的特效动画，包括项目结构的解析，如index.html、people.js、index.js、gender_picture.js和animate.js的各自功能，以及完整代码资源的下载链接。

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

项目结构：
在这里插入图片描述
index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lucky draw</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/music.css">
</head>

<body>
    <!-- 输入框区域 -->
    <div style="text-align: center; margin-top: 1rem;">
        <label class="label-3" for="remain"></label><input id="remain" type="text" readonly/>
    </div>
    <div style="text-align: center; margin-top: 1rem;">
        <label class="label-1" for="input-awards"></label><input id="input-awards" type="text" />
        <label class="label-2" for="num"></label><input id="num" min="1" value="1" type="number" />
    </div>
    

    <!-- 牌堆 -->
    <i id="pukedui" class="puke pukedui origin" style="position: fixed;right: 0;top: calc(50% - 10rem);z-index: 1000;">
        <div class="start-text">Start</div>
    </i>
    <!-- 发牌区域 -->
    <div class="wrap"></div>

    <!-- 播放器 -->
    <div class="player-wrap">
        <div class="circle" id="outBtn"><span id="spanImg">open</span></div>
        <div class="player">
            <div class="controler">
                <audio src="./music/xiangshui.mp3" id="audioObj"></audio>
                <a href="javascript:" class="btn prev" id="prev"><span>prev</span></a>
                <div class="play-wrap">
                    <div class="picture"></div>
                    <a href="##" class="play" id="play">播放</a>
                </div>
                <a href="##" class="btn next" id="next">

最低0.47元/天解锁文章