css3实现鼠标移入图片划过一束光闪过效果

css3实现鼠标移入图片划过一束光闪过效果：

可以通过 https://littlehiuman.github.io/cssEffect/flashLightPic.html 查看效果。

https://github.com/littleHiuman/littleHiuman.github.io 求点star~~~

html:

<a href="#" class="img"><img src="http://gss0.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/d53f8794a4c27d1e8ff07fe61fd5ad6eddc43839.jpg" width="800"/>
</a>

css:

.img {display: block;position: relative;width: 800px;height: 450px;margin: 0 auto;
}
.img:before {content: '';position: absolute;width: 200px;height: 100%;top: 0;left: -150px;overflow: hidden;background: -moz-linear-gradient(left,rgba(255, 255, 255, 0) 0,rgba(255, 255, 255, 0.2) 50%,rgba(255, 255, 255, 0) 100%);background: -webkit-gradient(linear,left top,right top,color-stop(0%, rgba(255, 255, 255, 0)),color-stop(50%, rgba(255, 255, 255, 0.2)),color-stop(100%, rgba(255, 255, 255, 0)));background: -webkit-linear-gradient(left,rgba(255, 255, 255, 0) 0,rgba(255, 255, 255, 0.2) 50%,rgba(255, 255, 255, 0) 100%);background: -o-linear-gradient(left,rgba(255, 255, 255, 0) 0,rgba(255, 255, 255, 0.2) 50%,rgba(255, 255, 255, 0) 100%);-webkit-transform: skewX(-25deg);-moz-transform: skewX(-25deg);
}
.img:hover:before {left: 150%;transition: left 1s ease 0s;
}

css3实现鼠标移入图片划过一束光闪过效果相关推荐

css3实现鼠标移入图片变色
css3实现鼠标移入图片变色方法一:准备两张图片,直接更改hover后的背景图片.这种方法简单粗暴,我就不过多赘述了. 方法二,利用css3的filter滤镜.不知道filter的同学可以去W3c多 ...
html鼠标划到背景图显示文字,用css3实现鼠标移入图片后显示其他文字/图片的效果...
导读:当网页中需要实现鼠标移到某张图片,会有其他文字/图片替换当前图片的效果时,很多人会使用jQuery的效果,其实用css3就可以实现,而且很简单,下面列一下代码:主要用到的是position定位和 ...
[CSS] CSS实现鼠标移入图片放大效果
CSS实现鼠标移入图片放大效果一般在官网比较常见这种动效,当鼠标移入图片时可以看到视觉放大的效果,这里用到一个css属性 object-fit: cover; object-fit 属性 objec ...
Vue.js-Day02-PM【组件化开发（全局注册组件、局部注册组件、案例）、组件的配置选项、轮播图实例（左右切换按钮、底部导航栏、定时器、鼠标移入-图片静止）】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.组件化开发 4.1.组件的注册全局注册局部注册(只能在当前整个Vue实例的范围内才可以使用) 使用组件 ...
CSS仿艺龙首页鼠标移入图片放大
CSS仿艺龙首页鼠标移入图片放大,效果似乎没有js好...... <!DOCTYPE html> <html lang="en"> <head> ...
鼠标移入图片高亮，其余颜色变暗
鼠标移入图片高亮,其余颜色变暗效果如下主要的布局代码如下: 1.设置一个大的盒子[wrap],通过css样式将盒子居中显示 2.给li标签设置一个浮动排成一排显示 3.大盒子的宽度设置630,二每 ...
图片鼠标移入图片改变颜色、显示另外一张图片（2种方式）
1:实现鼠标移入之后图片更改为content中配置的路径 // 给图片增加class或id通过class或id给图片添加CSS样式 <img alt="" class=&q ...
html图片鼠标动态效果代码,纯css3实现鼠标经过图片显示描述的动画效果
今天给大家带来的是用css3技术实现鼠标经过图片,显示图片描述的动画效果.鼠标经过图片时,图片动画缩小并渐变显示描述.我们一起看看效果图: 源码下载我们一起学习下此案例的代码. html代码: 复制 ...
css实现鼠标移入图片，增加遮罩并在上方显示另一个图片
问题来源最近做web项目,前端表单添加用户头像时遇到的问题,就是鼠标移入添加图片的按钮要有相应的动态效果,具体要求如图 #鼠标未移入效果 #鼠标移入效果问题解决方式不想让js代码太过繁多,只用c ...
仿淘宝实现鼠标移入图片，图片放大功能
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

css3实现鼠标移入图片划过一束光闪过效果

css3实现鼠标移入图片划过一束光闪过效果相关推荐

最新文章

热门文章