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,我们可以轻松搞定圆角,轻松搞定很多之前难搞的 ...
随机推荐
- Css3 圆角和渐变色问题(IE9)
border-radius: 4px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#569B0E', endC ...
- SpringMVC+Hibernate架构save方法事务未提交
今天同事遇到一个问题,一起研究,最后解决,让我对spring的事务管理又加深了印象. 先简单说一下项目:项目是Spring和Hibernate集成的JavaEE项目,MVC架构. 外包在service ...
- C#压缩、解压缩文件(夹)(rar、zip)
主要是使用Rar.exe压缩解压文件(夹)(*.rar),另外还有使用SevenZipSharp.dll.zLib1.dll.7z.dll压缩解压文件(夹)(*.zip).需要注意的几点如下: 1.注 ...
- COOKIE漫谈
cookie概述在上一节,曾经利用一个不变的框架来存储购物栏数据,而商品显示页面是不断变化的,尽管这样能达到一个模拟全局变量的功能,但并不严谨.例如在导航框架页面内右击,单击快捷菜单中的[刷新]命令, ...
- Python 全栈开发 -- 开发环境篇
开发环境是一个文本编辑器和 Python 解释器的组合.文本编辑器用来写代码,解释器提供了一种方法来运行编写的代码.一个文本编辑器可以像 Windows 上的 Notepad 一样简单,或是一个复杂的 ...
- 服务器部署_linuix下 一台nginx 多域名之二
第二个需求: 1. 一台服务器部署了三个应用web1~web3对应三个域名:www.web1.com.www.web2.com.www.web3.com ,方法参照我另外一篇文章 2. 如果用非www ...
- ASP.NET 弹出对话框和页面之间传递值的经验总结
今天碰到一个弹出对话框(PopUp dialog)的问题, 因该是个傻瓜问题, 但是还是让我研究了半天, 总结了一些前人经验, 拿出来跟大家分享一下! 在ASP.Net中页面之间的传值方法有很多,但是 ...
- Altium Designer学习: 原理图和PCB元件对应查找
画PCB的时候,需要经常的去查看原理图上对应的元件,元件数目少还好找,数目多了找起来就比较扯淡.还要Altium Designer提供了不错的交叉查找功能. 这里我建议使用两个显示器,一个显示器放原理 ...
- Java 输入流读取文本文件换行符问题
一问题 在学习流编程的过程中,我遇到了一下问题.首先来看一下我写的java源程序: package StreamLearn; import java.io.*; public class TestFi ...
- Windows7 64下MinGW64/MSYS环境搭建
原文出处: CompileGraphics Magick, Boost, Botan and QT with MinGW64 under Windows 7 64 http://www.kinetic ...