妙味课堂网站动效demo

Study
css3, js

今天看到改版后妙味课堂的网站，有些动画特效很不错，就想着借鉴学习下。

首先是头部导航栏的特效，鼠标hover之后有logo的变化以及栏目的变化

先看html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<nav>
	<div class="nav_main clear">
		<!-- logo布局 -->	
		<div class="logo">
			<a href="/">
				<img src="http://www.miaov.com/static/normal/images/logo.png" class="logoBg" style="transform: scale(1);">
				<div class="logoText">
					<div class="text">
						<img src="http://www.miaov.com/static/normal/images/miaov.png" style="top: 0px;">
					</div>
					<div class="text">
						<img src="http://www.miaov.com/static/normal/images/miaov-cn.png" style="top: 0px;">
					</div>
					<div class="logoAll" style="opacity: 0;"></div>
					<span style="left: 270px;"></span>
				</div>
			</a>
		</div>
		<!-- menu布局 -->	
		<div class="menu">
			<div class="box" style="left: 0px; top: 0px; width: 64px; -webkit-filter: blur(0px);">
				<div class="left" style="width: 0px; left: 0px; background: rgb(225, 86, 113);"></div>
				<div class="right" style="width: 0px; right: 0px; background: url(&quot;http://www.miaov.com/static/normal/images/nav_bg.gif&quot;) repeat-x;"></div>
			</div>
			<ul>
				<li><a href="/">首页</a></li>
				<li><a href="#">课程</a></li>
                <li><a href="#">VIP会员</a></li>
				<li><a href="#">学员作品</a></li>
                <li><a href="#">关于我们</a></li>
				<li><a href="#" target="_blank">论坛</a></li>
				<li><a href="#">留言</a></li>
			</ul>
           <div class="loginBtn">
	           	<a href="javascript:;" data-showloginbox="javascript">登录</a>
	           	<a href="javascript:;" data-showregbox="javascript" class="last_login">注册</a>
           </div>
        </div>
    </div>
</nav>

