首页

JS特效

html5特效

HTML5的模拟手电筒照明效果

一款挺逼真的HTML5模拟手电筒照明效果，HTML5 SVG实现手电筒照射地面光亮特效，光亮跟随鼠标指针移动。

立即下载预览

<头>
<元字符集=“utf-8”>
HTML5模拟手电筒照明效果

<风格>
html, 正文 {
高度：100%；
边距：0；
}
svg {
# 显示：块；
}
</风格>

</头>
<正文>

xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<过滤器 id="轻">

<feGaussianBlur stdDeviation="3" result="模糊"></feGaussianBlur>

<feColorMatrix in="blurred" type="luminanceToAlpha" result="bumpMap"></feColorMatrix>

<fePointLight x="225" y="150" z="30"></fePointLight>
</feDiffuseLighting>

运算符=“算术”
k1=“1” k2=“0” k3=“0” k4=“0”>
</feComposite>
</过滤器>
<模式 id="pattern1"
宽度=“450”高度=“300”
patternUnits="userSpaceOnUse"
>
<图片 xlink:href="img/codepen.jpg"
宽度=“450”高度=“300”
></图片>
</模式>
<矩形宽度=“100%”高度=“100%”
填充=“url（#pattern1）”过滤器=“url（#light）”
></直>
</svg>

<脚本>
const svgNode = document.querySelector('svg');
const fePointLightNode = svgNode.querySelector('fePointLight');
svgNode.addEventListener('mousemove',handleMove);
svgNode.addEventListener('touchmove',handleMove);
函数handleMove(事件) {
fePointLightNode.setAttribute('x', event.clientX);
fePointLightNode.setAttribute('y', event.clientY);
}
</脚本>

</body>

免责声明

本站所有资源均由网友贡献或各大下载网站转载。请自行检查软件的完整性！本站所有资源仅供学习参考。请不要将它们用于商业目的。否则，一切后果由您负责！如有侵权，请联系我们删除。联系方式：admin@php.cn

关于css3的详细介绍

15 Jun 2017

基于HTML5的应用现在已经非常广泛，今天我们就来向大家分享20款非常绚丽的HTML5/CSS3应用插件。希望大家喜欢并分享给你的好友们。1、HTML5视频破碎重组特效强大视觉冲击HTML5视频播放器很多，但是HTML5视频特效还是很少见的，这款HTML5视频破碎重组特效非常刺激，给人强大的视觉冲击。点击视频任意地方，HTML5将会将这些区域击碎，过一段时间，这些被击碎的视频碎片又将自动重新组合...