十五年风雨路 · 一心铸精品

一个官网 留一件精品 做一个项目 树一块样板

CSS轻松实现网站Logo扫光效果(亲测有效)

上一篇我们提到: 如今,在成都很多传统的公司企业老板们都觉得现在生意越来越难做。如果公司没有网站和seo优化推广,那真的会损失很多很多!其实生意越来越难做,成都网站建设公司四川冠辰科技可以帮你大忙!其实,不是生意不好做,而是时代在变,你没有变。 传统企业主要靠卖产品:打个电话,打个电话,打个电话,说三遍重要的事

接下来我们进入今天的正文:
2022-04-12

最近有网友跟我反馈,想要一个logo扫光的特效,第一款主题梦想家就有这个特效,不过后期也有人反馈说太卡,使用主题的时候CPU就爆了,好吧,那我就撤了,把相关的特效删除了没在跟紧,记得之前文章中有谈到过这个事情,也是因为logo特效导致网站有些卡,所以他就给删除了,然后也好了,很神奇是不?我就想着为什么有些人会卡有些人不卡呢,服务器配置太低,但是一个css而已的,应该占不上太多的资源吧,抽空把css的logo扫光特效优化下,在主题模板中也用上了最新的logo扫光,当然也一定是加上了开关,并不是所有人都喜欢的就弄个开关吧,两者互不影响,好了现在把代码献出,自行折腾。


html代码:

<div class="logo">

<a href=https://www.scgckj.com/>

<img src="https://www.talklee.com/images/logo.png">

</a>

</div>


css代码:

.logoa{

overflow:hidden;

display:block;

}

.logoa:before{

content:;

position:absolute;

top:-50px;

left:-15px;

width:250px;

height:12px;/**光标的宽度,可根据实际调整**/

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:flashlights1sease-in1sinfinite;

-o-animation:flashlights1sease-in1sinfinite;

animation:flashlights1.5sease-in1sinfinite;/**1.5数字参数控制扫光速度,数字越大越慢**/

}

@-webkit-keyframesflashlights{

0%{left:-100px;top:0;}

to{left:120px;top:100px;}

}

@-o-keyframesflashlights{

0%{left:-100px;top:0;}

to{left:120px;top:100px;}

}

@-moz-keyframesflashlights{

0%{left:-100px;top:0;}

to{left:120px;top:100px;}

}

@keyframesflashlights{

0%{left:-100px;top:0;}

to{left:120px;top:100px;}

}


经过测试没有问题了,实际使用几天再看看效果吧,主题模板有更新的基本都会加上去,至于是否开启扫光特效根据个人喜好而定吧,直接使用是不能够的,毕竟不是所有的主题模板都是使用logo命名,都得需要修改一些基础代码,记得修改之前要备份!备份!备份!要知道养成良好的备份习惯有多么的牛掰,好了,有问题留言反馈,一起学习,一起折腾!


二维码

扫一扫,浏览关注本文

主营业务

  • 高端网站定制
  • SEO网站优化
  • 手机网站建设
  • 网站维护
  • 网页设计制作
  • 微信小程序开发

TAGS

随机案例

  • 晋沙汇川服装定制网站建设

    晋沙汇川服装定制网站建设

  • 宏冠服饰网站建设

    宏冠服饰网站建设

  • 高铁乘务/成都职业学校/四川高铁职业技术学校/网站建设

    高铁乘务/成都职业学校/四川高铁职业技术学校/···

  • 功夫蚂蚁餐饮火锅加盟网站建设

    功夫蚂蚁餐饮火锅加盟网站建设

  • 阿杰美容美发培训网站建设

    阿杰美容美发培训网站建设

  • 婴之皇/孕婴/母婴连锁加盟/网站建设

    婴之皇/孕婴/母婴连锁加盟/网站建设

  • 金鹿凯斯服饰/服装网站建设

    金鹿凯斯服饰/服装网站建设

  • 伊卡璐服饰/服装网站建设​

    伊卡璐服饰/服装网站建设​

案例展示 / CASE

五菱电动观光车网站建设

网站以HTML5制作,pc+wap网站制作自动跳转。关键词:五菱观光车网站建设,五菱巡逻车网站建设,封闭电动巡逻车网站建设,封闭电动观···

查看详情

明霆基础工程网站建设

查看详情

康伟管业/PP超静音排水管材/网站建设

查看详情

蜀丰食品包装网站建设

实力让我们引领行业为您锁住健康,让食品更安全,让生活更健康!成都市都江堰市蜀丰食品包装有限公司成立于2014年初,是一家集研···

查看详情

晋沙汇川服装定制网站建设

查看详情

新文必生印务、印刷网站建设、包装网站建设

成都印刷网站建设,成都印刷厂网站设计,成都画册印刷网站制作,成都画册制作网站建设,成都印刷厂家网站建设,四川印刷网站建设,四川···

查看详情

伊卡璐服饰/服装网站建设​

网站以定制,订制服装网站建设为主的关键词,网站全新的以HTML5框架定制设计,整站目录清新明了,利于网站优化,搜索引擎蜘蛛爬行···

查看详情

宏冠服饰网站建设

查看详情

天翊装饰网站建设

天翊装饰公司网站以html5响应式一体化设计制作,高端大气上次,关键词:装修公司网站建设,装饰公司网站建设,成都装修公司网站建···

查看详情

功夫蚂蚁餐饮火锅加盟网站建设

功夫蚂蚁是一家专注于麻辣烫,火锅,串串香行业的优质餐饮连锁加盟公司。提供火锅串串香加盟免费指导、火锅加盟店选址等,让您在加盟···

查看详情

高铁乘务/成都职业学校/四川高铁职业技术学校/网站建设

查看详情

阿杰美容美发培训网站建设

查看详情

联系我们 / CONTACT US

  • 四川省成都市金牛区五福桥东路229号龙湖北城天街28栋903
  • 服务热线:028-86088588  18080432432(微信同号)
  • 总机:028-62322623-0
  • QQ:3575114  107086147

扫码访问手机网站

版权所有 Copyright © 2007-2022 四川冠辰科技开发有限公司    川公安网备案:51010602001006号     

地址:四川省成都市金牛区五福桥东路229号龙湖北城天街28栋903  蜀ICP备11012605号-1

始于2007年,十五年品牌网站建设,值得信赖!  xml地图txt地图