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

缺乏、安全感 2022-07-17 00:00 231阅读 0赞

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>闪光图片</title>
    <style>
    *{ margin:0; padding:0;}
    .box{
    	position: relative;
    	box-shadow: 0 0 10px #FFF;
    }
    em{
    	position: absolute;
    	left: -180px;
    	top: 0;
    	width: 180px;
    	height: 110px;
    	background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
    	background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
    	transform: skewx(-25deg);
    	-o-transform: skewx(-25deg);
    	-moz-transform: skewx(-25deg);
    	-webkit-transform: skewx(-25deg);
    }
    .box:hover em{
    	left:180px;
    	-moz-transition:0.5s;
    	-o-transition:0.5s;
    	-webkit-transition:0.5s;
    	transition:0.5s;
    }
    </style>
    </head>
    <body>
        <div class="box">
            <a href="#"><img src="http://ww3.sinaimg.cn/large/6b002b97gw1esbsin2dhcj205002uglf.jpg"></a>
            <em></em>
        </div>
    </body>
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关 css实现鼠标悬停改变图片

样式： <style> .bshApp img:hover{ content:url('bshsjjscpdf/bsh_four_

桃扇骨/ 2023年10月03日 19:59/ 0 赞/ 60 阅读

相关十分钟实现鼠标悬停效果，CSS3悬停效果

视频：[https://www.bilibili.com/video/BV1cy4y1D7mz][https_www.bilibili.com_video_BV1cy4y1D7

系统管理员/ 2022年12月28日 08:19/ 0 赞/ 322 阅读

相关 145.HTML+CSS 鼠标悬停聚光特效，力量之光!

效果 (源码网盘地址在最后) ![7839f5b72e5ef86331650238839e0932.gif][] 最近开源了一个 Vue 组件，还不够完善，欢迎大家来

我就是我/ 2022年11月13日 14:26/ 0 赞/ 138 阅读

相关鼠标悬停时，图片切换的方法

在我们写前端页面时，经常会遇到这种情况，就是鼠标悬停某个图标或者图片时，图片颜色发生了变化或者图片发生改变。这种情况如何实现？ 1、直接在html样式里进行切换

一时失言乱红尘/ 2022年10月26日 14:05/ 0 赞/ 213 阅读

相关 html鼠标悬停按钮效果,纯css3实现的鼠标悬停动画按钮

今天给大家带来一款纯css3实现的鼠标悬停动画按钮。这款按钮鼠标经过前以正方形的形式，当鼠标经过的时候以动画的形式变成圆形。效果图如下： ![09a8e28f276a625f

淩亂°似流年/ 2022年10月06日 05:58/ 0 赞/ 321 阅读

相关鼠标悬停卡片css3动画js特效

[下载地址][Link 1]基于Bootstrap网格布局的图片画廊，css3鼠标hover卡片动画特效。该特效在鼠标悬停或hover到卡片上时，通过CSS3制作一系列的文字和

Love The Way You Lie/ 2022年09月11日 00:29/ 0 赞/ 308 阅读

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

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

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

相关 CSS3 鼠标悬停显示另一面

根据CSS3中的3D特性，当鼠标放上去，反转显示另一面，源码如下：(代码没考虑浏览器兼容性问题，本代码以Chrome谷歌浏览器测试) <!DOCTYPE html

Myth丶恋晨/ 2022年07月11日 12:24/ 0 赞/ 268 阅读

相关 CSS鼠标悬停

> 在学习中遇到许多好看的样式，虽然只是用HTML+CSS简单的实现，仅作为我的学习笔记和同爱好学习者的分享：先看效果 ![这里写图片描述][70] HTM

港控/mmm°/ 2022年05月25日 06:17/ 0 赞/ 359 阅读

相关 CSS3 图片扫光/辉光

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

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