圆盘闪烁效果

秒速五厘米 2022-05-30 02:40 207阅读 0赞

效果图  
![圆盘闪烁][70]

html代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <style> .lottery { position: relative; width: 400px; height: 400px; border-radius:50%; background: #B7E4F9; } .dot { position: absolute; left: 50%; top:50%; width: 20px; height: 20px; margin-left:-10px; margin-top: -10px; border-radius: 50%; background: #FFEC7E; } .glitter { background: #fff; } </style>
    <body>
    <script> (function(){ var body = document.body var divLottery = document.createElement('div'); var counter = 0; divLottery.className = "lottery"; createDot(12); body.appendChild(divLottery); //创建小圆点 function createDot(n){ if(n%2!==0) throw new Error("n必须是正偶数") for(var i=0;i<n;i++){ var span = document.createElement('span'); span.className = 'dot '+ 'dot'+i; span.style.transform = `rotate(${ 360/n*i}deg) translateY(-170px)`; divLottery.appendChild(span); } } //小圆点闪烁 function glitter(n){ var even = document.querySelectorAll(`.dot:nth-child(2n)`); var odd = document.querySelectorAll(`.dot:nth-child(2n+1)`); if(n%2==0){ even.forEach(function(val){ val.classList.add('glitter'); }) odd.forEach(function(val){ val.classList.remove('glitter'); }) }else{ odd.forEach(function(val){ val.classList.add('glitter'); }) even.forEach(function(val){ val.classList.remove('glitter'); }) } } setInterval(function () { glitter(counter); counter++; }, 500); })() </script>
    </body>
    </html>

[70]: /images/20220530/73eb32892c1a4d3088176eb9ebff74a5.png

发表评论取消回复

表情：

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

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

相关阅读

相关百度地图点闪烁效果实现

*效果图：** ![20190831124305728.jpg][]![20190831124318362.jpg][] **完整代码，放到html文件直接运行即可：...

谁践踏了优雅/ 2024年04月17日 20:15/ 0 赞/ 55 阅读

相关 android中的字体闪烁效果和跑马灯效果

![Center][] 代码：MainActivity package com.wsj.textviewdmeo; import java.uti

Dear 丶/ 2024年02月17日 17:29/ 0 赞/ 2 阅读

相关利用html实现文字闪烁的效果代码

利用html实现文字闪烁的效果代码单个元素设置闪烁效果多个元素设置闪烁效果网页中使文字闪烁的标签是什么，其实没有html标签可以直接让文

骑猪看日落/ 2022年11月07日 11:58/ 0 赞/ 181 阅读

相关 (轉)Winform控件无闪烁走马灯效果

本文轉自: [http://www.cnblogs.com/star65225692/archive/2008/04/03/1136390.html][http_www.cnb

清疚/ 2022年08月26日 08:39/ 0 赞/ 190 阅读

相关 css3之animation制作闪烁文字效果

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

妖狐艹你老母/ 2022年07月16日 05:48/ 0 赞/ 213 阅读

相关开启和关闭按钮闪烁效果代码

在Android系统中，系统按钮没有控制闪烁的方法，我们可借用AlphaAnimation来自己实现，对于有些需要提示用户点击的地方，闪烁按钮是一个不错的方法。一、开启和关

矫情吗；*/ 2022年06月03日 02:46/ 0 赞/ 313 阅读

相关圆盘闪烁效果

效果图 ![圆盘闪烁][70] html代码 <!DOCTYPE html> <html lang="en"> <head>

秒速五厘米/ 2022年05月30日 02:40/ 0 赞/ 208 阅读

相关 Android代码实现控件闪烁效果

> 代码地址如下： > [http://www.demodashi.com/demo/13162.html][http_www.demodashi.com_demo_131

你的名字/ 2022年05月12日 06:36/ 0 赞/ 360 阅读

相关箭头跳动动画效果和圆盘动画效果

手机端的交互体验越来越重要，因为好的体验能吸引用户的使用，提高用户的愉悦感；本文主要实现两个交互体验：箭头跳动动画效果，就是箭头一直有一个往下的动画，吸引用户下拉操作；

柔情只为你懂/ 2022年02月22日 14:52/ 0 赞/ 380 阅读

相关 H5使用canvas实现星星闪烁效果

html \[html\] [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE]

清疚/ 2021年09月11日 06:12/ 0 赞/ 955 阅读