求助。。一个JS特效思路！！！

野糖网首页导航条上面的特效图标，当鼠标移入慢慢变成圆，移出的时候回到原来的样子！
网址是：yetang.com 大神去看看，小弟求思路！

图片来自：go冉666的百度相册

当鼠标移入小图标，慢慢变成圆！慢慢四周扩散变成圆

不感兴趣

开通SVIP免广告

css3 动画

鼠标放上显示那个div
jQuery fadeIn() 用于淡入已隐藏的元素。

css3动画,,可能没有JS

可以打开控制台自己看嘛，网站的这部分CSS代码：
.transitionl{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease-in-out;
}
.nav-large .nav-a:hover em.transitionl, .nav-large .nav-a.on em.transitionl {
padding: 35px;
margin-left: -36px;
margin-top: -35px;
}

给两个事件加不同的 border-radius elem.className

CSS3 搞定

不感兴趣

开通SVIP免广告

<!DOCTYPE html>
<html>
<head>
<title>CSS3</title>
<style>
em{
position:absolute;
top:200px;
left:200px;
background-color:#32a4d2;
display:block;
}
em.transitionl{
width:8px;
height:8px;
border-radius:4px;
}
em.transitionl:hover{
padding: 35px;
margin-left: -36px;
margin-top: -35px;
border-radius:40px;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease-in-out;
}
</style>
</head>
<body>
<em class="transitionl"></em>
</body>
</html>

上面这个效果是根据野糖网的效果粗略的做了一下，动画效果是直接copy过来的，至于下面的字，你自己去研究吧，大方向已经给你做出来了

扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频！

9回复贴，共1页

<<返回javascript吧

分享到:

日	一	二	三	四	五	六