手电筒小动画

Alan Lu Pop

已于 2023-05-23 06:50:09 修改

阅读量78

点赞数

分类专栏： HTML 文章标签： css html javascript

于 2023-05-21 19:14:36 首次发布

本文链接：https://blog.csdn.net/paopao_pop/article/details/130795320

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

原生实现一个手电筒小动画

效果如下

实现代码

<!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>手电筒</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            justify-content: center;
        }

        .box {
            width: 270px;
            background: radial-gradient(circle 50px at 50px 50px,
                    rgba(0, 0, 0, 1),
                    rgba(0, 0, 0, 1));
            cursor: url("../images/手电筒-迅捷PDF转换器.ico"), auto;
        }
    </style>
</head>

<body>
    <div class="box" id="box">
        标题：加班之歌

        夜幕笼罩整个城市，
        灯火通明不曾熄息，
        忙碌的身影在路上匆匆，
        每天如此，仿佛习以为常。

        繁忙的工作总是未完未了，
        只能咬紧牙关熬过这一秒，
        时间慢慢地流逝，仿佛永远不止，
        身心被摧残得越来越差。

        朦胧的眼眶里藏着困倦，
        手脚无力动弹这真情，
        人们抱怨这种生活情形，
        却又陷入重复的循环中。

        疲惫的身躯在劳累中颤抖，
        心灵深处充斥着虚空和孤独，
        再多的金钱也无法填补，
        那些失去的时光和美好。

        加班如此荒唐，是否应该停止这样？
        让我们勇敢地说出心底的声音，
        反对这种不合理的现象，
        呼吁一个更加健康的工作环境。

        让我们来彻底改变这种状态，
        不要把时间浪费在没有意义的事情上，
        珍惜每一刻，享受生命的美好，
        让我们共同追求幸福的生活。
    </div>
</body>

<script>
    const lBox = document.querySelector(".box");
    let x, y;
    let circle = 50;
    let flag = false;

    const init = () => {
        lBox.onmousemove = lBoxMousemove;
        lBox.onmousewheel = lBoxMousewheel;
        lBox.onclick = lBoxClick;
    };

    const lBoxMousemove = (e) => {
        const offsetHeight = e.target.offsetHeight;
        const offsetWidth = e.target.offsetWidth;
        const offsetX = e.offsetX;
        const offsetY = e.offsetY;
        x = offsetX;
        y = offsetY;
        e.target.style.backgroundImage = isLight();
    };

    const lBoxMousewheel = (e) => {
        if (e.wheelDelta > 0) {
            circle++;
        } else {
            circle--;
        };
        e.target.style.backgroundImage = isLight();
    }

    const lBoxClick = (e) => {
        flag = !flag
        e.target.style.backgroundImage = isLight();
    }

    const isLight = () => {
        return `radial-gradient(circle ${circle}px at ${x}px ${y}px,
                    rgba(0, 0, 0, ${flag ? 0 : 1}),
                    rgba(0, 0, 0, 1))`
    }

    init();

</script>

</html>

这是优化以后的效果