动态视觉效果：手电筒交互与前端CSS3 clip-path应用-优快云博客

完整代码

<!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>
        body{
            width: 100vw;
            height: 100vh;
            background-color: black;
            padding: 0;
            margin: 0;
        }
        div{
            width: 100%;
            height: 100%;
            background-image: url('./01.jpg');
            background-size: cover;

            /* clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏 */
            clip-path: circle(0 at 0 0);
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        const div = document.querySelector('div');
        //event对象代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等
        document.addEventListener('mousemove',function(event){
            let {clientX,clientY} = event;
            const sdt = `circle(200px at ${clientX}px ${clientY}px)`;
            div.style['clip-path'] = sdt;
        })
    </script>
</body>
</html>

扩展ES6小知识

//es6的解构赋值中的对象解构
const dsb = {
    name:'大帅比',
    age:'20',
    call:function(){
        console.log('我是大帅比');
    }
}
const {name,age,call} = dsb;
console.log(name,age);  //输出  大帅比 20
call(); //这里可以直接调用
//如果这方法没使用使用解构赋值就需要 dsb.call()这样调用。

//简单的字符串拼接
let a = '我是';
let b = a + '大帅比'

//es6模板字符串中变量拼接,必须要用``,然后${}里面放js变量
let a = '我是';
let b = `${a}大帅比`;

手电筒查看效果

完整代码

扩展ES6小知识