CSS代码
.guangshu { display:block; position: relative; width:800px; height:450px; margin:0 auto;}
.guangshu:before { content: ""; position: absolute; width:200px; height: 100%; top:; left: -150px; overflow: hidden;
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)
} .guangshu:hover:before { left: 150%; transition: left 1s ease 0s; }
HTML代码
<a href="#" class="guangshu"><img src="https://static.cnblogs.com/images/adminlogo.gif"></a>
黄聪:css3实现图片划过一束光闪过效果(图片光影掠过效果)的更多相关文章
-
css3实现图片划过一束光闪过效果
该效果在京东里的图片有. .img { display:block; position: relative; width:800px; height:450px; margin:0 auto; } . ...
-
黄聪:浓缩的才是精华:浅析GIF格式图片的存储和压缩(转)
http://www.cnblogs.com/qcloud1001/p/6647080.html 成文迪, 在Web前端摸爬滚打的码农一枚,对技术充满热情的菜鸟,致力为手Q的建设添砖加瓦. GIF格式 ...
-
黄聪:WordPress图片插件:Auto Highslide修改版(转)
一直以来很多人都很喜欢我博客使用的图片插件,因为我用的跟原版是有些不同的,效果比原版的要好,他有白色遮罩层,可以直观的知道上下翻图片和幻灯片放映模式.很多人使用原版之后发现我用的更加帅一些,于是很多人 ...
-
黄聪:利用ImageMagicK给图片加水印
1 图片水印处理 假设把名为logo.gif的水印图标添加在原始图片(src.jpg)右下角,且水印的下边缘距原始图片10像素.右边缘距原始图片5像素.使用如下命令即可: convert src.jp ...
-
黄聪:《跟黄聪学WordPress插件开发》
续<跟黄聪学WordPress主题开发>之后,又一个作品完成!<跟黄聪学Wordpress插件开发>,国内最好的Wordpress插件开发视频教程!! 目录预览: WordPr ...
-
JQ基础练习---图片划过变暗
简单分享下,划过一张图片其余图片变暗,图片划过变暗的简单效果,JQ实现主要是css写法跟思路变化. <script src="http://ajax.googleapis.com/aj ...
-
黄聪:PHP使用Simple_HTML_DOM遍历、过滤及保留指定属性
<? /* * 参考资料: * http://www.phpddt.com/manual/simplehtmldom_1_5/manual_api.htm * http://www.phpddt ...
-
黄聪:《跟黄聪学WordPress主题开发》
又一个作品完成!<跟黄聪学Wordpress主题开发>,国内最好的Wordpress主题模版开发视频教程!! 目录预览: WordPress官方源文件层式结构讲解 WordPress数据库 ...
-
黄聪:VS2010开发如何在c#中使用Ctrl、Alt、Tab等全局组合快捷键
1.新建一个类 HotkeyHelper using System; using System.Runtime.InteropServices; using System.Windows.Forms ...
随机推荐
-
【转】Oracle索引列NULL值引发执行计划该表的测试示例
有时开发进行表结构设计,对表字段是否为空过于随意,出现诸如id1=id2,如果允许字段为空,因为Oracle中空值并不等于空值,有可能得到意料之外的结果.除此之外,最关键的是,NULL会影响oracl ...
-
BZOJ 4619 Swap Space 解题报告
今天是因为David Lee正好讲这个题的类似题,我才做了一下. 本题是world final 2016的一道水…… 题目地址如下 http://www.lydsy.com/JudgeOnline/p ...
-
Jvm加载jar包的顺序
使用-XX:+TraceClassPaths或者在服务器上执行jinfo时,都能得到classpath包含的jar包,例如: java.class.path = local/aaa/lib/sprin ...
-
iOS下OpenCV开发配置的两个常见问题(sign和link)
本文为作者原创,转载请注明出处(http://www.cnblogs.com/mar-q/)by 负赑屃 先上可以运行官方推荐的<OpenCV for iOS samples>的demo链 ...
-
python将多个pdf合成一个
'''# -*- coding:utf-8*-''' import sys import importlib importlib.reload(sys) import os import os.pat ...
-
连接mysql用mysql_connect不能连接
用mysqli_connect就可以解决. mysqli_array()有连个参数,第一个是连接mysql名. php遇到这个警告Warning: Use of undefined constant ...
-
solr部署tomcat 访问HTTP Status 403 – Access to the requested resource has been denied
-----------解决403错误看这里!!-----------打开****\Tomcat 8.5\webapps\solr\WEB-INF里面的web.xml,把下面这段配置注释掉!!!如下所示 ...
-
Unity3D - 详解Quaternion类(一)
一.简介 Quaternion又称四元数,由x,y,z和w这四个分量组成,是由爱尔兰数学家威廉·卢云·哈密顿在1843年发现的数学概念.四元数的乘法不符合交换律.从明确地角度而言,四元数是复数的不可交 ...
-
Double类型的数据四舍五入保留小数点后两位
4种方法,都是四舍五入,例: import java.math.BigDecimal; import java.text.DecimalFormat; import java.text.NumberF ...
-
「小程序JAVA实战」微信小程序简介(一)
转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-01/ 一直想学习小程序,苦于比较忙,加班比较多没时间,其实这都是理由,很多时候习惯了搬砖,习惯了固 ...