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

使用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发布,如需转载请注明出处。

本文链接:https://znanr.com/?id=74

标签: HTMLCSS

相关文章

前端:如何屏蔽审查元素,禁止修改页面代码

前端:如何屏蔽审查元素,禁止修改页面代码

众所周知,审查元素的情况下,大家都可以随机更改一部分页面的代码,注入恶意JS等等,这种情况避免也不难,虽然还能看到一部分H5源码,但是无法修改一、屏蔽F12 审查元素document.onkeydow...

旧版的Html页面插入flash代码

旧版的Html页面插入flash代码

代码有很多种,我在这里总结了一下最平常的插入方 式,以便下回能够直接拿来使用。Html插入flash代码方法<object?classid=“clsid:d27cdb6e-ae6d-11cf-9...

HTML5轮播图片段

HTML5轮播图片段

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

Unicode码的转换实现网页加密,防止破解

Unicode码的转换实现网页加密,防止破解

<HTML> <HEAD><SCRIPT LANGUAGE=”Javascript”><!–//此网页已加密! 请联系客服获取密码!...

在线网页扒皮,良心站长!

在线网页扒皮,良心站长!

今天在CSDN看到有Coder的铁子给分享了一个在线扒皮工具,本人觉得这种工具多的是,在爬jq的时候顺便试了一把。我去,真TN的干净,这工具站长做的很酷啊,最起码我不用去各种乱找乱删了。现在给大家也分...

网页头部导航透明置顶  CSS样式

网页头部导航透明置顶 CSS样式

网页头部导航透明定制 CSS样式border-bottom: 1px solid #dae1e7;    background: #000000b5;    p...