JSHTMLCSS实现双色球抽奖

最新推荐文章于 2023-02-23 14:31:58 发布

五年信安大神

最新推荐文章于 2023-02-23 14:31:58 发布

阅读量1.2k

点赞数 1

文章标签：前端 css html

本文链接：https://blog.csdn.net/qq_40200829/article/details/125473304

版权

效果还不错，需要的同志们自取

抽中会有动态效果，模拟双色球的抽取源代码

在这里插入图片描述


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .evendoll {
     
            width: 1000px;
            height: 400px;
            border-radius: 200px;
            margin: 0 auto;
            background-image: linear-gradient(-135deg, #fff 15px, #162e48 0);
            display: flex;
            text-align: center;
            justify-content: space-around;
            align-items: center;
            font-size: 50px;
            font-weight: 500;
        }
        
        .evendoll .doll {
     
            background-color: white;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            line-height: 100px;
            color: white;
            background-color: red;
        }
        
        .evendoll .doll:last-child {
     
            background-color: blue;
        }
        
        .prizetext {
     
            width: 1000px;
            height: 50px;
            font-size: 25px;
            background-image: linear-gradient(-135deg, #fff 15px, #162e48 0);
            color: white;
            margin: 0 auto;
            text-align: center;
            border: 1px white solid;
            line-height: 50px;
            line-height: 50px;
            border-radius: 50px;
        }
        
        .prizetext111 {
     
            position: relative;
            top: 100px;
            width: 500px;
            height: 50px;
            font-size: 25px;
            background-image: linear-gradient(-135deg, #fff 15px