注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

猪儿不懒

UI设计 前端开发 HTML5+CSS3

 
 
 

日志

 
 

【引用】Jquery&CSS 实现鼠标悬停点亮图案效果  

2011-10-13 22:49:29|  分类: 设计教程与素材 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
JqueryCSS 实现鼠标悬停点亮图案效果 - 新松 - 新松
 Jquery&CSS 实现鼠标悬停点亮图案效果

首先先说下这个思路,这个效果,是我答应在公司首页,所以图标实现当鼠标悬停时候,被点亮像呼吸闪灯一样,于是做了一个这样的效果。

先看效果 源文件:    传送门

讲下原理,首先放一个<div id="mylogo" >,设置背景为灰色图片背景,通过JQuery动态添加
jQuery("#mylogo").append("<span class='hover'></span>");
<div id="mylogo" >添加 span 
设置css让它覆盖在
<div id="mylogo" >上面,并设置它的背景为彩色图片背景,
但是通过jQuery('.hover').css('opacity', 0); 把span的透明度设置为 0,所以看到的还是低下层的背景灰色。

当鼠标悬停时出发jQuery('.hover').stop().animate({opacity: '1'},1000);
}
用1秒的时间让span的透明度到1(即100%)这样就能看见彩色的图片了,

同样的道理鼠标移开时候,透明度用一秒恢复到0;看到的就是灰色的背景: 

这里还用了两个css3的属性

圆角边框:border-radius: 5px
div阴影效果box-shadow:2px 2px 5px #333333;

效果还是很简单的代码量不是很多,如果有什么不明白的留言交流。


  评论这张
 
阅读(106)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017