闪光效果

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

点击查看效果

图片抓拍截图：

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

代码实现

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);
}

<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实现图片层闪光效果相关推荐

闪光css,CSS实现的一闪而过的图片闪光效果
只需要两个html元素和一个css变换,我就能创造出我自己的闪光效果.让我们来实现它! 呈现光泽图片下面就是这张addy在他博客上使用的图片: 比我需要的要大一些,但你可以把它裁剪一些. 注意:左边 ...
html图片自带闪光效果,CSS实现的一闪而过的图片闪光效果
只需要两个HTML元素和一个CSS变换,我就能创造出我自己的闪光效果.让我们来实现它! 呈现光泽图片下面就是这张Addy在他博客上使用的图片: 比我需要的要大一些,但你可以把它裁剪一些. 注意:左边 ...
修改placeholder文字文字换行省略号背景图固定鼠标经过图片闪光效果
1.input框里面的placeholder文字字体大小修改 input {background-color:transparent;font-size: (13 / @baseSize);paddi ...
android 背景图遮罩,通过css使用background-color为背景图添加遮罩效果
一个div同时设置background-color和background-image的话,color是处于img层下方的,无法实现遮罩效果,所以需要再创建一个div作为其子div,然后设置子div的背 ...
CSS如何实现内凹角效果 By 大漠
记得@Lea Verou的<CSS Secrets>一书和前几天@Chris Coyier刚发的帖子都介绍了CSS怎么实现元素斜切口的效果.我也尝试着借助Vue的能力,把这种效果构建成一个 ...
php渐变字,jQuery_jQuery实现的立体文字渐变效果，先截两个图看看：效果很 - phpStudy...
jQuery实现的立体文字渐变效果先截两个图看看: 效果很不错吧?会不会误以为这些字体是图片?这可不是图片,而是用JS实现的在线演示 http://demo.phpstudy.net/js/gra ...
i css svg,如何设置 CSS 背景图中的 SVG 的颜色
Coloring SVGs in CSS Background Images 如何设置 CSS 背景图中的 SVG 的颜色 I love using SVG in CSS background ima ...
html文字抖动效果,CSS实现TikTok文字抖动效果示例
前端同学在日常开发中精彩会因为一些动效和设计争的面红耳赤,设计希望用代码实现,前端要设计出gif图,最后谁也不让谁,设计走了,留下了前端独自加班...... CSS技术是前端必须掌握的一项技能,不仅要 ...
css三实现ui,纯CSS实现常见的UI效果
原标题:纯CSS实现常见的UI效果转自:掘金 - alphardex 前言切图仔,是大多数前端用来自嘲的称呼.相信很多人平时写页面的时候,大部分时间是在切图和排图,如此往复.这里并不是要否定切图本 ...
html多张图片无缝滚动播放,jQuery实现的多张图无缝滚动效果【测试可用】
本文实例讲述了jQuery实现的多张图无缝滚动效果.分享给大家供大家参考,具体如下: slider *{ padding: 0; margin: 0; } li{ list-style-type: n ...

CSS实现图片层闪光效果