三沣开发知识 购物 网址 游戏 小说 歌词 地图 快照 股票 美女 新闻 笑话 | 汉字 软件 日历 阅读 下载 图书馆 开发 租车 短信 China
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题
autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml
html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
  IT知识库 -> Html-Css -> 前端的鼠标滑过图片闪光CSS3效果怎么做? -> 正文阅读
 

[Html-Css]前端的鼠标滑过图片闪光CSS3效果怎么做?

前端的鼠标滑过图片闪光CSS3效果怎么做? 两三年前鸡哥还是个学生的时候做了本站的前端页面,其实现在这个站有很多前身,有机会发个帖子给大家看看鸡哥以前的年少无知不懂事的杀马特作品...
好了,今天聊聊怎么做鼠标滑过图片的时候有反光闪光的效果,这个效果还是在逛京东的时候无意间发现的,大家看看下边的成品演示:不然说了半天还不知道要做啥效果可尴尬了,哦对了,这种情况叫做什么?  “尬聊”

大家看到了吧,今天文章就是介绍这种效果怎么实现
           - Ps:有一点html基础的人会很容易看明白,如果没有基础的人可能会看起来比较吃力。
先把代码贴出来吧:

<div><a href="javascript:;"><img src="aaa.jpg"></a></div>

上边这是html里边的代码,没多少,还是比较简单的 ,重点是后边的css代码 要仔细看和分析 参了很多css3的知识点

div{width:800px;height:600px;overflow:hidden;}                  /div宽度和高度 超出隐藏
div a:hover::before{transition: all 0.5s;left:850px;}               /css3过度样式  before离左边850像素
div a:before{content: "";                  
    position: absolute;
    width: 50px;
    height: 600px;
    top: 0;
    left: -130px;
    background: -moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.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,.2)),color-stop(100%,rgba(255,255,255,0)));
    background: -webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
    background: -o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
    -webkit-transform: skewX(-25deg);
    -moz-transform: skewX(-25deg);}              /这里是给反光加样式的css3代码,就不一一解释了

上边就是css样式代码,鸡哥只是简单的写了个demo给大家演示一下,其实后边的反光样式代码也是鸡哥复制的,好久没写了忘完了,只能复制了,大家哪里不明白可以百度,把不明白的代码百度一下就明白了。
具体的思想理论就是给a标签上方加了一个透明层,通过定位压在a标签上,这个透明层就是上边代码中的before,当然也可以是其他随便一个标签,每个人习惯不一样,然后通过css3的鼠标经过过度样式让这个透明层从做向右滑动就实现了这种反光的效果。
好了具体方法已经给大家分享出来了,如果要用到自己的项目中还要有点html+css的基础的,不然寸步难行。
下边我把刚刚写的demo打包了一下,如果不太明白的小伙伴可以下载来仔细研究。
原文链接:前端的鼠标滑过图片闪光CSS3效果怎么做?
  Html-Css 最新文章
sass基础常用指南
从零基础到精通的前端学习路线
CSS3常用属性浏览器兼容前缀
10个步骤让你成为高效的Web开发者
教你五步制作精美的HTML时钟
零基础如何系统地学习前端开发?
详解CSS定位原理
SVG动画
easyui datagrid 获取行数据某个字段
关于:hover div
上一篇文章      下一篇文章      查看所有文章
加:2017-06-18 22:06:18  更:2017-06-18 22:06:20 
 
技术频道: 站长资讯 .NET新手区 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA Visual Studio ASP.NET MVC .NET控件开发 Entity Framework WinRT/Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动设计 Html/Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP Oracle ERP Dynamics CRM K2 BPM 信息安全 企业信息化其他 Android开发 iOS开发 Windows Phone Windows Mobile 其他手机开发 敏捷开发 项目与团队管理 软件工程其他 SQL Server Oracle MySQL NoSQL 其它数据库 Windows 7 Windows Server Linux
脚本语言: vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程
网站开发: CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 美食菜谱 新闻资讯 电影视频 小游戏 Chinese Culture 股票 租车
生肖星座 三丰软件 视频 开发 短信 中国文化 网文精选 搜图网 美图 阅读网 多播 租车 短信 看图 日历 万年历 2017年11日历
2017-11-20 5:47:58
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT知识库