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

网站logo扫光效果CSS写法

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

现在许多网站可以看到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写法” 的相关文章

PbootCMS如何创建多语言企业网站(转载)

PbootCMS如何创建多语言企业网站(转载)

因为给一个做外贸的朋友制作企业网站,用到了PbootCMS,却发现系统默认只有一种中文语言,如何同时增加一个英文语言前台呢,网上搜索别人的教程,在这里引用下,当然本人也会根据实际操作经验在这里随时修改完备。一、添加多语言步骤1、在后台【系统管理】-【数据区域】添加相应的区域,具体参考默认区域注:区域...

PbootCMS后台去版权显示教程

PbootCMS后台去版权显示教程

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

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

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

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

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

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

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

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

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

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

西京同城导航站部分网站点入不会自动排第一位置bug修复办法

西京同城导航站部分网站点入不会自动排第一位置bug修复办法

昨天发现,部分网站链接点入西京同城导航站,结果不会自动排到第一位,后来咨询作者,得以修复这个bug,下面是该问题解决步骤:1. 进入宝塔面板,已安装软件,找到mysql数据库,在设置内增加一行配置代码,event_scheduler = on如下图,然后重启数据库服务让配置生效。...

发表评论

访客

看不清,换一张

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