wordpress主题制作鼠标经过图片四周出现阴影效果
建站知识 2016-03-09 2361 0 评论 admin

当今互联网上的网站各式各样,有些效果看起来很酷,其实这些效果在wordpress主题制作中要实现起来挺简单的,下面分享一个比较常见的效果给大家,就是当鼠标经过图片时,图片的四周出现阴影效果,就像火狐浏览器的“新标签页”里的那些图片,只要用鼠标指向那些图标,图片的四周就会出现阴影的效果,那么是怎么实现的呢?其实很简单的,只要在需要放置图片的DIV里添加如下代码即可。

1
2
.classname img:hover{box-shadow:0 1px 13px rgba(34,25,25,1);-moz-box-shadow:0 1px 13px rgba(34,25,25,1);
-webkit-box-shadow:0 1px 13px rgba(34,25,25,1);}

这里特别要注意一点的就是.classname是指你当前的div的class的名字,比如我要在新闻页面放置阴影图片,那么先给图片的div定义一个class名,我们可以定义为class=newsfont,然后在css里就要定义一个相应的class名为.newsfont,然后添加上面的鼠标经过代码就可以了,下面给大家演示一个完整的代码的写法。

1、首先是图片的调用

1
2
3
<div class="newsfont">
<img src="图片地址" />
</div>

2、然后是css的定义

1
2
.newsfont img:hover{box-shadow:0 1px 13px rgba(34,25,25,1);-moz-box-shadow:0 1px 13px rgba(34,25,25,1);
-webkit-box-shadow:0 1px 13px rgba(34,25,25,1);}

不管在什么地方,想要给图片添加阴影效果的话,只需要在相应div的class里添加鼠标经过代码就可以了。

继续浏览有关: , 的文章
版权声明:版权归 wp仿站之家 所有,转载请注明出处!
转载请保留链接: http://www.linw.net/585.html
联系wp仿站之家:5946394#qq.com (#改为@)
wp仿站微信公众号:linw_net
官网淘宝店:http://shop111710277.taobao.com/
wp仿站之家
手机扫一扫
进淘宝店铺选购主题

用心做最好的主题网站wp仿站之家

wp仿站之家是一个专业的wordpress仿站业务网站,提供wordpress主题模板下载以及seo网站优化服务,诚信经营,用心服务每一个客户,让您放心享受我们的优质服务。同时,也欢迎各位建站爱好者加入我们交流建站经验心得。

上一篇: 下一篇:

发表评论

服务咨询