欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>CSS教程

目录导航

使用CSS3实现图片闪光、划过效果

香港CPC机房 添加于 2014-12-23  
CSS教程
在网站看到过挺酷炫的一个图片效果:当鼠标移上去的时候,会有一道闪光在图片上划过。效果非常棒,这个效果是如何实现的呢?先来看看效果。

使用CSS3实现图片闪光、划过效果-图片1
使用CSS3实现图片闪光、划过效果-图片1

这个 CSS3 效果是如何实现的呢?
<p class="overimg">
    <a><img src="图片地址"></a>
    <i class="light"></i>
</p>

CSS 样式代码

.overimg{
position: relative;
display: block;
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;
}

大体思想是,设计一个透明层i,在X轴上做了负25度的变形,背景颜色用的是CSS3的线性渐变linear-gradient,然后hover的时候,设置0.5s的动画时间。
如果使用的是Chrome或者火狐浏览器,可以按F12打开调试来看会更加清楚。

到零度科技查看原文:http://www.ldisp.com/a/css/2014/3055.shtml

上一篇:如何控制WAP网站上输入框的默认键盘类型
下一篇:[CSS3-前端] CSS3发光和圆角图片处理

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

0

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理