-
Notifications
You must be signed in to change notification settings - Fork 1
/
styles0.css
115 lines (98 loc) · 2.68 KB
/
styles0.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
113
114
115
/**
*
* 哈喽,我是犀利一下下,一个正在进化的(前端)程序员. 如你所见,长年的键盘作业已经让我打字的速度飞快无比(手动耍帅).
*
* 如果你觉得无聊,先别着急. 继续往下看,其实这是一个交互性很强的网站,也很有趣.
*
* 没错,我正在把它展示并推荐给你.(全部演示完毕大概需要1.5分钟,你也可以直接点击左下角的跳过动画直接看到最终效果)
*
* live coding 的感觉是不是看起来酣畅淋漓?好好看,你也能学会.
*/
/**
* 我们开始喽. 首先就从加点儿小动画效果来起手吧...
*/
* {
-webkit-transition: all 1s;
}
/**
* e...好像啥都没发生. 别着急,再等等.
*
* 这种“白纸黑字”的效果是不是太乏味了?
*
* 那我们就来干掉这种乏味感吧~~~
*/
html {
background: rgb(63, 82, 99);
}
/***
* 看到变化没...
*/
pre, a {
color: white;
}
/**
* 这样是不是? 有点亮瞎眼?
*
* 在这个空空的大框框里敲代码,感觉有点无趣.
*
* 现在我打算再造一个好看点的框框,你也跟着一起来吧.
*
* 嗯嗯,先把你看到的这部分缩小放一边.
*/
pre:not(:empty) {
overflow: auto;
background: rgb(48, 48, 48);
border: 1px solid #ccc;
max-height: 44.6%;
width: 49%;
font-size: 14px;
font-family: monospace;
padding: 10px 10px 20px;
box-shadow: -4px 4px 2px 0 rgba(0,0,0,0.3);
white-space: pre-wrap;
outline: 0;
}
/**
* 然后我会继续往左边添加点内容的,不然太空洞了不是.
*
* 我们继续干点儿美化的活儿.
*/
#style-text {
-webkit-transform: translateX(95%);
position: absolute;
}
/**
* 这样好像还不错, 但全都是白色的字看着有点腻了!
*
* 上帝说,要有彩色和代码高亮,于是...
*/
.comment { color: #857F6B; font-style: italic; }
.selector { color: #E69F0F; }
.selector .key { color: #64D5EA; }
.key { color: #64D5EA; }
.value { color: #BE84F2; }
.value.px { color: #F92772; }
/**
* 还不错,有种渐入佳境的感觉了
*/
body {
-webkit-perspective: 1000px;
}
#style-text {
-webkit-transform: translateX(98.5%) rotateY(-10deg);
-webkit-transform-origin: right;
max-height: 94.5%;
}
/**
* 然后, 咱们一边来改造页面,一边添加内容. 这也是你最初来到这里的原因, 对吧?
*
* 我可不信你就是为了看点儿动画特效留在这儿的.....好吧,或许你是,
*
* 但就不必让我知道啦
*
* 哎呀,左边有点太空洞了,不好不好,我们来填充一下~
*/
pre:not(#style-text) {
-webkit-transform: rotateY(10deg);
-webkit-transform-origin: left;
}