今天看到个特效,很炫酷,特此记录一下
主要的实现思路:
- 设置背景的径向渐变(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>
网友评论