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

网站logo扫光效果CSS写法

zjsn2个月前 (02-05)技术教程94

现在许多网站可以看到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:...

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

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

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

http和https带www不带www四个网址如何统一为一个

http和https带www不带www四个网址如何统一为一个

很早以前,站长做网站只需要http访问即可,这几年随着企业和用户对安全问题的重视,许多网站都已改为https加密访问。随之也可能出现这种情况,同一个页面内容,可以有四个不同的网站,分别是http访问,https访问,带www访问,不带www访问,作为一个SEOer,页面统一入口也成为一个不大不小的问...

百度收录网站带缩略图最新规则,如何让网站收录带缩略图

百度收录网站带缩略图最新规则,如何让网站收录带缩略图

许多站长关注自己网站的百度收录情况,可能有人和我一样每天要site:www.zjsn.net 好几次。有的人会问,为什么别人网站百度收录到的页面带缩略图,而自己的网站没带缩略图呢,如何才让自己网站也在百度内带上缩略图?就这个问题,本人做下解释什么样的网站百度收录带缩略图?通常是网站建立时间...

Win10系统22H2版本如何关闭讨厌的热门搜索推荐栏

Win10系统22H2版本如何关闭讨厌的热门搜索推荐栏

本人电脑以前是win10系统21H1版本,已经手动关闭了系统自带所有广告提示,今天电脑自动升级到了22H2版本,居然在使用本地搜索功能时出现一个热门搜索栏。里面显示乱七八糟的推荐内容,一旦点击,就会跳转到Edge浏览器中Bing搜索结果页面。作为一个精神洁癖和强迫症双重患者,怎堪忍受如此行径。在系统...

西京同城导航网站改版修改文件备注

西京同城导航网站改版修改文件备注

以下为本人修改西京同城导航站记录备份,以防万一忘记修改的地方2022.11.22(1)手机端隐藏首页点图大图(2)手机端侧边栏点图自适应宽度(3)申请收录页面一行填写两项改为一项2022.11.23(4)增加首页侧边栏分类显示(5)修改点出图片系统自适应浏览器宽度(6)修改手机端下方单链友链一行显示...

发表评论

访客

看不清,换一张

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