Tag Archives: html5/css3

偷来的漂亮css3导航菜单的正确打开方式

菜单的源:
首先说明一下css3中-webkit-transform中translate()方法。
CSSMatrix translate(x, y);
x, y都是相对位移。相对谁的位移呢?没错,相对这个元素在页面加载完成的那一刻,该元素的位移。

比如说,某元素在以浏览器左上角为原点的坐标为(100, 100)。
来一个translate(100, 0) (当然地,这里用jquery的css()方法,下同)它就跑到(200, 100)去了。
接着来一次translate(-100, 0),他就跑到(0, 100)去了。
如果想复位,执行translate(0, 0)即可。

接着来说那段坑爹的js。原始代码带上注释如下:
Continue reading

简单的css3效果 – 图片旋转,阴影

可以直接粘贴到uchome的自定义样式里。chrome13, opera11, safari mobile测试有效。ff不知道,不喜欢所以没用。

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
#space_avatar div img
{
	display:block;
	width:160px;
	margin:60px 0 0;
	padding:10px 10px 15px;
	text-align:center;
	background:white;
	border:1px solid #bfbfbf;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-o-border-radius:5px;
	-ms-border-radius:5px;
	border-radius:5px;
	-webkit-transform:rotate(10deg);
	-moz-transform:rotate(10deg);
	-o-transform:rotate(10deg);
	-ms-transform:rotate(10deg);
	transform:rotate(10deg);
	-webkit-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4);
	-moz-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4);
	-o-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4);
	-ms-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4);
	box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4);
	-webkit-transition:all 0.5s ease-in;
	-moz-transition:all 0.5s ease-in;
	-o-transition:all 0.5s ease-in;
	-ms-transition:all 0.5s ease-in;
	transition:all 0.5s ease-in;
}
 
#space_avatar div img:hover,#space_avatar
 div img:focus,#space_avatar div img:active
{
	border-color:#9a9a9a;
	-webkit-box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4);
	-o-box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4);
	-moz-box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4);
	-ms-box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4);
	box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4);
	-webkit-transform:rotate(0deg)scale(1.05);
	-moz-transform:rotate(0deg)scale(1.05);
	-o-transform:rotate(0deg)scale(1.05);
	-ms-transform:rotate(0deg)scale(1.05);
	transform:rotate(0deg) scale(1.05);
}

看来代码插件还是个问题呢……回来问问神猫。先去图书馆~