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

网站logo扫光效果CSS写法

zjsn8个月前 (02-05)技术教程343

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

让网页实现自动跳转的6种方法

让网页实现自动跳转的6种方法

网站站长有时需要某个网页自动跳转,如何实现呢,在这里分享下办法:第一种网页自动跳转方法:meta refresh自动跳转法在网页的head区域的meta refresh标签中,加入自动跳转代码,可实现网页的立即或延时自动跳转。 示例如下: <meta http-equiv="...

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

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

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

PbootCMS后台去版权显示教程

PbootCMS后台去版权显示教程

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

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搜索结果页面。作为一个精神洁癖和强迫症双重患者,怎堪忍受如此行径。在系统...

发表评论

访客

看不清,换一张

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