AIDE技术官网
AIDEZY.COM

WordPress实现鼠标移动到图片缓缓变大

WordPress实现鼠标移动到图片缓缓变大

WordPress实现鼠标移动到图片缓缓变大

前言:

WordPress实现鼠标移动到图片缓缓变大,如果对你有帮助就看看吧。

正文:

WordPress实现鼠标移动到图片缓缓变大 WordPress教程 第2张

今天无陌然给大家写一篇文章吧,关于Wordpress的,具体是什么呢,大家可以把鼠标放到本站文章的图片位置,图片会有一个缓缓放大的效果鼠标离开之后呢,又会缓缓的变回去。

这个功能呢,是我刚刚添加的,之前本站是没有的,为什么要添加呢,因为经过站长的观察,已经有很多网站都有这个功能了,慢慢的已经普及了,现在呢当然也迫不及待的想给大家分享出来了,希望对你有帮助。

首先这个功能的原理就是利用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; 
}
/*首页图片鼠标放上去放大结束*/

搜一下

海报生成 赞(0) 打赏

来都来了!评论一下呗! 抢沙发

  • QQ (自动获取名称头像等信息|选填)
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址 (选填)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

登录

忘记密码 ?

切换登录

注册