陌小雨总觉得 xiu 主题的焦点区域设置的那个大图太简单了,没有任何特效,这不突发奇想,准备给他加一个特效:当鼠标悬停在图片上时,一道光滑过。
1、在主题style.css
下加入如下代码:
.large{ position: relative; display: block; /* overflow: hidden; */ box-shadow: 0 0 10px #FFF; } .light{ cursor:pointer; position: absolute; left: -300px; top: 0; width: 300px; height: 266px; 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); } .large:hover .light{ left:300px; -moz-transition:0.5s; -o-transition:0.5s; -webkit-transition:0.5s; transition:0.5s; }
其中.large
为该焦点图li
的 class 属性
2、在主题文件functions.php
中搜索 hui_posts_focus()
,然后找到下面这行代码:
$html .= '<li class="large"><a'.hui_target_blank().' href="'._hui('focus_href').'"><img class="thumb" data-original="'._hui('focus_src').'"><h4>'._hui('focus_title').'</h4></a></li>';
在 li 标签结束符号前面加一个属性
<i class="light"></i>
修改后变为
$html .= '<li class="large"><a'.hui_target_blank().' href="'._hui('focus_href').'"><img class="thumb" data-original="'._hui('focus_src').'"><h4>'._hui('focus_title').'</h4></a><i class="light"></i></li>';
刷新首页就可以看到效果了。
你可能对这些文章感兴趣:
- WordPress网站利用body_class()实现多种布局
- 博客文章底部的随机语言是怎么实现的?
- WordPress插件推荐:xiu主题开启ajax和全站无刷新音乐的办法
- xiu主题手机端显示侧边栏
- xiu主题的手机端和非手机端广告位后台设置是如何实现的?
- 给xiu主题添加一个浮动小人
- 分享适合xiu主题的多说评论样式
- xiu主题修改社交字符
- xiu主题给评论添加签到按钮
- xiu主题添加vip等级评论样式
- xiu主题文章版权申明优化
- 分享陌小雨博客导航外链跳转样式及xiu主题评论用户名外链修改办法
- xiu主题仿dux主题搜索弹出框,让百度站内搜索和wordpress自带搜索共存。
- 美化xiu主题Blockquote样式
如有疑问,请前往问答中心反馈!
反馈