当前位置:首页 > 源码分享 > 技术教程 > 正文内容

网站logo扫光效果CSS写法

zjsn1年前 (2023-02-05)技术教程557

现在许多网站可以看到logo上一道光芒扫过的效果,这种效果最早是用flash实现,后来gif动画也可以做出来,不过现在流行的是纯CSS实现。本人也是从别人网站看到CSS写法,加到我的网站中,结果发现logo处光芒扫过超出了范围,用overflow:hidden语法也不管用,可有知道哪里问题朋友还请赐教。下面是网上找到的CSS光芒扫过logo代码

logo:before{  /**根据logo外div样式名称修改before前名称**/
    content:"";
    position: absolute;
    left: -665px; /**第一个数字参数控制扫光速度,数字越大越慢**/
    top: -460px;
    width: 200px;
    height: 10px; /**光标的宽度,可根据实际调整**/
    background-color: rgba(255,255,255,.5);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: searchLights 1s ease-in 1s infinite;
    -o-animation: searchLights 1s ease-in 1s infinite;
    animation: searchLights 1.5s ease-in 1s infinite;/**第一个数字参数控制扫光速度,数字越大越慢**/
}
@-webkit-keyframes searchLights {
    0% { left: -100px; top: 0; }
    to { left: 120px; top: 100px; }
}
@-o-keyframes searchLights {
    0% { left: -100px; top: 0; }
    to { left: 120px; top: 100px; }
}
@-moz-keyframes searchLights {
    0% { left: -100px; top: 0; }
    to { left: 120px; top: 100px; }
}
@keyframes searchLights {
    0% { left: -100px; top: 0; }
    to { left: 120px; top: 100px; }
}

使用类似效果网站如知更鸟:https://zmingcx.com/  https://101dh.cn/

zgn.jpg

版权声明:本文由指尖十年发布,如需转载请注明出处,如有问题可在下面留言。

本站提供的一切软件、教程和内容信息来自网络收集整理,版权争议与本站无关,仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系

本文链接:https://www.zjsn.net/?id=57

分享给朋友:

“网站logo扫光效果CSS写法” 的相关文章

QQ/微信提示已停止访问该网页如何解除

QQ/微信提示已停止访问该网页如何解除

许多站长都有过域名在qq或者微信爆红的经历把今天指尖十年教你们一个解除域名的方法教程开始1.首先随便找个单页源码挂到网站上面,让别人一打开就知道你这个网站是个单页2.把你爆红的域名绑定上去(@和*都要解析)3.然后将域名放置三天不要动4.一个星期之后访问这个地址提交申诉,第二天就能解除了https:...

如何用JS代码制作网页复制功能

如何用JS代码制作网页复制功能

利用JS脚本来实现点击某个按钮或某段文字来复制相应的内容,网上提供了很多种方法,比如接管浏览器的复制功能,使用一些js复制插件等等,下面博文提供一个很多的js方法,几行代码的就能实现。js实现点击复制的功能先用js定义一个复制功能的函数,在复制触发时调用即可!/**  * @n...

PbootCMS后台去版权显示教程

PbootCMS后台去版权显示教程

PbootCMS是一个很不错的PHP建站系统,但后台一些明显的PbootCMS字样看着不舒服,本人在此分享下自己和其他网友总结出来的经验。特别说明,本人只是修改一些明显的碍眼字样,请大家一起尊重PbootCMS 知识产权。(一)后台登录界面明显字样去除办法:此页面模板为 apps/admin/vie...

PbootCMS模板主题可用标签大全(PbootCMS仿站必备标签)

PbootCMS模板主题可用标签大全(PbootCMS仿站必备标签)

以下为PbootCMS网站模板可用标签收集整理大全,免费分享1、公司信息标签适用范围:全站任意地方均可使用。标签作用:用于调取网站与公司相关的信息,对应后台的“基础内容>公司信息”。{pboot:companyname}公司名称{pboot:companyaddress}公司地址{pboot:...

全国各地优势产业大全一览(原产地特产)

全国各地优势产业大全一览(原产地特产)

无论你是做电商,微商,直播带货,都需要知道各地的优势产业,下面为大家分享全国各个产业带产地搜索省流助手:羽绒服:共青城、吴江、常熟睡  衣:汕头、佛山、揭阳、普宁、中山袜  子:诸暨、江阴羊毛衫:海阳(山东)羊绒衫:清河(河北)羊绒大衣:大连泳  装:葫芦岛手 ...

新版本微信内置浏览器清理缓存方法,debugx5.qq.com已失效

新版本微信内置浏览器清理缓存方法,debugx5.qq.com已失效

网上流传的安卓微信清理内置浏览器缓存方法已失效,因为微信内置浏览器据说不再是X5内核,改为使用xweb内核下面几个X5内核清理缓存网址也失效了。https://debugx5.qq.com http://debugtbs.qq.com debugmm.qq.com/?forcex5=true因为...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。