模拟抽奖

柔光的暖阳◎ 2022-05-23 12:18 192阅读 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>

发表评论取消回复

表情：

评论列表（有 0 条评论，192人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 转盘抽奖功能，可控制抽奖概率

实现逻辑：思路：首先需要一个转盘，然后需要一个抽奖按钮定位在中间，图片提前设计或者用背景颜色代替（这里用的是图片，然后计算概率），使用css完成转动效果，每次转动完成之后情

刺骨的言语ヽ痛彻心扉/ 2024年03月24日 20:10/ 0 赞/ 66 阅读

相关用python模拟轮盘抽奖游戏

1 问题如何用python程序模拟轮盘抽奖游戏，解决日常问题。问题：轮盘分为三部分: 一等奖,二等奖和三等奖;轮盘转的时候是随机的,如果范围在\[0,0.08)之间,代

冷不防/ 2024年03月17日 17:33/ 0 赞/ 80 阅读

相关随机数抽奖

随机数抽奖效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNz

矫情吗；*/ 2023年06月24日 08:16/ 0 赞/ 8 阅读

相关抽奖资料整理

一、关于介面 1、[原生JS之实现九宫格抽奖效果，从此百分之百中奖不是梦！！！][JS] 了解如何加速、减速，停到中奖位置 ![20190518141309382

淩亂°似流年/ 2022年12月22日 06:13/ 0 赞/ 203 阅读

相关年会抽奖小游戏java_抽奖小游戏

抽奖 /\ 1、要有随机数 2、创建一个数组 3、点击按钮控制 4、先抽一等奖，再抽二等奖，最后是三等奖 5、一点击停止就会把名字从数组中删除掉，并且把名字放到该

缺乏、安全感/ 2022年11月09日 14:14/ 0 赞/ 213 阅读

相关 vue滚动抽奖

视频还在审核中。。。 HTML <template> <div id="app"> <div id="container" class="

怼烎@/ 2022年10月27日 13:55/ 0 赞/ 448 阅读

相关多线程练习：抽奖箱抽奖

package homeworkday11; import java.util.ArrayList; /\第四题：分析以下需求，并用代码实现有一个抽奖池,该抽奖池中存

小咪咪/ 2022年05月31日 01:17/ 0 赞/ 212 阅读

相关模拟抽奖

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

柔光的暖阳◎/ 2022年05月23日 12:18/ 0 赞/ 193 阅读

相关 java——抽奖（根据随机值进行抽奖，根据执行范围进行抽奖）

如题下面上货。需求是这样的，根据不同的概率抽出不同的奖金。例如： 2%的概率为8 3%的概率为5 5%的概率为3 90%的概率为2 package

柔光的暖阳◎/ 2022年05月14日 04:42/ 0 赞/ 206 阅读

相关程序算法之构造法之（体育彩票排列3模拟抽奖程序）

![Center][] [Center]: /images/20210923/6fa9554bcdee4ea8b3957493fca5ef8d.png

快来打我*/ 2021年09月23日 04:18/ 0 赞/ 159 阅读