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

缺乏、安全感 2022-07-17 00:00 213阅读 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 条评论，213人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关 CSS3按钮鼠标悬停动画js特效

[下载地址][Link 1] CSS3按钮鼠标悬停动画特效是一款包含6种不同效果的简单按钮悬停动画特效。 ![17ead0125e7ac57e4b0c36d38ce7d86

Love The Way You Lie/ 2022年09月16日 06:13/ 0 赞/ 241 阅读

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

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

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

相关 css3鼠标悬停按钮颜色文字变化

[下载地址][Link 1]css3鼠标悬停在按钮上的特效，颜色和文字变化切换成其它的 ![1630057956.png][] dd: [Link 1]: https:

川长思鸟来/ 2022年09月09日 06:01/ 0 赞/ 249 阅读

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

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

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

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

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

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

相关 CSS鼠标悬停

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

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