正文

使用css3线性渐变实现图片闪光划过效果

Jee  2022-02-07  674

关键词：

<p class="overimg">
    <a><img src="http://www.nowamagic.net/librarys/images/201402/2014_02_15_01.jpg"></a>
    <i class="light"></i>
</p>

.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;
}

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

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

第七十九，css3背景渐变效果

CSS3背景渐变效果学习要点：1.线性渐变2.径向渐变本章主要探讨HTML5中CSS3背景渐变功能，主要有两种渐变方式：线性渐变和径向（放射性）渐变。一．线性渐变linear-gradient背景颜色的渐变功能CSS3提供了linear-gradient属性实... 查看详情

css3linear-gradient线性渐变实现虚线等简单实用图形

...图的叠加效果。甚至，理论上，任意彩色jpg图片都是可以使用CSS3渐变背景实现的。这种特性和box-shadow类似，参见“CSS3box-sh 查看详情

第22章css渐变效果

第22章CSS3渐变效果学习要点：1.线性渐变2.径向渐变本章主要探讨HTML5中CSS3背景渐变功能，主要有两种渐变方式：线性渐变和径向（放射性）渐变。一．线性渐变CSS3提供了linear-gradient属性实现背景颜色的渐变功能。在以前，这种... 查看详情

浅探css3渐变

css3的渐变属性已经在各种网页设计中被广泛使用，在没有css3的渐变属性之前，要实现一些多种颜色切换的效果图，你可能别无他法，只能用一个图片来显示，虽然你知道使用图片需要网络请求，既耗带宽又耗时间，下面我将介... 查看详情

浅探css3渐变

css3实现渐变背景

...css3的linear-gradient()函数用于创建一个表示两种或多种颜色线性渐变的图片。创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。/*从上到下，蓝色... 查看详情

css3中的渐变效果

...性，通过渐变我们可以实现许多绚丽的效果。渐变可分为线性渐变和径向渐变。（1）线性渐变：沿着某条直线朝一个方向产生渐变效果语法：linear-gradient([<point>||angle]?<stop>,<stop>[,<stop>]*)　　参数说明：　　　... 查看详情

css3--渐变

...个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用CSS3渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient... 查看详情

css3渐变

...个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用CSS3渐变，你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变是由浏览器生成的... 查看详情

div背景颜色怎样渐变css实现div层背景颜色渐变代码

...下图为hover之后的效果：相关代码如下：扩展资料：mozilla使用CSStransitions参考技术ACSS3渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。CSS3定义了两种类型的渐变（gradients）：线性渐变（LinearGradients）-向下... 查看详情

[css揭秘]切角效果

将角切掉也是一种流行的设计风格传统解决方案可能是使用三角形或者其他形状的图片来盖住边角从而模拟切角效果有了CSS3,我们完全可以使用新技术来实现第一种方案:CSS渐变需求一:一个矩形需要切掉一个45°角使用线性渐变... 查看详情

css3实现渐变

...器：—webkit-firebox浏览器：-moz-Opera浏览器：-o-渐变分为：线性渐变（LinearGradients）向下/向上/向左/向右/对角方向径向渐变（RadialGradients）由中心定义从上到下的线性渐变如何创建一个带有彩虹颜色和文本的线性渐变从... 查看详情

用css3实现带有阴影效果和颜色渐变的按钮

...属性box-shadow和transition来实现如下所示的带有阴影和颜色渐变效果的按钮(下面这个只是图片；本想直接在这个页面下嵌html的,,试了后发现有些css样式貌似不给用就只能放图片了...=_=)：首先是box-shados语... 查看详情

css3中如何实现渐变效果

CSS3里面的线性渐变：linear-gradient1、语法2、参数第一个参数:指定渐变方向，可以用“角度”的关键词或“英文”来表示：第一个参数省略时，默认为“180deg”，等同于“to bottom”。第二个和第三个参数，表示颜色的起始点和... 查看详情

css3-线性渐变

一、渐变（gradient）1.1关于渐变渐变表示从一种颜色平滑的过度到另一种颜色。它是图片<image>类型的一种，但是渐变类型图片没有尺寸，也没有长宽比。它的尺寸取决于被应用的场景，比如作为元素的背景图片时，其大小取... 查看详情

css3-线性渐变

第161天：css3实现兼容性的渐变背景(gradient)效果

...是0.5。二、IE浏览器下的渐变背景IE浏览器下渐变背景的使用需要使用IE的渐变查看详情

css3渐变的背景色

...渐变的背景色，一般可以制作背景图，如果仅仅是简单的线性变换的背景，今天我就遇到了，其实完全可以用CSS3的渐变来实现这个效果。这个过程由浏览器来生成，不用去加载静态的资源，提高性能。渐变有两种：线性渐变（Li... 查看详情