【180day网站】29-35

注：本文中代码来自jennifer dewalt的网站。

1、按钮按下去时凹陷的效果，阴影变换实现：

#button {
	height: 32px;
	padding: 0 20px;
	font-size: 18px;
	border: 1px solid rgba(0, 0, 0, 0.3);
	border-top: 1px solid rgba(255, 255, 255, 0.3);
	border-left: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: none;
	background-color: #110bc1;
	color: #d8d7de;
	vertical-align: top;
	cursor: pointer;
}
#button:active {
	background-color: #00008E;
	border: 1px solid rgba(0,0,0,0.3);
	border-bottom: 1px solid rgba(255,255,255,0.3);
	border-right: 1px solid rgba(255,255,255,0.3);
}

2、有光泽的黑色球：

#ball_container {
	font-family: Geneva, Tahoma, Verdana, sans-serif;
	position: relative;
	height: 400px;
	width: 400px;
	margin: auto;
	border-radius: 50%;
	background-color: #0f0f0f;
}
#ball {
	height: 400px;
	width: 400px;
	border-radius: 50%;
	box-shadow: inset -50px -50px 40px rgba(0, 0, 0, 0.5);
	background-color: #0f0f0f;
	background: -webkit-radial-gradient(80px 40px, circle, rgba(255,255,255, 0.3), transparent 70%);
}

3、animation: linear 匀速运动

4、$(selector).trigger(event); 触发元素selector的事件。

5、jquery以对象字面量作为参数创建新元素：

var newElement = $("<div>", 
			{id: 'card' + position, 
			class: 'card'
		});

6、圆形嵌套按钮效果，借用了input[type='submit']本来的特性。

.stop {
	background-color: #e3193b;
	border: 10px solid #9c1129;	
}

<span style="font-family: Arial, Helvetica, sans-serif;">.stop:active {</span>

	box-shadow:  -1px -1px 2px rgba(255,255,255,0.3) inset, 1px 1px 1px rgba(0,0,0,0.5) inset, 1px 1px 3px rgba(0,0,0,0.5);
	background-color: #9c1129;
}

7、-webkit-transform: rotateY(40deg) perspective(400px); 近大远小的视觉效果，如图：