好的网站 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文章发布后自动同步到新浪微博(新增特色图片)
- 零起点php入门第17课-php面向对象编程(1)
- 人家是牛逼,但和你有啥关系?
- WordPress加速:只显示上传到本文章中的图片
- WordPress插件推荐:终极简码Shortcodes Ultimate
- 今天发现站长工具site博客首页位置不在第一了
- WodPress如何建立纯文本导航(无超链接)
- 零起点php入门第1课-php数据类型
- 万网虚拟主机安装WordPress提示500 Internal Server Error报错的解决方法
- WordPress问答插件DW Question Answer美化版分享
- 给wordpress后台文章发布加把锁
- 如何使定时发布的文章全部自动延时1天或者2天
- WordPress主题制作必备知识
- 30分钟学会Dedecms织梦仿站
如有疑问,请前往问答中心反馈!
反馈