css3划过图片闪光
css代码
01 |
.img { display : block ; position : relative ; width : 800px ; height : 450px ; margin : 0 auto ;} |
02 |
.img:before { content : "" ; position : absolute ; width : 200px ; height : 100% ; top : 0 ; left : -150px ; overflow : hidden ; |
03 |
background : -moz-linear-gradient( left , rgba( 255 , 255 , 255 , 0 ) 0 , rgba( 255 , 255 , 255 ,. 2 ) 50% , rgba( 255 , 255 , 255 , 0 ) 100% ); |
04 |
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 ))); |
05 |
background : -webkit-linear-gradient( left , rgba( 255 , 255 , 255 , 0 ) 0 , rgba( 255 , 255 , 255 ,. 2 ) 50% , rgba( 255 , 255 , 255 , 0 ) 100% ); |
06 |
background : -o-linear-gradient( left , rgba( 255 , 255 , 255 , 0 ) 0 , rgba( 255 , 255 , 255 ,. 2 ) 50% , rgba( 255 , 255 , 255 , 0 ) 100% ); |
07 |
-webkit-transform: skewX( -25 deg); |
08 |
-moz-transform: skewX( -25 deg) |
09 |
} |
10 |
.img:hover:before { left : 150% ; transition: left 1 s ease 0 s; } |
html代码
01 |
< a href = "#" class = "img" >< img src = "http://img.loveqiao.com/pic1.jpg" width = "800" ></ a > |
css3划过图片闪光的更多相关文章
- CSS3鼠标悬停图片上浮显示描述代码
效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...
- jQuery css3鼠标悬停图片显示遮罩层动画特效
jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...
- 网页特效:用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 使用 CSS3 实现 3D 图片滑块效果【附源码下载】
使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...
- 使用CSS3滤镜让图片反转颜色
CSS提供的滤镜也是一大亮点,我一直痴迷其中,有些滤镜的效果很有用,可是有些的滤镜效果可能只是为了玩玩儿,CSS常见的滤镜有这些:grayscale, blur, sepia,所有常见的过滤器.但是如 ...
- 基于CSS3和HTML5图片加工前后对比代码
分享一款CSS3和HTML5图片加工前后对比代码.这是一款通过CSS3和HTML5将图像转换为自动响应的元素:图像缩放和裁剪以适应容器.效果图如下: 在线预览 源码下载 实现的代码. html代码 ...
- css3制作六边形图片
效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflow:hidden; 超出隐藏 3.>v ...
- 一款基于css3的3D图片翻页切换特效
今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id= ...
- CSS3之边框图片border-image
CSS3中有关border的属性,还有很多,今天我将为大家介绍一个很好玩的属性——Border-image.有了CSS3之边框图片Border-image,我们可以轻松搞定圆角,轻松搞定很多之前难搞的 ...
随机推荐
- linux nginx安装
操作系统centOS7安装nginx: 1.如果centOS7中未安装编译器,先安装gcc编译模块 yum install gcc gcc-c++ ncurses-devel perl 2.安装ngi ...
- [转载]C#图片格式(JPG,BMP,PNG,GIF)等转换为ICO图标
using System; using System.Drawing; using System.Windows.Forms; using System.IO; namespace ICOTest { ...
- 安装完QQ必须要删除掉的几个恐怖文件
安装完QQ必须要删除掉的几个恐怖文件 感谢 QQ很可怕 的投递 很多关注自己电脑硬件温度的朋友,一般都懂得去查看什么进程占用CPU较高,可能发现过有这么几个进程的CPU占用会有时莫名其妙的非常之高,它 ...
- C++引用的实质
转自探索c++的底层机制 在看这篇文章之前,请你先要明白一点:那就是c++为我们所提供的各种存取控制仅仅是在编译阶段给我们的限制,也就是说是编译器确保了你在完成任务之前的正确行为,如果你的行为不正确, ...
- 一组神奇的 3D Gif 动图
本文由 极客范 - 黄利民 翻译自 mymodernmet.欢迎加入极客翻译小组,同我们一道翻译与分享.转载请参见文章末尾处的要求. 虽然 gif 动图/动画似乎是无处不在现在了,但有些聪明人已经把 ...
- [杂题]CSUOJ1413 Area of a Fractal
题目链接 题意:题中给了图,所以不看字大概也知道 求的是第n个图形的面积. 就是找规律 递推 一类的... 先给结论: 很鬼畜的公式: $\displaystyle\frac{3\times ...
- linux如何关闭防火墙
1) 重启后生效 开启: chkconfig iptables on 关闭: chkconfig iptables off 2) 即时生效,重启后失效 开启: service iptables sta ...
- wzplayer,tlplayer支持ActiveX
wzplayer2 for activeX最新谍报 1.支持wzplayer2所有功能 2.支持本地播放,网络播放,加密流播放. 3.支持变速不变调等等. 联系方式:weinyzhou86@gmail ...
- 转:Apache和Nginx运行原理解析
Web服务器 Web服务器也称为WWW(WORLD WIDE WEB)服务器,主要功能是提供网上信息浏览服务. 应用层使用HTTP协议. HTML文档格式. 浏览器统一资源定位器(URL). Web服 ...
- 结构体dfield_t
/* SQL data field struct */ typedef struct dfield_struct dfield_t; /** Structure for an SQL data fie ...