CSS3 图片扫光/辉光

╰半夏微凉° 2022-04-22 05:30 167阅读 0赞

![在这里插入图片描述][20181102152330266.gif]  
扫光的原理主要是在图片上增加一层，用作扫光，然后添加背景颜色并倾斜一定的角度。动画是左右移动，因此就形成了扫光效果。

<!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>

[20181102152330266.gif]: /images/20220422/64c9ab6b0e134365843b32d6b987cebc.png

发表评论取消回复

表情：

评论列表（有 0 条评论，167人围观）

还没有评论，来说两句吧...

相关阅读

相关 css3文字扫光渐变色

[css3实现文字扫光渐变动画效果][css3] 利用css3这个属性（背景剪裁）： background-clip: border-box || paddin

秒速五厘米/ 2024年02月18日 21:16/ 0 赞/ 67 阅读

相关使用css3实现图片旋转

用CSS语法实现动态旋转 css3新增的语法中有个动画属性，今天没事，拿来玩玩动画做成是这样的 ![在这里插入图片描述][watermark_type_ZmFu

系统管理员/ 2022年11月19日 09:59/ 0 赞/ 291 阅读

相关前端扫描效果CSS3 animation 属性实现“扫一扫”动画效果

关键代码： .line-box { //background-color: red; position: absolu

矫情吗；*/ 2022年08月31日 04:40/ 0 赞/ 524 阅读

相关 CSS3鼠标悬停图片时镜面白光闪过

<!doctype html> <html> <head> <meta charset="utf-8"> <title>闪光图片</ti

缺乏、安全感/ 2022年07月17日 00:00/ 0 赞/ 207 阅读

相关 CSS3图片响应式居中

img { width: 100%; object-fit: cover; } img {

叁歲伎倆/ 2022年07月16日 00:16/ 0 赞/ 261 阅读

相关 css3图片旋转动画

参考网站：[http://www.17sucai.com/pins/tag/6188.html][http_www.17sucai.com_pins_tag_6188.html

妖狐艹你老母/ 2022年06月13日 13:47/ 0 赞/ 296 阅读

相关 css 四角辉光

原文出处： [http://www.cnblogs.com/vali/p/8674649.html][http_www.cnblogs.com_vali_p_8674649.h

灰太狼/ 2022年05月20日 09:13/ 0 赞/ 139 阅读

相关 CSS3 图片扫光/辉光

![在这里插入图片描述][20181102152330266.gif] 扫光的原理主要是在图片上增加一层，用作扫光，然后添加背景颜色并倾斜一定的角度。动画是左右移动，因此就

╰半夏微凉°/ 2022年04月22日 05:30/ 0 赞/ 168 阅读

相关 css3图片轮播效果

HTML5前端广告的轮播效果第一步轮播效果图分两部分 1. css样式的设计 2. js实现图片的轮播 css样式： <style type

ゝ一世哀愁。/ 2022年02月15日 14:53/ 0 赞/ 323 阅读

相关感受湖人的光辉岁月

湖人总冠军已经不是一个口号，Go, Lakerrrrrs！！！老詹带队，4年之内必拿总冠军！！这个腾讯做的视频做的很好，水平很高。视频地址：[http://gatesma

傷城~/ 2022年01月29日 07:13/ 0 赞/ 194 阅读