接下来是css代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
nav{width:100%;height:41px;background:url(http://www.miaov.com/static/normal/images/nav_bg.gif) repeat-x;border-bottom:2px solid #e15671;position:relative;z-index:5;}
nav .nav_main{width:1050px;height:auto;position:relative;left:50%;margin-left:-525px;z-index:5;}
nav .nav_main .logo{width:249px;height:131px;position:absolute;top:0;left:0;}
nav .nav_main .logo .logoBg{transition:all .1s;}
nav .nav_main .logo .logoText{width:170px;height:100%;position:absolute;top:0;left:0;overflow:hidden;margin-left:10px;}
nav .nav_main .logo .logoText div{overflow:hidden;position:relative;}
nav .nav_main .logo .logoText div:nth-of-type(1){height:45px;}
nav .nav_main .logo .logoText div img{position:absolute;}
nav .nav_main .logo .logoText .logoAll{width:169px;height:69px;top:-69px;background:url(http://www.miaov.com/static/normal/images/miaov-all.png);}
nav .nav_main .logo .logoText div:nth-of-type(2){height:24px;}
nav .nav_main .logo .logoText span{position:absolute;left:-100px;top:42px;width:100px;height:5px;background:#e15671;}
.menu{float:right;white-space:nowrap;position:relative;}
.menu .box{width:0;height:100%;position:absolute;background:#e15671;left:0;overflow:visible;}
.menu .left{width:0;height:100%;background:#fff;border-radius:50%;position:absolute;top:0;left:0;}
.menu .right{width:0;height:100%;background:#f00;border-radius:50%;position:absolute;top:0;right:0;}
.menu ul{padding-right:25px;position:relative;}
.menu ul li{height:100%;display:inline-block;float:left;line-height:41px;color:#fff;font-size:14px;}
.menu ul li:first-child{border-left:none;}
.menu ul li a{color:#fff;display:block;padding:0 18px;}
.menu .loginBtn{position:absolute;height:23px;top:43px;right:25px;}
.menu .loginBtn a{display:inline-block;float:left;padding:0 13px;background-image:-moz-linear-gradient(top,#cf4c68,#e15671);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#cf4c68),color-stop(1,#e15671));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cf4c68,endColorstr=#e15671,GradientType='0');color:#ffdbe2;font-size:12px;height:100%;line-height:23px;border-right:1px solid #fff;}
.menu .loginBtn a:last-child{border:none;}

这样页面样式就出来了，然后就是关键的js控制样式的变化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
$(function() {
	function e(e) {
		if (v = e.offsetLeft > o.offsetLeft ? 1 : e.offsetLeft < o.offsetLeft ? 2 : 0) {
			var n = .8 * Math.abs(e.offsetLeft - o.offsetLeft);
			e.index != y && (o.style.filter = "blur(2px)", o.style.WebkitFilter = "blur(2px)"), move(o, {
				left: e.offsetLeft,
				width: e.offsetWidth
			}, n, "easeOut", function() {
				switch (v) {
					case 1:
						t();
						break;
					case 2:
						i();
						break;
					default:
						move(l, {
							width: 0,
							right: 0
						}, 30), move(f, {
							width: 0,
							left: 0
						}, 30)
				}
				o.style.filter = "blur(0)", o.style.WebkitFilter = "blur(0)"
			}), e.offsetLeft > o.offsetLeft ? (l.style.background = "#e15671", f.style.background = "url(http://www.miaov.com/static/normal/images/nav_bg.gif) repeat-x", move(l, {
				width: 40,
				right: -20
			}, 150), move(f, {
				width: 40,
				left: -20
			}, 150)) : e.offsetLeft < o.offsetLeft && (l.style.background = "url(http://www.miaov.com/static/normal/images/nav_bg.gif) repeat-x", f.style.background = "#e15671", move(l, {
				width: 40,
				right: -20
			}, 150), move(f, {
				width: 40,
				left: -20
			}, 150)), y = e.index
		}
	}
	function t() {
		move(l, {
			width: 0,
			right: 0
		}, 80, "linear", function() {
			l.style.background = "url(http://www.miaov.com/static/normal/images/nav_bg.gif) repeat-x", move(l, {
				width: 20,
				right: -10
			}, 80, "linear", function() {
				move(l, {
					width: 0,
					right: 0
				}, 50, "linear")
			})
		}), move(f, {
			width: 0,
			left: 0
		}, 80, "linear", function() {
			f.style.background = "#e15671", move(f, {
				width: 20,
				left: -10
			}, 80, "linear", function() {
				move(f, {
					width: 0,
					left: 0
				}, 50, "linear")
			})
		})
	}
	function i() {
		move(l, {
			width: 0,
			right: 0
		}, 80, "linear", function() {
			l.style.background = "url(http://www.miaov.com/static/normal/images/nav_bg.gif) repeat-x", move(l, {
				width: 20,
				right: -10
			}, 80, "linear", function() {
				move(l, {
					width: 0,
					right: 0
				}, 50, "linear")
			})
		}), move(f, {
			width: 0,
			left: 0
		}, 80, "linear", function() {
			f.style.background = "#e15671", move(f, {
				width: 20,
				left: -10
			}, 80, "linear", function() {
				move(f, {
					width: 0,
					left: 0
				}, 50, "linear")
			})
		})
	}
	// 	定义全局变量
	var initNum = 0;
	var n = document.getElementsByTagName("nav")[0],
		o = n.getElementsByClassName("box")[0],
		l = n.getElementsByClassName("right")[0],
		f = n.getElementsByClassName("left")[0],
		a = n.getElementsByTagName("ul")[0],
		s = a.getElementsByTagName("li"),
		m = n.getElementsByClassName("logo")[0],
		r = (m.getElementsByClassName("text"), m.getElementsByTagName("img")),
		g = m.getElementsByTagName("span")[0],
		u = m.getElementsByClassName("logoAll")[0],
		c = s[initNum].offsetLeft,
		h = s[0].offsetTop,
		d = initNum,
		y = 0,
		v = 0,
		b = !0,
		p = 0;
	o.style.left = c + "px", o.style.top = h + "px", o.style.width = s[initNum].offsetWidth + "px";
	for (var w = 0; w < s.length; w++) s[w].index = w, s[w].onmouseenter = function() {
		clearTimeout(p), e(this)
	};
	a.onmouseleave = function() {
		p = setTimeout(function() {
			e(s[d])
		}, 100)
	}, m.onmouseenter = function() {
		b && (b = !1, r[0].style.transform = "scale(1.05)", r[1].style.top = "47px", r[2].style.top = "-25px", u.style.opacity = 0, g.style.left = "-100px", move(g, {
			left: 270
		}, 300, "linear", function() {
			move(r[1], {
				top: 0
			}, 300), move(r[2], {
				top: 0
			}, 300, "linear", function() {
				move(u, {
					opacity: 1
				}, 300, "linear", function() {
					b = !0
				})
			})
		}))
	}, m.onmouseleave = function() {
		r[0].style.transform = "scale(1)"
	}
});

文件引用了一个move方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
function move(t, n, e, r, a) {
	clearInterval(t.iTimer);
	var u = e || 1e3,
		i = {};
	for (var o in n) i[o] = {}, "opacity" == o ? (i[o].b = Math.round(100 * css(t, o)), i[o].c = 100 * n[o] - i[o].b) : (i[o].b = parseInt(css(t, o)), i[o].c = n[o] - i[o].b);
	var r = r || "linear",
		c = (new Date).getTime();
	t.iTimer = setInterval(function() {
		var e = (new Date).getTime() - c;
		e >= u && (e = u);
		for (var o in n) {
			var f = Tween[r](e, i[o].b, i[o].c, u);
			"opacity" == o ? (t.style[o] = f / 100, t.style.filter = "alpha(opacity=" + f + ")") : t.style[o] = f + "px"
		}
		e == u && (clearInterval(t.iTimer), a && a.call(t))
	}, 16)
}
function css(t, n) {
	return t.currentStyle ? t.currentStyle[n] : getComputedStyle(t, !1)[n]
}
var Tween = {
	linear: function(t, n, e, r) {
		return e * t / r + n
	},
	easeIn: function(t, n, e, r) {
		return e * (t /= r) * t + n
	},
	easeOut: function(t, n, e, r) {
		return -e * (t /= r) * (t - 2) + n
	},
	easeBoth: function(t, n, e, r) {
		return (t /= r / 2) < 1 ? e / 2 * t * t + n : -e / 2 * (--t * (t - 2) - 1) + n
	},
	easeInStrong: function(t, n, e, r) {
		return e * (t /= r) * t * t * t + n
	},
	easeOutStrong: function(t, n, e, r) {
		return -e * ((t = t / r - 1) * t * t * t - 1) + n
	},
	easeBothStrong: function(t, n, e, r) {
		return (t /= r / 2) < 1 ? e / 2 * t * t * t * t + n : -e / 2 * ((t -= 2) * t * t * t - 2) + n
	},
	elasticIn: function(t, n, e, r, a, u) {
		if (0 === t) return n;
		if (1 == (t /= r)) return n + e;
		if (u || (u = .3 * r), !a || a < Math.abs(e)) {
			a = e;
			var i = u / 4
		} else var i = u / (2 * Math.PI) * Math.asin(e / a);
		return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin(2 * (t * r - i) * Math.PI / u)) + n
	},
	elasticOut: function(t, n, e, r, a, u) {
		if (0 === t) return n;
		if (1 == (t /= r)) return n + e;
		if (u || (u = .3 * r), !a || a < Math.abs(e)) {
			a = e;
			var i = u / 4
		} else var i = u / (2 * Math.PI) * Math.asin(e / a);
		return a * Math.pow(2, -10 * t) * Math.sin(2 * (t * r - i) * Math.PI / u) + e + n
	},
	elasticBoth: function(t, n, e, r, a, u) {
		if (0 === t) return n;
		if (2 == (t /= r / 2)) return n + e;
		if (u || (u = .3 * r * 1.5), !a || a < Math.abs(e)) {
			a = e;
			var i = u / 4
		} else var i = u / (2 * Math.PI) * Math.asin(e / a);
		return 1 > t ? -.5 * a * Math.pow(2, 10 * (t -= 1)) * Math.sin(2 * (t * r - i) * Math.PI / u) + n : a * Math.pow(2, -10 * (t -= 1)) * Math.sin(2 * (t * r - i) * Math.PI / u) * .5 + e + n
	},
	backIn: function(t, n, e, r, a) {
		return "undefined" == typeof a && (a = 1.70158), e * (t /= r) * t * ((a + 1) * t - a) + n
	},
	backOut: function(t, n, e, r, a) {
		return "undefined" == typeof a && (a = 2.0158), e * ((t = t / r - 1) * t * ((a + 1) * t + a) + 1) + n
	},
	backBoth: function(t, n, e, r, a) {
		return "undefined" == typeof a && (a = 1.70158), (t /= r / 2) < 1 ? e / 2 * t * t * (((a *= 1.525) + 1) * t - a) + n : e / 2 * ((t -= 2) * t * (((a *= 1.525) + 1) * t + a) + 2) + n
	},
	bounceIn: function(t, n, e, r) {
		return e - Tween.bounceOut(r - t, 0, e, r) + n
	},
	bounceOut: function(t, n, e, r) {
		return (t /= r) < 1 / 2.75 ? 7.5625 * e * t * t + n : 2 / 2.75 > t ? e * (7.5625 * (t -= 1.5 / 2.75) * t + .75) + n : 2.5 / 2.75 > t ? e * (7.5625 * (t -= 2.25 / 2.75) * t + .9375) + n : e * (7.5625 * (t -= 2.625 / 2.75) * t + .984375) + n
	},
	bounceBoth: function(t, n, e, r) {
		return r / 2 > t ? .5 * Tween.bounceIn(2 * t, 0, e, r) + n : .5 * Tween.bounceOut(2 * t - r, 0, e, r) + .5 * e + n
	}
};

到这里，nav的动态效果就完成了，首页还有字体的动效，基本实现思路是给每个字包裹一个span，给其添加绝对定位，通过top的改变实现平滑的移动。

这个下次再分享。

end.

Share Comments