js完成色彩闪灼结果

2024年5月12日 130次阅读 来源: info

定时器掌握背景色或许透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>色彩闪缩</title>
    <script src="./jquery-3.3.1.js"> </script>
</head>
<body>
<div id="color_flash">
    <div class="lit_slashNum" style="width: 5px;height: 5px;border-radius: 5px;transition: all 0.5s; background-color: #0165bb;-moz-box-shadow:0px 0px 10px 2px #0165bb; -webkit-box-shadow:0px 0px 10px 2px #0165bb; box-shadow:0px 0px 10px 2px #0165bb;"></div>
</div>


</body>
<script>
    setInterval(changeColor,500);

    //js
    var colorFlag = 0;
    function changeColor() {
        let lit_slashNum = document.querySelector(".lit_slashNum");
        if (!colorFlag)
        {
            lit_slashNum.style.backgroundColor = '#0165bb';
            lit_slashNum.style.boxShadow = '0px 0px 10px 2px #0165bb';
            colorFlag = 1;
        }else{
            lit_slashNum.style.backgroundColor = '';
            lit_slashNum.style.boxShadow = '';
            colorFlag = 0;
        }
    }

    //jq
    function litSlash(){
        $(".lit_slashNum").animate(
            {opacity:"0"},250); //转变透明度
        $(".lit_slashNum").animate(
            {opacity:"1"},500);
    }
</script>
</html>

codepen

    原文作者：info
    原文地址: https://segmentfault.com/a/1190000019283853
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