当前位置:首页 > 求生之路 > 行业笔记 > 正文内容

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

Znanr4周前 (01-28)63


这个代码是从网上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;
}
}


扫描二维码推送至手机访问。

版权声明:本文由Znanr发布,如需转载请注明出处。

标签: HTMLCSS
分享给朋友:
返回列表

上一篇:PS不能直接拉入图片啦!怎么办

没有最新的文章了...

相关文章

PS不能直接拉入图片啦!怎么办

PS不能直接拉入图片啦!怎么办

1、点进开始按钮+R,这时候会出现-运行,我们要在运行里输入“ regedit“,点击确定2、这时出现很多文件夹,找到HKHKEY_LOCAL_MACHINE–SOFTWARE–Microsoft–W...

原笔记问题记录誊抄

HTML之ul 背景色不显示由于ul没有直接制定高度,其高度根据里面的li来伸缩。由于li设置了向左浮动,因此得清除浮动才能显示背景色。1. 清除浮动可以给ul添加一个overflow:hidden的...