使用css3功能创建大的转盘绘制（转盘点闪烁特殊效果）

我看到很多大转盘抽签，h5转盘网页抽奖制作，并且该磁盘周围的小点都没有效果. 今天，我只是想在闲暇时写一个简单的闪烁效果.

使用css3的变换原点: 模拟圆的半径控制圆的大小.

的另一种切换: 以百分比形式控制colortoggle转盘网页抽奖制作，使其实现两种状态的切换，其中50％是以前的一种状态，而50％是另一种状态.

应用colortoggle: 使用css3: nth-​​child（）选择器，该选择器支持使用公式选择，以便轻松选择备用元素，然后将元素的延迟时间设置为两种不同的状态. 这两个的延迟时间是第一个的延迟时间的1/2，因此它们都可以无休止地循环播放.

最后，以疯狂的方式复制每个小点，并旋转指定角度以形成一个圆.

预览

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        body,html{
            width: 100%;
            height: 100%;
        }
        .spot-box{
            position: relative;
            left: 50%;
            top:50%;
            transform: translate(-50%,-50%);
        }
        .spot-box div{
            height: 10px;
            width: 10px;
            margin: 20px;
            border: 3px #FFC107 solid;
            border-radius: 10px;
            position: absolute;
            transform-origin: 400px 0;
            box-shadow: 0px 2px 2px #9e9e9e;
        }
        .spot-box div:nth-child(2n+0)
        {
            -webkit-animation: colortoggle 1.4s ease both 0s infinite;
        }
        .spot-box div:nth-child(2n+1)
        {
            -webkit-animation: colortoggle 1.4s ease both .7s infinite;
        }
        @keyframes colortoggle{
            0%{
                background: none;
            }
            1%{
                background: #FFC107;
            }
            50%{
                background: #FFC107;
            }
            51%{
                background: none;
            }
            100%{
                background: none;
            }
        }
        .spot-box div:nth-child(1){transform: rotate(10deg);}
        .spot-box div:nth-child(2){transform: rotate(20deg);}
        .spot-box div:nth-child(3){transform: rotate(30deg);}
        .spot-box div:nth-child(4){transform: rotate(40deg);}
        .spot-box div:nth-child(5){transform: rotate(50deg);}
        .spot-box div:nth-child(6){transform: rotate(60deg);}
        .spot-box div:nth-child(7){transform: rotate(70deg);}
        .spot-box div:nth-child(8){transform: rotate(80deg);}
        .spot-box div:nth-child(9){transform: rotate(90deg);}
        .spot-box div:nth-child(10){transform: rotate(100deg);}
        .spot-box div:nth-child(11){transform: rotate(110deg);}
        .spot-box div:nth-child(12){transform: rotate(120deg);}
        .spot-box div:nth-child(13){transform: rotate(130deg);}
        .spot-box div:nth-child(14){transform: rotate(140deg);}
        .spot-box div:nth-child(15){transform: rotate(150deg);}
        .spot-box div:nth-child(16){transform: rotate(160deg);}
        .spot-box div:nth-child(17){transform: rotate(170deg);}
        .spot-box div:nth-child(18){transform: rotate(180deg);}
        .spot-box div:nth-child(19){transform: rotate(190deg);}
        .spot-box div:nth-child(20){transform: rotate(200deg);}
        .spot-box div:nth-child(21){transform: rotate(210deg);}
        .spot-box div:nth-child(22){transform: rotate(220deg);}
        .spot-box div:nth-child(23){transform: rotate(230deg);}
        .spot-box div:nth-child(24){transform: rotate(240deg);}
        .spot-box div:nth-child(25){transform: rotate(250deg);}
        .spot-box div:nth-child(26){transform: rotate(260deg);}
        .spot-box div:nth-child(27){transform: rotate(270deg);}
        .spot-box div:nth-child(28){transform: rotate(280deg);}
        .spot-box div:nth-child(29){transform: rotate(290deg);}
        .spot-box div:nth-child(30){transform: rotate(300deg);}
        .spot-box div:nth-child(31){transform: rotate(310deg);}
        .spot-box div:nth-child(32){transform: rotate(320deg);}
        .spot-box div:nth-child(33){transform: rotate(330deg);}
        .spot-box div:nth-child(34){transform: rotate(340deg);}
        .spot-box div:nth-child(35){transform: rotate(350deg);}
    </style>
</head>
<body>
    <div class="spot-box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

image.png

image.png

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/ruanjian/article-201377-1.html