CSS实现图片层闪光效果

最新推荐文章于 2024-08-14 09:51:23 发布
最新推荐文章于 2024-08-14 09:51:23 发布
阅读量3.4k 收藏 19
点赞数 3
分类专栏： CSS魔法 文章标签： css3 css
程麒阁-大连大学-软件工程学院
本文链接：https://blog.csdn.net/chengqige/article/details/119189456
版权
这篇博客介绍了如何使用CSS实现鼠标悬停图片时产生流星般闪光效果的技巧。通过结合线性渐变和skew变形函数，创建了一道从左至右扫过的白色光束，为图片增添了动态视觉效果。理解此效果需要了解线性渐变的用法和skew函数的倾斜原理。代码示例详细解释了实现过程，并提供了不同skew函数参数对形状的影响。
摘要由CSDN通过智能技术生成

闪光效果

当鼠标光标移动到图片上的时候，有一道流星般的闪光划过

点击查看效果

图片抓拍截图：

我们可以看到，有一道白光正在扫过这张图片

代码实现

css代码

#wrapper{
  position: relative;
  width: 240px;
  cursor: pointer;
}
#flash{
  position: absolute;
  width: 100px;
  height: 100%;
  left: -145px;
  top: 0;
  background:-webkit-linear-gradient(left,rgba(255,255,255,0)0%,rgba(255,255,255,0.5)50%,rgba(255,255,255,0)100%);
  transform: skewX(-30deg);
}
#wrapper:hover #flash{
  left: 300px;
  transition: all 0.5s ease-in-out;
}

html代码

<div id="wrapper" title="css魔法">
  <div id="flash"></div>
  <img src="img/magic.jpeg" width="100%">
</div>

理解基础

要想理解上面的代码，需要具备线性渐变的知识和skew函数的变换

线性渐变

线性渐变属性是一个颜色渐变属性，它的语法格式如下

-webkit-linear-gradient:(方向,颜色1+进度,颜色2+进度)

比如说：

background:-webkit-linear-gradient(left,rgba(255,255,255,0)0%,rgba(255,255,255,0.5)50%,rgba(255,255,255,0)100%);

它的含义就是从左到右渐变，进度分别是0%，50%，100%

