当前位置:首页 > 日志记录 > 临时笔记 > 正文内容

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


这个代码是从网上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
分享给朋友:

相关文章

tp5 框架使用笔记

tp5 框架使用笔记

tp5 开发流程下载源码框架 ——> 在application文件中新建对应的某块(如后台的首页admin、文章article) ——> 在application文件中对于的模块下建立co...

div加边框css

div加边框css     background-color: rgba(255, 255, 255, 1); &n...

tp5入门笔记(1)

tp5入门笔记(1)

模板引用*打开根目录config.php文件,将应用试调模式打开ture'app_debug'  => false,改成true1、将模板的js、css、images放...

HTML5轮播图片段

<!DOCTYPE html> <html> <head>     <meta char...

原笔记问题记录誊抄

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

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

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

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