代码库
  • 首页
  • html模板
  • Jquery插件
  • 代码文章
  • 百宝箱
  • 网站导航
  • 编程代码
    • PHP
    • Jquery
    • DivCss
    • Mysql
    • linux
  • 程序代码
    • 织梦Cms
  • php
  • jquery
  • divcss
  • 网站建设500起 APP小程序独开
  • HTML模板全站下载388元
  • COMODO通配符SSL证书330元
  • 广告位招租:515856299
  • 广告位招租:515856299
  • 广告位招租:515856299
  • 广告位招租:515856299
  • 广告位招租:515856299
  • 广告位招租:515856299
  • 广告位招租:515856299
  • 广告位招租:515856299
  • 广告位招租:515856299
  • 广告位招租:515856299
  • 广告位招租:515856299
  • 广告位招租:515856299
  • 广告位招租:515856299
  • 领取上云大礼包单笔最高立减1500元
  • 服务器0元试用,首购低至0.9元/月起

css3图片一道闪光划过特效代码

分类:DivCss人气:1895

大体思想是,设计一个透明层i,skewx在X轴上做了负25度的变形,背景颜色用的是CSS3的线性渐变linear-gradient,然后hover的时候,设置0.5s的动画时间。

同时在 i 层使用 cursor:pointer,如果不设置这个的话,需要等透明层动画之后才能看得到 pointer 指针。

打开 fireBUG 调试来看会更加清楚!

代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>闪光图片</title>
<style>
.overimg{
position: relative;
display: block;
/* overflow: hidden; */
box-shadow: 0 0 10px #FFF;
}
.light{
cursor:pointer;
position: absolute;
left: -180px;
top: 0;
width: 180px;
height: 90px;
background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
transform: skewx(-25deg);
-o-transform: skewx(-25deg);
-moz-transform: skewx(-25deg);
-webkit-transform: skewx(-25deg);
}
.overimg:hover .light{
left:180px;
-moz-transition:0.5s;
-o-transition:0.5s;
-webkit-transition:0.5s;
transition:0.5s;
}
</style>
</head>
<body>
<p class="overimg">
<a><img src="http://www.dmaku.com/demo/jquery/2017042149995356/images/ad_yuetu.jpg"></a>
<i class="light"></i>
</p>
</body>
</html>
标签:css3图片闪光划过特效代码
PREVIOUS:css3点击爆炸下落的特效代码
NEXT:JavaScript图片延迟加载微型库Echo.js
  • 省略号
  • 排行榜
  • 自动换行
  • 透明度
  • 网页
  • 动画特效
  • svg
  • css3
  • 跟踪状态
  • 清除浮动
  • CSS3效果
  • 纯css3
  • img图片最大宽
  • 边框
  • 选项卡
  • 放大
  • 移动
  • 旋转放大
  • 物流快递
  • 兼容IE6
  • HTML
  • 加载
  • CSS
  • 特效代码
  • TAB
  • 小技巧
  • 更新
  • 特效
  • loading
  • 边框阴影
  • 360度旋转
  • 点击爆炸
  • css3特效
  • 图片闪光划过
  • 图片放大
最新模板
  • 创建账户表单页面模板

    这是一套创建账户表单页面模板是一款简单好看的网站表单注册网站模板下载

  • 口腔医学研究所网站模板

    这是一套美容美颜化妆品公司网站模板是一款蓝色大气医疗口腔网站模板下载

  • 美容美颜化妆品公司网站模板

    这是一套美容美颜化妆品公司网站模板是一款大气单页网站模板下载

  • 蓝色探索世界旅游网站模板

    这是一套蓝色探索世界旅游网站模板里面包含8个子页面,适合旅游公司网站模板下载

  • 教育机构学校HTML5模板

    这是一套教育机构学校HTML5模板是一款基于Bootstrap制作的教育类网站模板下载

热门推荐
  • 1absolute定位css元素居中的两种方法
  • 2html网页引入svg
  • 3如何网页中引用字体文件
  • 4CSS显示不同颜色数字的排行榜
  • 5CSS英文字符自动换行
  • 6CSS图片透明度
  • 7css实现div边框阴影
  • 8css设置div边框
  • 9纯css3实现加载等待loading动画特效代码
  • 10纯css3实现的物流快递跟踪状态更新css3特效
  • 11CSS清除浮动方法汇总
  • 12CSS3制作漂亮TAB选项卡
  • 13css3图片一道闪光划过特效代码
  • 14css3点击爆炸下落的特效代码
  • 15HTML+css图片放大特效代码
百宝箱
  • CSS压缩格式化

    CSS压缩

  • html格式化

    html格式化

  • 繁体字转换器

    繁体字转换

  • JSON检验

    JSON检验

  • MD5加密

    MD5加密

  • css3动画

    css3动画

© 2016-2021 代码库关于我们网站导航网站地图皖ICP备14004357号
代码库