我们举个小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>线性渐变</title>
    <style>
        .wrapper{
            width: 200px;
            height: 200px;
            background: -webkit-linear-gradient(left,#00FFFF 0%,#0000FF 50%,#00FFFF 100%);
        }
    </style>
</head>
<body>
<div class="wrapper"></div>
</body>
</html>

实现效果：

我们可以看到这样一个带有魔法效果的盒子，如果你喜欢我的这个专栏css魔法，可以打开查看更多的css特效

skew（）变形函数

skew是一个形变函数，是css3新增的特性之一。我们使用它可以实现高级的形变效果。

skew是什么呢？它可以把盒子进行倾斜，举个例子：我们把上面的漂亮蓝色渐变盒子，进行skewX拉伸

代码示例：

css

.wrapper{
    width: 200px;
    height: 200px;
    margin-left: 100px;
    background: -webkit-linear-gradient(left,#00FFFF 0%,#0000FF 50%,#00FFFF 100%);
    /*变形函数*/
    transform: skewX(-30deg);
}

html

<div class="wrapper"></div>

实现效果：skewX(30deg)

skewX函数是将盒子沿着x轴方向进行倾斜,skewX(-30deg)的意思是顺时针方向沿着x轴倾斜30度。那么skewX(30deg)的意思就是逆时针方向沿着x轴倾斜30度

我们在举一个y方向skew的例子

css

 .wrapper{
    width: 200px;
    height: 200px;
    margin-left: 100px;
    background: -webkit-linear-gradient(left,#00FFFF 0%,#0000FF 50%,#00FFFF 100%);
    transform: skewY(-30deg);
}

js

<div class="wrapper"></div>

实现效果：skewY(30deg)

skewY函数是将盒子沿着y轴方向进行倾斜,skewY(30deg)的意思是顺时针方向沿着y轴倾斜30度。那么skewY(-30deg)的意思就是逆时针方向沿着y轴倾斜30度

我们不难发现skewX和skewY的方向是反的

函数类型特点
skewX()正角度是是逆时针倾斜，负角度是顺时针倾斜
skewY()正角度是顺时针倾斜，负角度是逆时针倾斜

两者恰恰相反

最终代码解读

有了上面的基础，我们就可以进行讲解了

注意看下面这些代码

#flash{
  position: absolute;
  width: 100px;
  height: 100%;
  left: -145px;
  top: 0;
  background:-webkit-linear-gradient(left,rgba(255,255,255,0)0%,rgba(255,255,255,0.5)50%,rgba(255,255,255,0)100%);
  transform: skewX(-30deg);
}

重点看left:-145px

这个时候图片和平行四边形的位置是

这里我把线性渐变的颜色调成了蓝色，方便看的更加清楚

再来看下面的代码

 #wrapper:hover #flash{
      left: 300px;
      transition: all 0.5s ease-in-out;
 }

left由原来的-145px变成了300px，过渡时间是0.5s，这个平行四边形扫过图片，形成闪光效果

这个特效讲解完毕了，学会了吗？

大前端工程师
关注
专栏目录
图片闪光效果（纯css）
qq_44260144的博客
07-02 620
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>闪光效果</title> <style type="text/css"> *{ ...
闪光css,css实现图片闪光效果
weixin_42356378的博客
08-04 3424
1.这个效果是看到京东商城上的一个下效果，原本的思路是用js控制一个图片在某张需要闪光的图片上重复出现，但是网上找了一些资料，竟然是用css写的，真是太帅了！！！2.原理：在需要闪光的图片前添加before属性；内容为空；宽为200px,高为100%，left：-150px,overflow:hiddden;background属性设置为渐变；颜色看自己需要；transform-skewX(-2...
简单的纯CSS3图片和HTML元素发光特效
12-13
这是一款简单的纯CSS3图片和HTML元素发光特效。该特效可以在鼠标滑过PNG图片或HTML元素时，使它们产生漂亮的发光效果。应用范围可以是div盒子,文字,png图片，按钮和输入框等。
【css】纯css实现图片发光效果
weixin_42582523的博客
12-21 3923
html: <div class="box"> <!-- <img src="4.jpg"> --> <h1>我是图片</h1> </div> css: * { /* 初始化 取消页面元素的内外边距 */ padding: 0; margin: 0; } body { /* 弹性布局 让页面元素垂直+水平居中 */ display: fle...
一闪一闪图片 css动画
最新发布
有问题可关注公众号：前端研究院 后台输入问题回复
08-14 506
这段代码会使得图片不断地闪烁，闪烁的频率由。决定，即每秒闪烁一次。中的百分比来改变闪烁的强度和速度。
CSS实现的一闪而过的图片闪光效果
09-25
种当鼠标悬停时光泽一闪而过。十分的简单，但非常的漂亮。在重新设计网站版面时，我很想在我的logo上使用这种效果。
css-图片闪烁效果
qq_35479013的博客
09-29 5489
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title>呼吸灯</title> <style type="text/css"> /...
css实现图片闪光效果
weixin_34315189的博客
07-10 626
1.这个效果是看到京东商城上的一个下效果，原本的思路是 用js控制一个图片在某张需要闪光的图片上重复出现，但是 网上找了一些资料，竟然是用css写的，真是太帅了！！！ 2.原理：在需要闪光的图片前添加before属性；内容为空； 宽为200px,高为100%，left：-150px,overflow:hiddden; background属性设置为渐变；颜色看自己需要；transfor...
css-图片闪光
Jack, what else can you do besides holding your little darling?
02-18 211
设置为悬停效果可能更显自然一点。
CSS3-闪光效果
qwe耿的博客
05-02 3621
效果：一张钻石图片，鼠标hover图片的时候有一道光线闪过 html代码： <body> <div class="content"> <img src="img/ring.png" alt="闪光图片" /> <!--闪光遮罩层--> <div class="light"></div> <
css特效 一道闪光在图片上划过代码
09-25
本知识点将详细解读如何利用CSS实现一个简单而酷炫的特效：当用户将鼠标悬停于图片上时，一道闪光在图片上划过。 首先，我们从概念上理解这个特效是如何实现的。整个特效可以分为以下几个步骤： 1. 准备一张图片...
jQuery+css实现的给图片拍照效果.rar
06-27
本项目“jQuery+css实现的给图片拍照效果”利用jQuery和CSS技术，为用户提供一种模拟真实拍照体验的功能，常见于网页中的头像上传或实时预览功能。下面将详细阐述这一实现过程。 首先，我们需要理解jQuery的核心...
css3实现当鼠标经过图片是 图片上有一道倾斜的闪光划过
xsxlff1314的博客
10-19 2071
css3实现当鼠标经过图片是 图片上有一道倾斜的闪光划过，之前京东商城上有过这样的效果
css 闪光效果
young63的博客
08-25 860
类似的样式就是那种 新下载的app图标上一闪而过的光 在元素上添加before或者after样式 div:before{ content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: -300px; overflow: hidden; background: -moz-linear-gradient(left, rgba(255, 255, 255, 0)0,
css动画效果（边框流光闪烁阴影效果）
2303_82176667的博客
05-31 1251
CSS边框流光闪烁阴影动画效果是一种令人印象深刻的技术，它通过动态的光影变化，为网页元素增添了独特的视觉吸引力。本文将深入探讨如何使用CSS来实现这种高级动画效果，从基础的阴影应用到复杂的光流动画，一步步引导您创造出令人惊叹的视觉效果，让您的设计作品在众多网站中脱颖而出。
css渐变实现图片闪光
sam80000的博客
11-27 478
第一种： 运用知识： transition 过渡 构建思路： 1.构建一个图片和一个盒子，盒子设置好背景颜色渐变。 将他放置在图片的左侧，通过移动盒子，配合过度，实现 照片闪光 第二种： 运用知识：animation 动画 构建思路： 1.构建一个图片和一个盒子，盒子设置好背景颜色渐变。 2.将盒子放置在图片的左侧，设置背景图位置的变化， 配合动画效果实现照片闪光 <!DOCTYPE html> <html> <head> <meta charset="utf
图片闪动css
m0_53536240的博客
03-09 574
.autoshake { -webkit-animation: shake-rotate 100ms ease-in-out infinite; }
css实现图片翻转效果
04-26
要实现图片翻转效果可以使用CSS3的transform属性。首先设置要翻转的图片的父元素为perspective属性，然后使用rotateY属性来完成翻转。比如，可以使用以下代码来实现一个鼠标悬浮翻转的效果： HTML代码： <div class="flip-container"> <div class="flipper"> <div class="front"> <img src="image.jpg"> </div> <div class="back"> <img src="image-back.jpg"> </div> </div> </div> CSS代码： .flip-container { perspective: 1000px; } .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg); } .flipper { position: relative; transform-style: preserve-3d; transition: 0.6s; } .front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } .back { transform: rotateY(180deg); }
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值