网站建设

给 Discuz! 的logo增加一个炫酷扫光效果

给 Discuz! 的logo增加一个炫酷扫光效果
1、打开模板header.htm默认模板路径是/template/default/common/header.htm
2、在header.htm的125行左右查找

<a href="{if $_G['setting']['domain']['app']['default']}http://{$_G['setting']['domain']['app']['default']}/{else}./{/if}" title="$_G['setting']['bbname']">{$_G['style']['boardlogo']}</a>

修改成

<a href="{if $_G['setting']['domain']['app']['default']}http://{$_G['setting']['domain']['app']['default']}/{else}./{/if}" title="$_G['setting']['bbname']"><div class="logo">{$_G['style']['boardlogo']}</div></a>

3、管理员身份登陆Discuz!后台-全局-seo设置-其他-其他头部信息 里面添加

<style type="text/css">
.logo{line-height:90px;float:left;overflow:hidden;position:relative;}
@-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}
}
.logo:before{content:"";position:absolute;left:-665px;top:-460px;width:220px;height:15px;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 1s ease-in 1s infinite}
.logo img{-webkit-transition:all .4s;-moz-transition:all .4s;-ms-transition:all .4s;-o-transition:all .4s;transition:all .4s}
</style>

相关参数可以根据需求自行修改。扫光效果参见本站!

 
(2)

本文由 先锋资源 作者:先锋资源 发表,转载请注明来源!

关键词:,

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注