管中窥豹

作者: pengtoxen | 来源:发表于2019-04-28 16:28 被阅读0次

管中窥豹
管中窥豹
管中窥豹
管中窥豹
管中窥豹
管中窥豹
管中窥豹
管中窥豹
豹纹
管中窥豹麦当劳

今天看到个特效,很炫酷,特此记录一下
主要的实现思路:

设置背景的径向渐变(radial-gradient)
每当鼠标拖动或者手势拖动的时候,改变初始div的中心位置
现在问题来了,radial-gradient是什么东西?

先来看mdn的定义

径向渐变(Radial gradients)由其中心点、边缘形状轮廓及位置、色值结束点（color stops）定义而成。径向渐变的中心点至边缘形状以及其延伸的部分，由连续缩放的若干同心轮廓组成，这个轮廓由设定的边缘形状决定。色值结束点用于设定虚拟渐变射线（virtual gradient ray）的变化方式，由中心点水平变化至右侧（如图）。色值结束点由百分比设定时，则是相对于终点为渐变射线与边缘形状相交点的渐变半径，渐变半径的终点位置即为100%。每个轮廓均为纯色，颜色由渐变射线上相应横切点所定义的颜色决定。

是不是看起来头大,总结一下就是以某个中心点为基准的一个区域内,从内往外颜色渐变.这个中心点是根据鼠标拖动或者手势拖动动态变更.

这里需要注意color-stop这个属性,这个属性值包含一个颜色值和一个位置值.
颜色值可以是符合规范的css颜色,位置值可以是百分比,也可以是数值,例如20px
位置值的作用就是让颜色过度的时候不会那么突然,有个缓冲的效果.

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>spot</title>
    <style>
        body {
            background: url(http://img17.3lian.com/d/file/201702/10/18da8132366a86a162462f10240339c8.jpg) no-repeat center;
            background-size: cover;
            height: 100vh;
            cursor: none;
            margin: 0;
        }

        h1 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
            font-family: "Roboto", Arial, sans-serif;
            font-size: calc(20px + 2vw);
            font-weight: 700;
            color: #fafafa;
            text-shadow: 2px 2px 2px #000;
            pointer-events: none;
            user-select: none;
            white-space: nowrap;
        }

        .spotlight {
            position: absolute;
            height: 100%;
            width: 100%;
            background-image: radial-gradient(circle,
                transparent 160px,
                rgba(0, 0, 0, 0.85) 200px);
        }
    </style>

</head>

<body>
    <h1>左键点击</h1>
    <div class="spotlight"></div>
    <script>
        //DOM load event
        window.addEventListener("DOMContentLoaded", () => {

            const spotlight = document.querySelector('.spotlight');

            let spotlightSize = 'transparent 160px, rgba(0, 0, 0, 0.85) 200px)';

            window.addEventListener('mousemove', e => updateSpotlight(e));

            window.addEventListener('mousedown', e => {

                spotlightSize = 'transparent 130px, rgba(0, 0, 0, 0.95) 150px)';

                updateSpotlight(e);

            });

            window.addEventListener('mouseup', e => {

                spotlightSize = 'transparent 160px, rgba(0, 0, 0, 0.85) 200px)';

                updateSpotlight(e);

            });


            window.addEventListener('touchmove', e => {

                spotlightSize = 'transparent 160px, rgba(0, 0, 0, 0.85) 200px)';

                updateSpotlight(e.touches[0]);

            });

            function updateSpotlight(e) {

                spotlight.style.backgroundImage = `radial-gradient(circle at ${e.pageX / window.innerWidth * 100}% ${e.pageY / window.innerHeight * 100}%, ${spotlightSize}`;

            }
        });
    </script>
</body>

</html>