好的网站 logo 会让人留下深刻的印象,logo 就像是招牌一样,必须得擦亮。之前分享过xiu 主题给焦点图添加鼠标悬停一道光滑过特效,同理,我们可以给 logo 添加一道光滑过。
1、打开functions.xiu.php
,按 ctrl+F 搜索代码:
echo '<'.$tag.' class="logo"><a href="'.get_bloginfo('url').'" title="'.get_bloginfo('name')._hui('connector').get_bloginfo('description').'">'.get_bloginfo('name').'</a>
在其后添加代码:
<i class="light"></i>
2、添加 css 样式
.light{ cursor:pointer; position: absolute; left: -160px; top: 0; width: 160px; height: 79px; background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0)); background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0)); transform: skewx(-25deg); -o-transform: skewx(-25deg); -moz-transform: skewx(-25deg); -webkit-transform: skewx(-25deg); } .logo:hover .light{ left:300px; -moz-transition:0.5s; -o-transition:0.5s; -webkit-transition:0.5s; transition:0.5s; }
3、鼠标放上去就可以擦亮金子招牌啦!
你可能对这些文章感兴趣:
- 网站广告被屏蔽显示一张图实现方法
- WordPress免插件插入文章索引/文章目录
- 利用editplus删除WordPress代码中多余空行
- vscode调试php,php环境采用phpstudy搭建
- WordPress根据用户名获取用户id:get_user_by()
- 【WordPress建站基础】网站布局经典图文教程(2)
- 教你看懂js文件中的正则表达式(一)
- 因ereg_replace()弃用引起的WordPress主题无法正常使用的解决办法
- xiu主题如何给评论回复添加@
- WordPress升级到WordPress4.9的办法
- 陌小雨博客新增打印和扫码功能
- 没有任何前兆,我的文章被万网给和谐了。
- 修复xiu主题首页cms布局错位
- WordPress调用分类目录文章如何让第一篇文章与后面的文章显示不同的样式
如有疑问,请前往问答中心反馈!
反馈