CSS3 图片扫光/辉光

扫光的原理主要是在图片上增加一层，用作扫光，然后添加背景颜色并倾斜一定的角度。动画是左右移动，因此就形成了扫光效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>流光/扫光效果</title>
<style>
:root {--stream-effect-width: 25em;--stream-effect-height: 10em;--stream-mask-width: 25%;--stream-mask-skew-deg: 45deg;--stream-mask-skew-y: var(--stream-effect-height);
}
.stream-effect {width: var(--stream-effect-width);height: var(--stream-effect-height);position: relative;background-size: 100% 100%;
}
.stream-effect::after {content: '';position: absolute;width: var(--stream-mask-width);height: 100%;background-image: linear-gradient(90deg, #fff5, #fffB, #fff5);transform-origin: left top;transform: skewx(-45deg);transition: left 1s ease;left: calc(var(--stream-mask-width) * -1);
}
/* 注意hover的位置（必须挂在实际元素上）！伪元素不是一个实际存在的DOM元素，所以它只有属性没有状态 */
.stream-effect:hover::after{left: calc(100% + var(--stream-mask-skew-y))
}
</style>
</head>
<body>
<div class="stream-effect" style="background-image: url(https://via.placeholder.com/400x160)"></div>
<div class="stream-effect" style="background-image: url(https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2920084749,2018893236&fm=58&s=39C718720E8EBE011B398BAC0300F024&bpow=121&bpoh=75)"></div>
</body>
</html>

CSS3 图片扫光/辉光相关推荐

Shader学习23——描边+辉光
研究了一下Post Processing,简单尝试了一下剑辉光效果 image.png 其实shader基本没啥变化,就是在描边的shader基础上加了点位置判断. 首先我们设置好Post Proce ...
利用MEGA32制作辉光数码管显示电路
简介: 为了驱动两个辉光数码管,供有20个数字,使用MEGA32 MCU制作了一个秒表运行驱动电路板. 关键词: 辉光数码管,IN 12,MEGA32 #mermaid-svg-2FBANG5Zss ...
css扫光效果总结，css文字扫光，css图片扫光
前言今天来和大家一起探讨一下图片的扫光效果吧! 思路其实扫光的思路都是一样的,不外乎是表层一个动态的光,从左往右进行一个动画运动! 但是这个运动的光,一般是用过伪元素来::after或者::bef ...
iOS 开发－绘制辉光效果
如何使曲线有辉光(荧光?)效果(glow)? 试了各种方法,最终有一点效果,觉得值得记录一下,如下. 1.最开始,我想是不是用shadow可以实现,事实证明,shadow 太淡,不醒目,如果多次sha ...
UnityShader_屏幕后处理之辉光
题外话:关于黑色和白色在计算机中的颜色占比黑色RBG=(0,0,0).白色RBG=(1,1,1) 在现实生活中黑色吸收所有光,即所有光都不反射,因为本身的其RGB的颜色组成都是0: 白色反射所有光, ...
GraphicsLab Project之辉光（Glare，Glow）效果
作者:i_dovelemon 日期:2016 / 07 / 02 来源:CSDN 主题:Render to Texture, Post process, Glare, Glow, Multi-pass ...
辉光数码管中挥之不去的记忆
简介: 在我小时候的记忆中,所在县城粮油站显示计量白面和大米的电子秤就是使用的辉光数码管.致敬小时候的回忆,寒假制作一个辉光数码灯管,将会用于录制MOOC视频的特色背景动态装饰. 关键词: 辉光数码 ...
IN-12辉光数码管：俄罗斯进口的器件
简介: 对于辉光数码管IN-12进行了初步的测试.改造了基于U3843A的高压产生模块,通过替换其中的功率器件使其能够稳定的输出160V电压,用于点亮辉光数码管. 关键词: IN 12,辉光数码管, ...
GPU Gems1 - 21 实时辉光（Real-Time Glow）
这章浅墨的文章讲的很细了,这里基本照扒一遍加深印象,原文链接:https://zhuanlan.zhihu.com/p/36499291 [章节概览] 这章讲到2D光照效果中的辉光(Glow)和光晕( ...

CSS3 图片扫光/辉光

CSS3 图片扫光/辉光相关推荐

最新文章

热门文章