当前位置：首页 > WEB前端 > HTML > 正文内容

使用HTML+CSS 给logo附加闪光效果

ZnanrHTML1751

这个代码是从网上copy的，研究了一下原理，大致是给图片类元素附加一个渐变，当然图片可以是LOGO,BANNR。

代码原理：先position定位，再调linear-gradient闪光角度，最后附加transition动作。

具体代码如下：

HTML：

<html>
<head>
<link href="./css/index.css" rel="stylesheet">
</head>
<body>
<div class="overimg"><a><img src="./你的LOGO.png"></a><i class="light"></i><div>
</body>
</html>

CSS样式：

/**logo闪光效果CSS**/
.overimg{
    position: relative; width:500px; height:335px;
}
.light{
    cursor:pointer;  /*定义鼠标的样式为小手*/
    position: absolute;left: -500px;top: 0;/*定位特效的使用区域*/
    width: 500px;height: 335px; 
/*下面有多个background-image和transform样式设定，其意思相同，写多个是为了设定内核兼容*/
/*-moz、-webkit、-o内核私有属性，针对兼容性*/
    background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));/*linear-gradient：创建一个线性渐变的 "图像"(从上到下)*/
    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);/*-定义沿着 X 轴的 2D 倾斜转换-25度。*/
    -moz-transform: skewx(-25deg);/*-moz内核私有属性，针对兼容性*/
    -webkit-transform: skewx(-25deg);/*-webkit内核私有属性，针对兼容性*/
}
.overimg a img{ width:100%; height:100%;}
.overimg:hover .light{
    left:500px;
/*transition闪光动态效果的核心标签*/
    -moz-transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    transition:0.5s;
}
}