这个功能呢,是我刚刚添加的,之前本站是没有的,为什么要添加呢,因为经过站长的观察,已经有很多网站都有这个功能了,慢慢的已经普及了,现在呢当然也迫不及待的想给大家分享出来了,希望对你有帮助。
首先这个功能的原理就是利用HTML5的CSS动画效果实现的,下面的代码就是本站添加的代码,当然不是适用于所有WordPress模板的,这代码只是基于我使用的模板可以使用,其他模板大家可自行更改一下CSS选择器即可,需要一点的代码基础,因为WordPress模板有无数多个,我不能做到一段代码所有模板都可以使用的,望理解!
实例代码:
/*首页图片鼠标放上去放大*/ .content article a.focus{ overflow: hidden; } .content article a.focus img{ cursor: pointer; transition: all 0.6s; } .content article a.focus img:hover{ transform: scale(1.1); } .sidebar .widget_ui_posts ul li a span img{ cursor: pointer; transition: all 0.6s; } .sidebar .widget_ui_posts ul li a span img:hover{ transform: scale(1.1); } .sidebar .widget_ui_posts ul li a span{ overflow: hidden; } .focusmo div.right-item img{ cursor: pointer; transition: all 0.6s; } .focusmo div.right-item img:hover{ transform: scale(1.1); } .focusmo div.right-item a{ overflow: hidden; } .focusmo div#focusslide-1 img{ cursor: pointer; transition: all 0.6s; } .focusmo div#focusslide-1 img:hover{ transform: scale(1.1); } .focusmo di#focusslide-1 a{ overflow: hidden; } /*首页图片鼠标放上去放大结束*/
浏览量: 15