-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyle.css
112 lines (108 loc) · 3.11 KB
/
style.css
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
body{ margin: 0px auto;width: 100%;/*background:#f0ffff;*/background: url(imgs/bg4.jpg) top left;position: relative;}
.year{
width: 100px;
height:522px;
position: absolute;
float: left;
margin-top: 50px;
margin-left:20px;
/*background: red;*/
overflow: hidden;
font-size: 120px;
font-weight: bolder;
/*word-break: break-all;*/
word-wrap: break-word;
line-height: 120px;
color:#FD5189;
}
.year ul{width: 120px;height: 520px;margin-left: -40px;position: relative;margin-top: 0px;}
.year li{
width: 100px;
height: 100px;
font-size: 100px;
font-weight: bolder;
line-height: 100px;
margin: 0;
background: none;
color:#FD5189;
border: none;
}
#my3dspace{
-webkit-perspective:8000px;/*元素距离视图的距离为 800px*/
-webkit-perspective-origin:50% 50%;/*从浏览器中心来看*/
overflow: hidden;
}
#pagegroup{
width: 862px;
height: 560px;
margin: 30px auto;
-webkit-transform-style:preserve-3d;/*告诉浏览器是3D效果*/
position: relative;
}
.page{
width: 862px;
height: 520px;
border: 1px solid #E6E6E6;
box-shadow: 2px 2px 2px #B6B3B6;
border-radius: 10px;
margin: 30px auto;
background: #fff;
position: absolute;
}
#page1{
transform-origin: top;/*以上边界为轴进行变换*/
-webkit-transform-origin:top;
-ms-transform-origin:top;
-moz-transform-origin:top;
-o-transform-origin:top;
transition: transform 1s linear;
-webkit-transition: -webkit-transform 1s linear;/*变换是由Google为例，进行1s的线性的变换*/
-ms-transition: -ms-transform 1s linear;
-moz-transition: -moz-transform 1s linear;
-o-transition: -o-transform 1s linear;
}
#page2,#page3,#page4,#page5,#page6,#page7,#page8{
transform-origin: top;/*以上边界为轴进行变换*/
-webkit-transform-origin:top;
-ms-transform-origin:top;
-moz-transform-origin:top;
-o-transform-origin:top;
transition: transform 1s linear;
-webkit-transition: -webkit-transform 1s linear;/*变换是由Google为例，进行1s的线性的变换*/
-ms-transition: -ms-transform 1s linear;
-moz-transition: -moz-transform 1s linear;
-o-transition: -o-transform 1s linear;
transform:rotateX(-90deg);
-ms-transform:rotateX(-90deg); /* IE 9 */
-webkit-transform:rotateX(-45deg);/*以X轴旋转90度*/
-moz-transform:rotateX(-90deg); /* Firefox */
-o-transform:rotateX(-45deg); /* Opera */
}
#op{
text-align: center;
margin: 10px auto;
}
a{text-decoration: none;color:#fff;font-size: 20px;font-weight: bold;}
.month{width: 822px; height: 284px;/*border: 1px solid red;*/margin: 10px auto;overflow: hidden;}
.show-text{width: 756px;height:180px;/* border:1px solid #D8D8D8;*/margin: 0 auto;}
.text{width: 754px;height:178px;/*border: 1px solid #E6E6E6;*/background: #fff; }
/*span{width: 10px;display: line-block;}*/
p{border-bottom: 1px solid #D8D8D8;padding: 5px;color:#888;line-height: 30px;}
ul{width:842px;height: 100%;text-align: center;margin-left: -20px;}
ul li{
list-style: none;
width: 100px;
height:100px;
float: left;
margin: 13px;
border: 2px solid #FD5189;
/*box-shadow: 1px 1px 1px #F69D9F;*/
background: #FD5189;
color:#fff;
}
.active{
background: #fff;
color:#F72E50;
cursor: pointer;
}
h3{color:#778899;}