├── README.md
├── center
    ├── README.md
    ├── flex.html
    ├── one.jpg
    └── 居中.html
├── christmas
    ├── .gitignore
    ├── .sass-cache
    │   └── 15d8c244cf2d78c268141cba1aea96bb05465346
    │   │   └── index.scssc
    ├── dist
    │   └── css
    │   │   └── index.css
    ├── gulpfile.js
    ├── index.html
    ├── index.scss
    ├── package-lock.json
    └── package.json
├── cssShape
    ├── README.md
    ├── html
    │   └── index.html
    └── static
    │   ├── css
    │       ├── index.css
    │       └── reset.css
    │   └── images
    │       ├── exp.jpg
    │       ├── forkme.png
    │       ├── logo.jpg
    │       └── logo.png
├── frost_glass
    ├── README.md
    └── frost_glass.html
├── heart
    └── index.html
├── hexagon-grid-w-hover
    ├── README.txt
    ├── css
    │   └── style.css
    ├── index.html
    ├── license.txt
    └── scss
    │   └── style.scss
├── hiddenface
    ├── index.html
    ├── index.js
    ├── rain.css
    ├── rain.css.map
    └── rain.scss
├── interestingNote
    └── 条状背景
    │   ├── README.md
    │   ├── img
    │       ├── forkme.png
    │       ├── graphic1.jpg
    │       ├── graphic2.jpg
    │       ├── graphic3.jpg
    │       ├── graphic4.jpg
    │       └── graphic5.jpg
    │   └── test
    │       ├── index.css
    │       ├── reset.css
    │       └── test.html
├── layout
    ├── README.md
    └── adaption
    │   ├── 3列
    │       ├── flex.html
    │       ├── float -margin.html
    │       └── table-cell.html
    │   ├── flex.html
    │   ├── float -margin.html
    │   ├── margin.html
    │   ├── table-cell.html
    │   └── 多列等高布局
    │       ├── flex.html
    │       ├── margin-padding.html
    │       └── table-cell.html
├── macbook
    ├── css
    │   └── index.css
    └── index.html
├── minion
    ├── js
    │   └── minion.js
    ├── minion.html
    └── style
    │   └── index.css
└── text
    ├── clip-text.html
    └── timg.jpg


/README.md:
--------------------------------------------------------------------------------
1 | # CSS-note
2 | CSS笔记
3 | 


--------------------------------------------------------------------------------
/center/README.md:
--------------------------------------------------------------------------------
  1 | ##CSS 常用居中的方法
  2 | 
  3 | ###父级position 为 relative的情况
  4 | 
  5 | 1.子级div Position: relative;
  6 | 
  7 | 	Position 首先并不具有继承性，子级 div 没有设置position 则默认为 static。
  8 | 	static 很多东西都无法使用，比如 top，left，比如 z-index 之类的。
  9 | 	staic  的div 默认从父类剩余位置开始布局。
 10 | 	
 11 | 	
 12 | 代码如下:
 13 | <pre>
 14 | div.outer{
 15 |             position: relative;
 16 |             background: red;
 17 |             width: 200px;
 18 |             height: 200px;
 19 |             overflow: hidden;
 20 |         }
 21 |         div.outer > div.inner{
 22 |             position: relative;
 23 |             background: #0000f6;
 24 |             width: 100px;
 25 |             height: 100px;
 26 |             top: 50%;
 27 |             left: 50%;
 28 |             margin: -50px 0 0 -50px;
 29 |         }
 30 | </pre>
 31 | 
 32 | 2.子级 postion: static 的居中方法。
 33 | 
 34 | <pre>
 35 | div.outer{
 36 |             position: relative;
 37 |             background: red;
 38 |             width: 200px;
 39 |             height: 200px;
 40 |             overflow: hidden;
 41 |         }
 42 |         div.outer > div.inner{
 43 |             background: #0000f6;
 44 |             width: 100px;
 45 |             height: 100px;
 46 |             margin: 50px auto 0 auto;
 47 |         }
 48 | </pre>
 49 | 
 50 |  3.子级absolute 的居中方法设置top left margin 等同于父级relative 与 子级relative的 方案。
 51 | 
 52 | 
 53 | ##父级position 为absolute 情况
 54 | 1.子级position: relative和absolute的情况
 55 |    
 56 |    设置top left margin 等同于父级relative 与 子级relative的 方案。
 57 | 2.子级 static: 等同于 父级 relative 与 子级 static 的方案
 58 | 
 59 | ## 父级postion 为static 情况
 60 |   这里给一些知识点
 61 |   
 62 |   1. top 和 left 百分比是相对于 height 和 width的, absolute 是相对于离它最近的 absolute 父类 的 height 和 width，relative 是相对于 父类。
 63 |   
 64 |   
 65 | ***
 66 | 华丽的分割线
 67 | 
 68 | 上面的布局其实实际运用非常有限，我们很少会写死每个元素的宽高。大部分都是百分比布局。
 69 | 
 70 | 百分比布局最大的问题，就是我们不知道具体的宽高，所以margin无法设置准确值。
 71 | 
 72 | ##父级relative 宽高固定 子级宽高百分比
 73 | 1. 子级relative 和 absolute的情况
 74 | 
 75 | <pre>
 76 |         div.outer{
 77 |             position: static;
 78 |             top: 0;
 79 |             left: 0;
 80 |             background: red;
 81 |             width: 500px;
 82 |             height: 200px;
 83 |             overflow: hidden;
 84 |         }
 85 |         div.outer > div.inner{
 86 |             position: relative;
 87 |             background: #0000f6;
 88 |             width: 50%;
 89 |             height: 50%;
 90 |             top: 50%;
 91 |             left: 50%;
 92 |             transform: translateX(-50%) translateY(-50%);
 93 |         }
 94 | </pre>
 95 | 
 96 | 上面的方法作用于 定位元素 包治百病 除了ie8 及以下 不支持css3 的浏览器。
 97 | 
 98 | 2.子级static
 99 | 
100 | 无能为力
101 | 
102 | 
103 | 一些非主流的居中方案  table-cell 居中
104 | 
105 | table-cell 对应于 table 中的 td  对于 td 我们自然可以使用verical-align 来实现垂直居中， 水平居中在内层使用margin: 0 auto。
106 | 
107 | <pre>
108 |  div.outer{
109 |             position: static;
110 |             top: 0;
111 |             left: 0;
112 |             background: red;
113 |             width: 500px;
114 |             height: 200px;
115 |             overflow: hidden;
116 |             display: table;
117 |         }
118 |         div.outer > div.inner{
119 |             position: relative;
120 |             background: #0000f6;
121 |             width: 100%;
122 |             height: 100%;
123 |             display: table-cell;
124 |             vertical-align: middle;
125 |         }
126 |         div.inner > div.target{
127 |             width: 100px;
128 |             height: 100px;
129 |             background: #FFFFFF;
130 |             margin: 0 auto;
131 |         }
132 | </pre>
133 | 
134 | 显然这样的居中有好有坏，好处自然是没有 ie8 的坎, 但是却多出来了一个标签，先前仿 Tumblr 的时候，发现里面的前端喜欢这样,至于好坏大家拿捏吧。
135 | 
136 | 最后有一种懒人居中法，适应于你不想使用以上两种方法，然后想取巧的话，当然适用方法只适用于内标签为absolute 情况.
137 | 
138 | <pre>
139 |  div.outer{
140 |             position: absolute;
141 |             top: 0;
142 |             left: 0;
143 |             background: red;
144 |             width: 500px;
145 |             height: 200px;
146 |             overflow: hidden;
147 |             display: table;
148 |         }
149 |         div.outer > div.inner{
150 |             position: absolute;
151 |             background: #0000f6;
152 |             width: 50%;
153 |             height: 50%;
154 |             top: 0;
155 |             left: 0;
156 |             bottom: 0;
157 |             right: 0;
158 |             margin: auto;
159 |         }
160 | </pre> 
161 |  在仿十年后的网站时，看到每张全屏轮播的时候，里面的居中页就是采用这样的方法，当然他的局限性太小了，只能 absolute + absolute. 或者 absolute 全页居中，大家在写页面的时候，可以自己取舍，毕竟这个没有ie6 ie8 的坎。
162 |  
163 |  
164 |  
165 | ##flex 布局
166 | 
167 | 2009 年 w3c 提出来的，现在已经得到了所有浏览器的支持，我们看一下flex的 API.
168 | 
169 | >转一篇阮一峰老师的 flex 使用很详细 http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
170 | 
171 | 设置在 主轴(横轴) 的对其方式  作用于父类容器上
172 | justify-content: flex-start | flex-end | center | space-between | space-around
173 | 
174 | 设置在 侧轴(纵轴)的 对其方式  作用于父类容器上
175 | align-items: flex-start | flex-end | center | baseline | stretch
176 | 
177 | flex-direction: row | column
178 | 设置flex 布局的主轴
179 | 
180 | flex-wrap: nowrap | wrap | wrap-reverse
181 | 设置 flex 单行 或 多行
182 | 
183 | 
184 | 一个水平 垂直居中的例子就很好实现了
185 | <pre>
186 |  div.box{
187 |         width: 200px;
188 |         height: 200px;
189 |         background: #0000f6;
190 |         display: flex;
191 |         justify-content: center;              
192 |         align-items: center;              
193 |     }
194 |     div.box > div.item{
195 |         width: 100px;
196 |         height: 100px;
197 |         background: red;
198 |     }
199 | </pre>
200 | 
201 | 多个子div的实现也很简单
202 | 这里 提一下 flex-direction 默认为 row 也就是横轴为主轴，改成 column 后，align-item 与justify-content 就交换了。
203 | 
204 | <pre>
205 |  div.box{
206 |         width: 200px;
207 |         height: 200px;
208 |         background: #0000f6;
209 |         display: flex;
210 |         flex-direction: column;                 /*设置主轴*/
211 |         justify-content: space-around;         /* 设置在 主轴(横轴) 的对其方式 */
212 |         align-items: center;            /*  设置在 侧轴(纵轴)的 对其方式 */
213 |     }
214 |     div.box > div.item{
215 |         width: 50px;
216 |         height: 50px;
217 |         background: red;
218 | 
219 |     }
220 | </pre>
221 | 
222 | ##inline-block 在 block的居中
223 | 1. table-cell 和 inline-block 相仿，我们看到td 并不存在换行的现象
224 | 2. 我们以一般的角度来看看如何实现
225 | 
226 | 首先需要一个basic 高100% 来作为基准，然后设置vertical-aligin: middle 来对齐basic的中部
227 | 
228 | <pre>
229 | div.outer{
230 |             position: relative;
231 |             top: 0;
232 |             left: 0;
233 |             background: red;
234 |             width: 500px;
235 |             height: 500px;
236 |             overflow: hidden;
237 |             /*text-align: center;*/
238 |         }
239 |         div.outer > div.inner{
240 |             width: 100px;
241 |             height: 100px;
242 |             background: #0000f6;
243 |             display: inline-block;
244 |             vertical-align: middle;
245 |         }
246 |         div.outer > div.basic{
247 |             top:0;
248 |             left: 0;
249 |             position: relative;
250 |             width: 0px;
251 |             height: 100%;
252 |             background: green;
253 |             vertical-align: middle;
254 |             display: inline-block;
255 |         }
256 | </pre>
257 | 
258 | 
259 | 最后一个inline 居中了 主要应用 line-height 上下间距加起来等于父类的高度 就能实现居中了
260 | 
261 | <pre>
262 |   div.outer{
263 |             position: relative;
264 |             top: 0;
265 |             left: 0;
266 |             background: red;
267 |             width: 500px;
268 |             height: 500px;
269 |             overflow: hidden;
270 |             text-align: center;
271 |         }
272 |         span{
273 |             line-height: 500px;
274 |         }
275 | </pre>
276 | 当然把inline 变成 inline-block 居中自然也是可以的，也比较推崇这种，因为往往父类的高度是不固定的，需要做出自适应，第一种方案就能完美解决了。
277 | 
278 | 
279 | 居中的方案大致就这些了，大家晚安。


--------------------------------------------------------------------------------
/center/flex.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title></title>
 6 |     <style>
 7 |     div.box{
 8 |         width: 200px;
 9 |         height: 150px;
10 |         background-color: black;
11 |         display: flex;
12 |         flex-flow: row wrap;
13 |         align-content: flex-start;
14 |     }
15 |     div.box > div.item{
16 |         box-sizing: border-box;
17 |         background-color: white;
18 |         flex: 0 0 25%;
19 |         height: 50px;
20 |         border: 1px solid red;
21 | 
22 |     }
23 |     </style>
24 | </head>
25 | <body>
26 | <div class="box">
27 |     <div class="item"></div>
28 |     <div class="item"></div>
29 |     <div class="item"></div>
30 |     <div class="item"></div>
31 |     <div class="item"></div>
32 |     <div class="item"></div>
33 |     <div class="item"></div>
34 |     <div class="item"></div>
35 |     <div class="item"></div>
36 | </div>
37 | </body>
38 | </html>


--------------------------------------------------------------------------------
/center/one.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FounderIsShadowWalker/CSS-note/c49eba0a7c325a42f971e90b215819fef7ab771a/center/one.jpg


--------------------------------------------------------------------------------
/center/居中.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title></title>
 6 |     <style>
 7 |         div.outer{
 8 |             position: relative;
 9 |             top: 0;
10 |             left: 0;
11 |             background: red;
12 |             width: 500px;
13 |             height: 500px;
14 |             overflow: hidden;
15 |             /*text-align: center;*/
16 |         }
17 |         span{
18 |             line-height: 500px;
19 |         }
20 |     </style>
21 | </head>
22 | <body>
23 | <!-- 第一种 relative 在 relative 居中 -->
24 | <div class="outer">
25 |    <span>12345</span>
26 | </div>
27 | </body>
28 | </html>


--------------------------------------------------------------------------------
/christmas/.gitignore:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FounderIsShadowWalker/CSS-note/c49eba0a7c325a42f971e90b215819fef7ab771a/christmas/.gitignore


--------------------------------------------------------------------------------
/christmas/.sass-cache/15d8c244cf2d78c268141cba1aea96bb05465346/index.scssc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FounderIsShadowWalker/CSS-note/c49eba0a7c325a42f971e90b215819fef7ab771a/christmas/.sass-cache/15d8c244cf2d78c268141cba1aea96bb05465346/index.scssc


--------------------------------------------------------------------------------
/christmas/dist/css/index.css:
--------------------------------------------------------------------------------
  1 | @charset "UTF-8";
  2 | body, html {
  3 |   margin: 0;
  4 |   padding: 0;
  5 |   width: 100%;
  6 |   height: 100%;
  7 |   overflow: hidden; }
  8 | 
  9 | .container {
 10 |   position: absolute;
 11 |   top: 20%;
 12 |   bottom: 10%;
 13 |   right: 10%;
 14 |   left: 30%;
 15 |   width: auto;
 16 |   height: auto; }
 17 | 
 18 | .star {
 19 |   position: relative; }
 20 |   .star .star-0 {
 21 |     position: absolute;
 22 |     width: 0px;
 23 |     height: 0px;
 24 |     left: -6.44px;
 25 |     top: -24.56px;
 26 |     transform: rotate(0deg);
 27 |     border-width: 19.88px 6.44px;
 28 |     /* 高 宽*/
 29 |     border-style: hidden solid solid  solid;
 30 |     border-color: transparent transparent #FFE066 transparent;
 31 |     transform-origin: 6.44px 17.76px; }
 32 |   .star .star-1 {
 33 |     position: absolute;
 34 |     width: 0px;
 35 |     height: 0px;
 36 |     left: -6.44px;
 37 |     top: -24.56px;
 38 |     transform: rotate(72deg);
 39 |     border-width: 19.88px 6.44px;
 40 |     /* 高 宽*/
 41 |     border-style: hidden solid solid  solid;
 42 |     border-color: transparent transparent #FFE066 transparent;
 43 |     transform-origin: 6.44px 17.76px; }
 44 |   .star .star-2 {
 45 |     position: absolute;
 46 |     width: 0px;
 47 |     height: 0px;
 48 |     left: -6.44px;
 49 |     top: -24.56px;
 50 |     transform: rotate(144deg);
 51 |     border-width: 19.88px 6.44px;
 52 |     /* 高 宽*/
 53 |     border-style: hidden solid solid  solid;
 54 |     border-color: transparent transparent #FFE066 transparent;
 55 |     transform-origin: 6.44px 17.76px; }
 56 |   .star .star-3 {
 57 |     position: absolute;
 58 |     width: 0px;
 59 |     height: 0px;
 60 |     left: -6.44px;
 61 |     top: -24.56px;
 62 |     transform: rotate(216deg);
 63 |     border-width: 19.88px 6.44px;
 64 |     /* 高 宽*/
 65 |     border-style: hidden solid solid  solid;
 66 |     border-color: transparent transparent #FFE066 transparent;
 67 |     transform-origin: 6.44px 17.76px; }
 68 |   .star .star-4 {
 69 |     position: absolute;
 70 |     width: 0px;
 71 |     height: 0px;
 72 |     left: -6.44px;
 73 |     top: -24.56px;
 74 |     transform: rotate(288deg);
 75 |     border-width: 19.88px 6.44px;
 76 |     /* 高 宽*/
 77 |     border-style: hidden solid solid  solid;
 78 |     border-color: transparent transparent #FFE066 transparent;
 79 |     transform-origin: 6.44px 17.76px; }
 80 | 
 81 | .tree {
 82 |   position: absolute;
 83 |   width: 0px;
 84 |   height: 0px;
 85 |   transform: translateX(-50%);
 86 |   border-style: hidden solid solid  solid;
 87 |   border-color: transparent transparent #499F68 transparent; }
 88 | 
 89 | .layer-1 {
 90 |   top: 0;
 91 |   border-width: 100px 50px;
 92 |   z-index: 4; }
 93 | 
 94 | .layer-2 {
 95 |   top: 30px;
 96 |   border-width: 120px 60px;
 97 |   z-index: 3; }
 98 | 
 99 | .layer-3 {
100 |   top: 50px;
101 |   border-width: 160px 80px;
102 |   z-index: 2; }
103 | 
104 | .layer-4 {
105 |   top: 80px;
106 |   border-width: 200px 100px;
107 |   z-index: 1; }
108 | 
109 | .trunk {
110 |   position: relative;
111 |   top: 280px;
112 |   width: 20px;
113 |   height: 25px;
114 |   transform: translateX(-50%);
115 |   background: #84714F; }
116 | 
117 | .bubble {
118 |   position: absolute;
119 |   width: 13px;
120 |   height: 13px;
121 |   background: #FFE066;
122 |   border-radius: 100%; }
123 | 
124 | .bubble.one {
125 |   top: 65px; }
126 | 
127 | .bubble.two {
128 |   top: 105px;
129 |   left: -30px;
130 |   background: red; }
131 | 
132 | .bubble.three {
133 |   top: 130px;
134 |   left: 35px;
135 |   background: purple; }
136 | 
137 | .bubble.four {
138 |   top: 163px;
139 |   left: -30px; }
140 | 
141 | .loli {
142 |   position: absolute;
143 |   top: 143px;
144 |   left: 40px;
145 |   width: 5px;
146 |   height: 18px;
147 |   background: red;
148 |   z-index: 999;
149 |   border-top-left-radius: 50% 20%;
150 |   border-top-right-radius: 50% 20%;
151 |   transform: rotate(-30deg); }
152 |   .loli::before {
153 |     content: '';
154 |     position: absolute;
155 |     top: 100%;
156 |     transform: translateX(-100%);
157 |     border: 10px dashed #499F68;
158 |     border-width: 2.5px 2.5px;
159 |     border-top-left-radius: 0%;
160 |     border-top-right-radius: 0%;
161 |     border-bottom-right-radius: 50% 100%;
162 |     border-bottom-left-radius: 50% 100%;
163 |     z-index: 2; }
164 |   .loli::after {
165 |     content: '';
166 |     position: absolute;
167 |     left: 5px;
168 |     top: 100%;
169 |     transform: translateX(-100%);
170 |     border: 10px dashed red;
171 |     border-width: 5px 7px;
172 |     border-top-left-radius: 0%;
173 |     border-top-right-radius: 0%;
174 |     border-bottom-right-radius: 50% 100%;
175 |     border-bottom-left-radius: 50% 100%; }
176 | 
177 | .snow {
178 |   position: relative;
179 |   top: 125px;
180 |   left: -30px;
181 |   width: 20px;
182 |   height: 20px; }
183 |   .snow .stroke {
184 |     height: 35px;
185 |     width: 2px;
186 |     background-color: snow;
187 |     position: absolute; }
188 |     .snow .stroke::before {
189 |       content: "";
190 |       position: absolute;
191 |       border: 2px solid snow;
192 |       border-top: 0;
193 |       border-left: 0;
194 |       width: 10px;
195 |       height: 10px;
196 |       left: -5px;
197 |       top: -2px;
198 |       transform: rotate(45deg);
199 |       display: block; }
200 |     .snow .stroke::after {
201 |       content: "";
202 |       position: absolute;
203 |       border: 2px solid snow;
204 |       border-top: 0;
205 |       border-left: 0;
206 |       width: 10px;
207 |       height: 10px;
208 |       left: -5px;
209 |       bottom: -2px;
210 |       transform: rotate(-135deg);
211 |       display: block; }
212 |   .snow .stroke-2 {
213 |     transform: rotate(90deg); }
214 |   .snow .stroke-3 {
215 |     transform: rotate(45deg); }
216 |   .snow .stroke-4 {
217 |     transform: rotate(-45deg); }
218 | 
219 | .socks {
220 |   position: absolute;
221 |   top: 80px;
222 |   left: 10px;
223 |   z-index: 1;
224 |   transform: rotate(10deg); }
225 |   .socks::before {
226 |     content: '';
227 |     position: absolute;
228 |     width: 12px;
229 |     height: 28px;
230 |     background: #E54B4B;
231 |     border-top-left-radius: 50% 10%;
232 |     border-top-right-radius: 50% 10%; }
233 |   .socks::after {
234 |     content: '';
235 |     position: absolute;
236 |     width: 25px;
237 |     height: 12px;
238 |     top: 22px;
239 |     background: #E54B4B;
240 |     border-top-right-radius: 50% 40%;
241 |     border-bottom-right-radius: 50% 30%; }
242 | 
243 | .gift {
244 |   position: relative;
245 |   top: 240px;
246 |   left: 120px;
247 |   width: 60px;
248 |   height: 40px;
249 |   background: #34495e;
250 |   z-index: 2; }
251 |   .gift::before {
252 |     content: '';
253 |     position: absolute;
254 |     left: 50%;
255 |     top: 0%;
256 |     width: 16px;
257 |     top: -15px;
258 |     height: calc(100% + 15px);
259 |     transform: translateX(-50%);
260 |     background: #fdc56d;
261 |     z-index: 5; }
262 |   .gift .lid {
263 |     position: relative;
264 |     width: 80px;
265 |     height: 15px;
266 |     top: -15px;
267 |     left: -8px;
268 |     background: #34495e; }
269 |     .gift .lid::before {
270 |       content: '';
271 |       position: absolute;
272 |       width: 15px;
273 |       height: 13px;
274 |       top: -23px;
275 |       transform: skew(10deg, 10deg);
276 |       border: 7px solid #FFC113;
277 |       left: 11px;
278 |       border-top-left-radius: 50% 50%;
279 |       border-top-right-radius: 50% 50%;
280 |       border-bottom-left-radius: 50% 50%; }
281 |     .gift .lid::after {
282 |       content: '';
283 |       position: absolute;
284 |       width: 15px;
285 |       height: 13px;
286 |       top: -23px;
287 |       transform: skew(-10deg, -10deg);
288 |       border: 7px solid #FFC113;
289 |       left: 36px;
290 |       border-top-left-radius: 50% 50%;
291 |       border-top-right-radius: 50% 50%;
292 |       border-bottom-right-radius: 50% 50%; }
293 | 


--------------------------------------------------------------------------------
/christmas/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp');
 2 | var sass = require('gulp-ruby-sass')
 3 | 
 4 | gulp.task('sass', () => {
 5 |     return sass('*.scss')
 6 |         .on('error', function (err) {
 7 |             console.error('Error!', err.message);
 8 |         })
 9 |         .pipe(gulp.dest('dist/css'))
10 | })
11 | 
12 | gulp.task('auto', function () {
13 |     // 监听文件修改，当文件被修改则执行 images 任务
14 |     gulp.watch('*.scss', ['sass'])
15 | });
16 | 
17 | // 使用 gulp.task('default') 定义默认任务
18 | // 在命令行使用 gulp 启动 sass 任务和 auto 任务
19 | gulp.task('default', ['sass', 'auto'])


--------------------------------------------------------------------------------
/christmas/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |     <link href="./dist/css/index.css" rel="stylesheet" />
 5 | </head>
 6 | 
 7 | <body>
 8 |     <div class="container">
 9 |         <div class="star">
10 |             <div class="star-0"></div>
11 |             <div class="star-1"></div>
12 |             <div class="star-2"></div>
13 |             <div class="star-3"></div>
14 |             <div class="star-4"></div>
15 |         </div>
16 |         <div class="tree layer-1">
17 |             <div class="line one"></div>
18 |             <div class="bubble one"></div>
19 |         </div>
20 |         <div class="tree layer-2">
21 |             <div class="line two"></div>
22 |             <div class="bubble two"></div>
23 |             <div class="socks"></div>
24 |         </div>
25 |         <div class="tree layer-3">
26 |             <div class="line three"></div>
27 |             <div class="bubble three"></div>
28 |             <div class="snow">
29 |                 <div class="stroke stroke-1"></div>
30 |                 <div class="stroke stroke-2"></div>
31 |                 <div class="stroke stroke-3"></div>
32 |                 <div class="stroke stroke-4"></div>
33 |             </div>
34 |         </div>
35 |         <div class="tree layer-4">
36 |             <div class="line four"></div>
37 |             <div class="bubble four"></div>
38 |             <div class="loli"></div>
39 |         </div>
40 |         <div class="trunk">
41 |         </div>
42 |         <div class="gift">
43 |             <div class="lid"></div>
44 |         </div>
45 |     </div>
46 | </body>
47 | 
48 | </html>


--------------------------------------------------------------------------------
/christmas/index.scss:
--------------------------------------------------------------------------------
  1 | body,html{
  2 |     margin: 0;
  3 |     padding: 0;
  4 |     width: 100%;
  5 |     height: 100%;
  6 |     overflow: hidden;
  7 | }
  8 | .container{
  9 |     position: absolute;
 10 |     top: 20%;
 11 |     bottom: 10%;
 12 |     right: 10%;
 13 |     left: 30%;
 14 |     width: auto;
 15 |     height: auto;
 16 |     // display: flex;
 17 |     // justify-content: center;
 18 |     // align-items: center;
 19 | }
 20 | 
 21 | .star{
 22 |     position: relative;
 23 |     @for $i from 0 through 4 {
 24 |         .star-#{$i}{
 25 |             position: absolute;
 26 |             width: 0px;
 27 |             height: 0px;
 28 |             left: -32.2 * 0.2px;
 29 |             top: -122.8 * 0.2px;
 30 |             transform: rotate($i * 72deg) ;
 31 |             border-width: 99.4 * 0.2px 32.2 * 0.2px ;  /* 高 宽*/
 32 |             border-style: hidden solid solid  solid;
 33 |             border-color: transparent transparent #FFE066 transparent;
 34 |             transform-origin: 32.2 * 0.2px 88.8 * 0.2px;
 35 |         }
 36 |     }
 37 | }
 38 | 
 39 | .tree{
 40 |     position: absolute;
 41 |     width: 0px;
 42 |     height: 0px;
 43 |     transform: translateX(-50%);
 44 |     border-style: hidden solid solid  solid;
 45 |     border-color: transparent transparent #499F68 transparent;
 46 | }
 47 | .layer-1{
 48 |     top: 0;
 49 |     border-width: 100px 50px;
 50 |     z-index: 4;
 51 | }
 52 | 
 53 | .layer-2{
 54 |     top: 30px;
 55 |     border-width: 120px 60px;
 56 |     z-index: 3;
 57 | }
 58 | .layer-3{
 59 |     top: 50px;
 60 |     border-width: 160px 80px;
 61 |     z-index: 2;
 62 | }
 63 | .layer-4{
 64 |     top: 80px;
 65 |     border-width: 200px 100px;
 66 |     z-index: 1;
 67 | }
 68 | .trunk{
 69 |     position: relative;
 70 |     top: 280px;
 71 |     width: 20px;
 72 |     height: 25px;
 73 |     transform: translateX(-50%);
 74 |     background: #84714F;
 75 | }
 76 | 
 77 | .bubble{
 78 |     position: absolute;
 79 |     width: 13px;
 80 |     height: 13px;
 81 |     background: #FFE066;
 82 |     border-radius: 100%;
 83 | }
 84 | 
 85 | .bubble.one{
 86 |     top: 65px;
 87 | }
 88 | 
 89 | .bubble.two{
 90 |     top: 105px;
 91 |     left: -30px;
 92 |     background: red;
 93 | }
 94 | .bubble.three{
 95 |     top: 130px;
 96 |     left: 35px;
 97 |     background: purple;
 98 | }
 99 | .bubble.four{
100 |     top: 163px;
101 |     left: -30px;
102 | }
103 | 
104 | .loli{
105 |    position: absolute;
106 |    top: 143px;
107 |    left: 40px;
108 |    width: 5px;
109 |    height: 18px;
110 |    background: red;
111 |    z-index:  999;
112 |    border-top-left-radius: 50% 20%;
113 |    border-top-right-radius: 50% 20%;
114 |    transform: rotate(-30deg);
115 |    &::before{
116 |        content: '';
117 |        position: absolute;
118 |        top: 100%;
119 |        transform: translateX(-100%);
120 |        border:10px dashed #499F68;
121 |        border-width: 2.5px 2.5px;
122 |        border-top-left-radius: 0%;
123 |        border-top-right-radius: 0%;
124 |        border-bottom-right-radius: 50% 100%;
125 |        border-bottom-left-radius: 50% 100%;
126 |        z-index: 2;
127 |    }
128 |    &::after{
129 |     content: '';
130 |     position: absolute;
131 |     left: 5px;
132 |     top: 100%;
133 |     transform: translateX(-100%);
134 |     border:10px dashed red;
135 |     border-width: 5px 7px;
136 |     border-top-left-radius: 0%;
137 |     border-top-right-radius: 0%;
138 |     border-bottom-right-radius: 50% 100%;
139 |     border-bottom-left-radius: 50% 100%;
140 |    }
141 | }
142 | 
143 | .snow{
144 |     position: relative;
145 |     top: 125px;
146 |     left: -30px;
147 |     width: 20px;
148 |     height: 20px;
149 |     .stroke{
150 | 	    height: 35px;
151 | 	    width: 2px;
152 | 		background-color: snow;
153 | 		position: absolute;
154 |         // -webkit-box-shadow: 2px 2px 50px 0px rgba(255,255,255,0.3);
155 |         &::before{
156 |             content:"";
157 |             position: absolute;
158 |             border: 2px solid snow;
159 |             border-top: 0;
160 |             border-left: 0;
161 |             width: 10px;
162 |             height: 10px;
163 |             left: -5px;
164 |             top: -2px;
165 |             transform: rotate(45deg);
166 |             display: block;
167 |         }
168 |         &::after{
169 |             content:"";
170 |             position: absolute;
171 |             border: 2px solid snow;
172 |             border-top: 0;
173 |             border-left: 0;
174 |             width: 10px;
175 |             height: 10px;
176 |             left: -5px;
177 |             bottom: -2px;
178 |             transform: rotate(-135deg);
179 |             display: block;
180 |         }
181 |     }
182 |     .stroke-2{
183 | 		transform: rotate(90deg);
184 | 	}
185 | 
186 | 	.stroke-3{
187 | 		transform: rotate(45deg);
188 | 	}
189 | 	.stroke-4{
190 | 		transform: rotate(-45deg);
191 |     }
192 | }
193 | .socks {
194 |     position: absolute;
195 |     top: 80px;
196 |     left: 10px;
197 |     z-index: 1;
198 |     transform: rotate(10deg);
199 |     &::before{
200 |         content: '';
201 |         position: absolute;
202 |         width: 12px;
203 |         height: 28px;
204 |         background: #E54B4B;
205 |         border-top-left-radius: 50% 10%;
206 |         border-top-right-radius: 50% 10%;
207 |     }
208 |     &::after{
209 |         content: '';
210 |         position: absolute;
211 |         width: 25px;
212 |         height: 12px;
213 |         top: 22px;
214 |         background: #E54B4B;
215 |         border-top-right-radius: 50% 40%;
216 |         border-bottom-right-radius: 50% 30%;
217 |     }
218 | }   
219 | .gift{
220 |     position: relative;
221 |     top: 240px;
222 |     left: 120px;
223 |     width: 60px;
224 |     height: 40px;
225 |     background: #34495e;
226 |     z-index: 2;
227 |     &::before{
228 |         content: '';
229 |         position: absolute;
230 |         left: 50%;
231 |         top: 0%;
232 |         width: 16px;
233 |         top: -15px;
234 |         height: calc(100% + 15px);
235 |         transform: translateX(-50%);
236 |         background: #fdc56d;
237 |         z-index: 5;
238 |     }
239 |     .lid{
240 |         position: relative;
241 |         width: 80px;
242 |         height: 15px;
243 |         top: -15px;
244 |         left: -8px;
245 |         background: #34495e;
246 |         &::before{
247 |              content: '';
248 |              position: absolute;
249 |              width: 15px;
250 |              height: 13px;
251 |              top: -23px;
252 |              transform: skew(10deg, 10deg);
253 |              border: 7px solid #FFC113;
254 |              left: 11px;
255 |              border-top-left-radius: 50% 50%;
256 |              border-top-right-radius: 50% 50%;
257 |              border-bottom-left-radius: 50% 50%;
258 |      
259 |         }
260 |         &::after{
261 |             content: '';
262 |             position: absolute;
263 |             width: 15px;
264 |             height: 13px;
265 |             top: -23px;
266 |             transform: skew(-10deg, -10deg);;
267 |             border: 7px solid #FFC113;
268 |             left: 36px;
269 |             border-top-left-radius: 50% 50%;
270 |             border-top-right-radius: 50% 50%;
271 |             border-bottom-right-radius: 50% 50%;
272 |         }
273 |     }
274 | }


--------------------------------------------------------------------------------
/christmas/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "christ",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "author": "",
10 |   "license": "ISC",
11 |   "dependencies": {
12 |     "gulp": "^3.9.1",
13 |     "gulp-ruby-sass": "^2.1.1"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/cssShape/README.md:
--------------------------------------------------------------------------------
1 | ##致敬css secret
2 | ##和Coco的demo
3 | >作者 https://github.com/chokcoco
4 | 
5 |  有任意一个 demo 无法理解的，可以随时提issue
6 | 
7 | >演示地址http://www.singlefounder.cn/cssShape/html


--------------------------------------------------------------------------------
/cssShape/html/index.html:
--------------------------------------------------------------------------------
   1 | <!DOCTYPE html>
   2 | <html lang="en">
   3 | <head>
   4 |     <meta charset="UTF-8">
   5 |     <meta http-equiv="content-type" content="text/html; charset='utf-8'">
   6 |     <meta content="CSS3 Secret" name="keywords">
   7 |     <meta content="使用CSS3各类图形" name="description">
   8 |     <title>CSS 奇思妙想</title>
   9 |     <link rel="stylesheet" type="text/css"  href="../static/css/reset.css">
  10 |     <link rel="stylesheet" type="text/css"  href="../static/css/index.css">
  11 | </head>
  12 | <body>
  13 | <h1 style="height: 0; overflow: hidden">CSS3奇思妙想, 使用CSS3实现各类图形</h1>
  14 | <a style="width: 149px; height: 149px;position: fixed; top: 0; right: 0;z-index: 9999;" href="https://github.com/FounderIsShadowWalker/CSS-note" target="_blank">
  15 |     <img src="../../cssShape/static/images/forkme.png">
  16 | </a>
  17 | <div class="container">
  18 |     <!-- 心型 -->
  19 |     <!-- Heart-shaped -->
  20 |     <section id="shape" class="code-wrap cf">
  21 |         <div class="css-live-wrap">
  22 |             <summary>心形</summary>
  23 |             <summary>利用 圆形 和 正方形实现</summary>
  24 |             <hgroup class="heartShaped">
  25 |                 <h1>.heartShaped</h1>
  26 |             </hgroup>
  27 |         </div>
  28 |         <style class="code" contenteditable=true>
  29 |             .heartShaped {
  30 |                 position: absolute;
  31 |                 top:50%;
  32 |                 left: 50%;
  33 |                 transform:translate(-50%,-50%) rotate(45deg);
  34 |                 background: rgba(255, 20, 147, .85);
  35 |                 width: 140px;
  36 |                 line-height: 140px;
  37 |                 text-align: center;
  38 |                 color: white;
  39 |                 font-size: 12px;
  40 |             }
  41 |             .heartShaped:before,
  42 |             .heartShaped:after
  43 |             {
  44 |                 content: '';
  45 |                 position: absolute;
  46 |                 top: 0;
  47 |                 left: -70px;
  48 |                 width: 140px;
  49 |                 height: 140px;
  50 |                 border-radius: 50%;
  51 |                 background: rgb(255, 20, 147);
  52 |                 z-index: -1;
  53 |             }
  54 |             .heartShaped:after{
  55 |                 top: -70px;
  56 |                 left: 0;
  57 |             }
  58 | 
  59 |         </style>
  60 |     </section>
  61 | 
  62 |     <!-- bubbly 气泡三角形-->
  63 |     <section id="bubbly" class="code-wrap cf">
  64 |         <div class="css-live-wrap">
  65 |             <summary>气泡三角形</summary>
  66 |             <summary>利用 border 的 transparent 特性实现</summary>
  67 |             <hgroup class="bubbly">
  68 |                 <h1>.bubbly</h1>
  69 |             </hgroup>
  70 |         </div>
  71 |         <style class="code" contenteditable=true>
  72 |             .bubbly {
  73 |                 position: absolute;
  74 |                 top:50%;
  75 |                 left: 50%;
  76 |                 transform:translate(-50%,-50%);
  77 |                 background: #00aabb;
  78 |                 border-radius: .4em;
  79 |                 width: 260px;
  80 |                 padding: 60px 20px;
  81 |                 text-align: center;
  82 |                 color: white;
  83 |                 font-size: 200%;
  84 |             }
  85 |             .bubbly:after {
  86 |                 content: '';
  87 |                 position: absolute;
  88 |                 bottom: 0;
  89 |                 left: 50%;
  90 |                 border: 34px solid transparent;
  91 |                 border-top-color: #00aabb;
  92 |                 border-bottom: 0;
  93 |                 border-left: 0;
  94 |                 margin: 0 0 -34px -17px;
  95 |             }
  96 |         </style>
  97 |     </section>
  98 | 
  99 |     <!-- notching 切角 -->
 100 |     <section id="notching" class="code-wrap cf">
 101 |         <div class="css-live-wrap">
 102 |             <div class="star" title="致敬《CSS SECRET》作者，此实例是书中例子"></div>
 103 |             <summary>切角</summary>
 104 |             <summary>使用线性渐变实现</summary>
 105 |             <hgroup class="notching">
 106 |                 <h1>.notching</h1>
 107 |             </hgroup>
 108 |         </div>
 109 |         <style class="code" contenteditable=true>
 110 |             .notching{
 111 |                 position: absolute;
 112 |                 top: 50%;
 113 |                 left: 50%;
 114 |                 transform: translate(-50%, -50%);
 115 |                 width: 160px;
 116 |                 padding: 60px 20px;
 117 |                 text-align: center;
 118 |                 color: white;
 119 |                 font-size: 200%;
 120 |                 background: #000088;
 121 |             }
 122 |             .notching {
 123 |                 background:
 124 |                 linear-gradient(135deg, transparent 15px, deeppink 0) top left,
 125 |                 linear-gradient(-135deg, transparent 15px, deeppink 0) top right,
 126 |                 linear-gradient(-45deg, transparent 15px, deeppink 0) bottom right,
 127 |                 linear-gradient(45deg, transparent 15px, deeppink 0) bottom left;
 128 |                 background-size: 50% 50%;
 129 |                 background-repeat: no-repeat;
 130 |             }
 131 |         </style>
 132 |     </section>
 133 | 
 134 |     <!-- arc弧形 切角 -->
 135 |     <section id="arc" class="code-wrap cf">
 136 |         <div class="css-live-wrap">
 137 |             <div class="star" title="致敬《CSS SECRET》作者，此实例是书中例子"></div>
 138 |             <summary>弧形切角</summary>
 139 |             <summary>使用径向渐变实现</summary>
 140 |             <hgroup class="arc">
 141 |                 <h1>.arc</h1>
 142 |             </hgroup>
 143 |         </div>
 144 |         <style class="code" contenteditable=true>
 145 |         .arc{
 146 |             position: absolute;
 147 |             top:50%;
 148 |             left: 50%;
 149 |             transform:translate(-50%,-50%);
 150 |             width: 60px;
 151 |             padding: 60px;
 152 |             text-align: center;
 153 |             color: white;
 154 |             background: black;
 155 |             font-size: 200%;
 156 |         }
 157 |         .arc{
 158 |             background:
 159 |             radial-gradient(circle at top left,
 160 |             transparent 15px, yellowgreen 0) top left,
 161 |             radial-gradient(circle at top right,
 162 |             transparent 15px, yellowgreen 0) top right,
 163 |             radial-gradient(circle at bottom right,
 164 |             transparent 15px, yellowgreen 0) bottom right,
 165 |             radial-gradient(circle at bottom left,
 166 |             transparent 15px, yellowgreen 0) bottom left;
 167 |             background-size: 50% 50%;
 168 |             background-repeat: no-repeat;
 169 |         }
 170 |         </style>
 171 |     </section>
 172 | 
 173 |     <!-- pesudo 伪类实现按钮明暗变化 -->
 174 |     <section id="pesudo" class="code-wrap cf">
 175 |         <div class="css-live-wrap">
 176 |             <summary>单个颜色实现 hover 和 active 时的明暗变化效果</summary>
 177 |             <summary>利用伪类 及 透明度实现</summary>
 178 |             <hgroup class="pesudo">
 179 |                 <h1>.pesudo</h1>
 180 |             </hgroup>
 181 |         </div>
 182 |         <style class="code" contenteditable="true">
 183 |             .pesudo{
 184 |                 position: absolute;
 185 |                 top: 50%;
 186 |                 left: 50%;
 187 |                 transform: translate(-50%, -50%);
 188 |                 width: 120px;
 189 |                 padding: 60px;
 190 |                 text-align: center;
 191 |                 color: white;
 192 |                 font-size: 200%;
 193 |                 border-radius: 1em;
 194 |                 background:#00aabb;
 195 |                 cursor:pointer;
 196 |             }
 197 |             .pesudo:before{
 198 |                 position: absolute;
 199 |                 top: 0; right: 0; bottom: 0; left: 0;
 200 |                 z-index:-1;
 201 |                 border-radius:1em;
 202 |                 background:rgba(0,0,0,.1);
 203 |             }
 204 |             .pesudo:hover::before{
 205 |                 content: '';
 206 |             }
 207 |         </style>
 208 |     </section>
 209 | 
 210 |     <!-- trapezoid 伪类加旋转透视实现梯形 -->
 211 |     <section id="trapezoid" class="code-wrap cf">
 212 |         <div class="css-live-wrap">
 213 |             <summary>梯形</summary>
 214 |             <summary>利用伪类加旋转透视</summary>
 215 |             <hgroup class="trapezoid">
 216 |                 <h1>.trapezoid</h1>
 217 |             </hgroup>
 218 |         </div>
 219 |         <style class="code" contenteditable="true">
 220 |             .trapezoid{
 221 |                 position: absolute;
 222 |                 top:50%;
 223 |                 left: 50%;
 224 |                 transform:translate(-50%,-50%);
 225 |                 width: 160px;
 226 |                 padding: 60px;
 227 |                 text-align: center;
 228 |                 color: white;
 229 |                 font-size: 200%;
 230 |             }
 231 |             .trapezoid:before{
 232 |                 content:"";
 233 |                 position: absolute;
 234 |                 top: 0; right: 0; bottom: 0; left: 0;
 235 |                 transform: perspective(40px) scaleY(1.3) rotateX(5deg);
 236 |                 transform-origin: bottom;
 237 |                 background:deeppink;
 238 |                 z-index:-1;
 239 |             }
 240 |         </style>
 241 |     </section>
 242 | 
 243 |     <!-- pie 利用伪类、线性渐变、旋转实现饼图 -->
 244 |     <section id="pie" class="code-wrap cf">
 245 |         <div class="css-live-wrap">
 246 |             <div class="star" title="致敬《CSS SECRET》作者，此实例是书中例子"></div>
 247 |             <summary>饼图</summary>
 248 |             <summary>利用伪类、线性渐变、旋转实现</summary>
 249 |             <hgroup class="pie">
 250 |                 <h1>.pie</h1>
 251 |             </hgroup>
 252 |         </div>
 253 |         <style class="code" contenteditable="true">
 254 |         .pie{
 255 |             position: absolute;
 256 |             top:50%;
 257 |             left: 50%;
 258 |             transform: translate(-50%, -50%);
 259 |             width: 200px;
 260 |             line-height:200px;
 261 |             border-radius:50%;
 262 |             text-align: center;
 263 |             color: white;
 264 |             font-size: 200%;
 265 |             background-color:yellowgreen;
 266 |             overflow: hidden;
 267 |             background-image:
 268 |             linear-gradient(to right, transparent 50%, #655 0);
 269 |             cursor:pointer;
 270 |         }
 271 |         .pie:before{
 272 |             content: '';
 273 |             position: absolute;
 274 |             top: 0;
 275 |             left: 50%;
 276 |             width: 50%;
 277 |             height: 100%;
 278 |             background-color: inherit;
 279 |             transform-origin: left;
 280 |             z-index:-1;
 281 |             transform: rotate(36deg);
 282 |         }
 283 |         .pie:hover:before{
 284 |             transition: all 1s;
 285 |             transform: rotate(126deg);
 286 |         }
 287 |         </style>
 288 |     </section>
 289 | 
 290 |     <!-- parallelogram 伪类加拉伸实现平行四边形 -->
 291 |     <section id="parallelogram" class="code-wrap cf">
 292 |         <div class="css-live-wrap">
 293 |             <summary>平行四边形</summary>
 294 |             <summary>利用伪类、拉伸实现</summary>
 295 |             <hgroup class="parallelogram">
 296 |                 <h1>.parallelogram</h1>
 297 |             </hgroup>
 298 |         </div>
 299 |         <style class="code" contenteditable="true">
 300 |             .parallelogram{
 301 |                 position: absolute;
 302 |                 top: 50%;
 303 |                 left: 50%;
 304 |                 transform: translate(-50%, -50%);
 305 |                 width: 280px;
 306 |                 line-height: 150px;
 307 |                 text-align: center;
 308 |                 color: white;
 309 |                 font-size: 200%;
 310 |             }
 311 |             .parallelogram:before{
 312 |                 content: '';
 313 |                 position: absolute;
 314 |                 top: 0;
 315 |                 right: 0;
 316 |                 bottom: 0;
 317 |                 left: 0;
 318 |                 background-color:#00aabb;
 319 |                 z-index:-1;
 320 |                 transform: skew(20deg);
 321 |             }
 322 |         </style>
 323 |     </section>
 324 | 
 325 |     <!-- diamond 伪类加拉伸加旋转实现菱形 -->
 326 |     <section id="diamond" class="code-wrap cf">
 327 |         <div class="css-live-wrap">
 328 |             <summary>菱形</summary>
 329 |             <summary>利用伪类、旋转实现</summary>
 330 |             <hgroup class="diamond">
 331 |                 <h1>.diamond</h1>
 332 |             </hgroup>
 333 |         </div>
 334 |         <style class="code" contenteditable="true">
 335 |             .diamond{
 336 |                 position: absolute;
 337 |                 top:50%;
 338 |                 left: 50%;
 339 |                 transform:translate(-50%,-50%);
 340 |                 width: 200px;
 341 |                 line-height:200px;
 342 |                 text-align: center;
 343 |                 color: white;
 344 |                 font-size: 200%;
 345 |             }
 346 |             .diamond:before{
 347 |                 content: '';
 348 |                 position: absolute;
 349 |                 top: 0;
 350 |                 left: 0;
 351 |                 right: 0;
 352 |                 bottom: 0;
 353 |                 background-color:deeppink;
 354 |                 z-index:-1;
 355 |                 transform: rotateZ(45deg);
 356 |             }
 357 |         </style>
 358 |      </section>
 359 | 
 360 |     <!-- corner 切角、伪类、渐变、旋转实现折角 -->
 361 |     <section id="corner" class="code-wrap cf">
 362 |         <div class="css-live-wrap">
 363 |             <div class="star" title="致敬《CSS SECRET》作者，此实例是书中例子"></div>
 364 |             <summary>折角</summary>
 365 |             <summary>利用切角、伪类、渐变、旋转实现</summary>
 366 |             <hgroup class="corner">
 367 |                 <h1>.corner</h1>
 368 |             </hgroup>
 369 |         </div>
 370 |         <style class="code" contenteditable=true>
 371 |             .corner{
 372 |                 position: absolute;
 373 |                 top:50%;
 374 |                 left: 50%;
 375 |                 transform:translate(-50%,-50%);
 376 |                 width: 120px;
 377 |                 line-height:120px;
 378 |                 padding:40px;
 379 |                 text-align: center;
 380 |                 color: white;
 381 |                 font-size: 200%;
 382 |                 background:linear-gradient(-150deg,transparent 1.5em, yellowgreen  0);
 383 |                 border-radius:.5em;
 384 |             }
 385 |             .corner:before{
 386 |                 content: '';
 387 |                 position: absolute;
 388 |                 top: 0;
 389 |                 right: 0;
 390 |                 background: linear-gradient(to left bottom,transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4)) 100% 0 no-repeat;
 391 |                 width: 1.73em;
 392 |                 height: 3em;
 393 |                 transform:
 394 |                 translateY(-1.3em)
 395 |                 rotate(-30deg);
 396 |                 transform-origin: bottom right;
 397 |                 border-bottom-left-radius: inherit;
 398 |                 box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15);
 399 |             }
 400 |         </style>
 401 |      </section>
 402 | 
 403 |     <!-- underline background-image 实现下划线 -->
 404 |     <section id="underline" class="code-wrap cf">
 405 |         <div class="css-live-wrap">
 406 |             <div class="star" title="致敬《CSS SECRET》作者，此实例是书中例子"></div>
 407 |             <summary>下划线</summary>
 408 |             <summary>利用 background-image 实现</summary>
 409 |             <hgroup class="underline">
 410 |                 <h1 class="underline1-ajkps">.underline1-ajkpys</h1>
 411 |             </hgroup>
 412 |         </div>
 413 |         <style class="code" contenteditable=true>
 414 |             .underline{
 415 |                 position: absolute;
 416 |                 top:50%;
 417 |                 left: 50%;
 418 |                 transform:translate(-50%,-50%);
 419 |                 width: 400px;
 420 |                 height:200px;
 421 |                 text-align: center;
 422 |                 color: white;
 423 |                 font-size: 200%;
 424 |                 background:#00aabb;
 425 |                 border-radius:.5em;
 426 |             }
 427 |             .underline1-ajkps{
 428 |                 cursor: pointer;
 429 |                 position: absolute;
 430 |                 left: 16%;
 431 |                 text-shadow: .1em 0 #00aabb, -.1em 0 #00aabb;
 432 |                 transition: 1s;
 433 |                 top: 50%;
 434 |                 transform:translate(0,-50%);
 435 |                 background: linear-gradient(white, white) no-repeat;
 436 |                 background-size: 100% 2px;
 437 |                 background-position: left -10em bottom 0px;
 438 |             }
 439 | 
 440 |             .underline1-ajkps:hover{
 441 |                 background-position: left 0 bottom 0px;
 442 |             }
 443 | 
 444 |         </style>
 445 |     </section>
 446 | 
 447 |     <!-- spectiveBlur 利用阴影实现背景模糊效果 -->
 448 |     <section id="spectiveBlur" class="code-wrap cf" style="z-index: 100">
 449 |         <div class="css-live-wrap">
 450 |             <summary>spectiveBlur</summary>
 451 |             <summary>纯 CSS 方案实现背景变暗效果（hover按钮触发）</summary>
 452 |             <hgroup class="spectiveBlur">
 453 |                 <h1>.spectiveBlur</h1>
 454 |             </hgroup>
 455 |         </div>
 456 |         <style class="code" contenteditable=true>
 457 |                 .spectiveBlur{
 458 |                     position: absolute;
 459 |                     top: 50%;left: 50%;
 460 |                     width: 220px;
 461 |                     line-height:160px;
 462 |                     transform: translate(-50%, -50%);
 463 |                     border-radius: 10px;
 464 |                     overflow: hidden;
 465 |                     background:#E91E63;
 466 |                     color:#fff;
 467 |                     font-size:200%;
 468 |                     text-align:center;
 469 |                     cursor:pointer;
 470 |                     transition: transform .2s;
 471 |                 }
 472 |                 .spectiveBlur:hover{
 473 |                     box-shadow:0 0 0 1920px rgba(0,0,0,.7);
 474 |                     transform: translate(-50%, -50%) scale(1.2);
 475 |                 }
 476 |         </style>
 477 |     </section>
 478 | 
 479 |     <!-- stripe 渐变实现条纹背景图案 -->
 480 |     <section id="stripe" class="code-wrap cf">
 481 |         <div class="css-live-wrap">
 482 |             <div class="star" title="致敬《CSS SECRET》作者，此实例是书中例子"></div>
 483 |             <summary>条纹背景图</summary>
 484 |             <summary>利用渐变实现</summary>
 485 |             <hgroup class="stripe">
 486 |                 <h1>.stripe</h1>
 487 |             </hgroup>
 488 |         </div>
 489 |         <style class="code" contenteditable=true>
 490 |             .stripe{
 491 |                 position: absolute;
 492 |                 top: 50%;
 493 |                 left: 50%;
 494 |                 transform:translate(-50%,-50%);
 495 |                 width: 200px;
 496 |                 line-height: 200px;
 497 |                 text-align: center;
 498 |                 color: white;
 499 |                 background:deeppink;
 500 |                 border-radius:.5em;
 501 |                 background:linear-gradient(45deg,#fb3 0%, #fb3 25%, #58a 0%, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
 502 |                 background-size: 40px 40px;
 503 |                 font-size: 200%;
 504 | 
 505 |             }
 506 |         </style>
 507 |     </section>
 508 | 
 509 |     <!-- stripe 渐变实现条纹背景图案 -->
 510 |     <section class="code-wrap cf">
 511 |         <div class="css-live-wrap">
 512 |             <summary>条纹背景图</summary>
 513 |             <summary>利用渐变实现</summary>
 514 |             <hgroup class="wave-stripe">
 515 |                 <h1>.wave-stripe</h1>
 516 |             </hgroup>
 517 |         </div>
 518 |         <style class="code" contenteditable=true>
 519 |             .wave-stripe{
 520 |                 position: absolute;
 521 |                 top:50%;
 522 |                 left: 50%;
 523 |                 transform:translate(-50%,-50%);
 524 |                 width: 200px;
 525 |                 line-height:200px;
 526 |                 text-align: center;
 527 |                 color: #333;
 528 |                 font-size: 200%;
 529 |                 border-radius:.5em;
 530 |                 background:
 531 |                 linear-gradient(135deg, deeppink 25%, transparent 25%) -50px 0,
 532 |                 linear-gradient(225deg, deeppink 25%, transparent 25%) -50px 0,
 533 |                 linear-gradient(315deg, deeppink 25%, transparent 25%),
 534 |                 linear-gradient(45deg, deeppink 25%, transparent 25%);
 535 |                 background-size: 40px 40px;
 536 | 
 537 |             }
 538 |         </style>
 539 |      </section>
 540 | 
 541 |     <!-- stripe 渐变实现条纹背景图案 -->
 542 |     <section class="code-wrap cf">
 543 |         <div class="css-live-wrap">
 544 |             <summary>条纹背景图</summary>
 545 |             <summary>利用渐变实现</summary>
 546 |             <hgroup class="arrow-stripe">
 547 |                 <h1>.arrow-stripe</h1>
 548 |             </hgroup>
 549 |         </div>
 550 |         <style class="code" contenteditable=true>
 551 |             .arrow-stripe{
 552 |                 position: absolute;
 553 |                 top: 50%;
 554 |                 left: 50%;
 555 |                 transform: translate(-50%, -50%);
 556 |                 width: 200px;
 557 |                 line-height: 200px;
 558 |                 text-align: center;
 559 |                 color: #333;
 560 |                 font-size: 200%;
 561 |                 border-radius:.5em;
 562 |                 background:
 563 |                 linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
 564 |                 linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);
 565 |                 background-color:#e1ebbd;
 566 |                 background-position:  64px 64px;
 567 |                 background-size: 128px 128px;
 568 |             }
 569 |         </style>
 570 |     </section>.
 571 | 
 572 |     <!-- stripe 渐变实现条纹背景图案 -->
 573 |     <section class="code-wrap cf">
 574 |         <div class="css-live-wrap">
 575 |             <summary>混合模式背景图</summary>
 576 |             <summary>利用渐变实现</summary>
 577 |             <hgroup class="colorful-stripe">
 578 |                 <h1>.colorful-stripe</h1>
 579 |             </hgroup>
 580 |         </div>
 581 |         <style class="code" contenteditable=true>
 582 |             .colorful-stripe{
 583 |                 position: absolute;
 584 |                 top: 50%;
 585 |                 left: 50%;
 586 |                 transform: translate(-50%, -50%);
 587 |                 width: 300px;
 588 |                 line-height: 200px;
 589 |                 text-align: center;
 590 |                 color: #fff;
 591 |                 font-size: 200%;
 592 |                 border-radius: .5em;
 593 |                 background:
 594 |                 linear-gradient(limegreen, transparent),
 595 |                 linear-gradient(90deg, skyblue, transparent),
 596 |                 linear-gradient(-90deg, coral, transparent);
 597 |                 background-blend-mode: screen;
 598 |             }
 599 |         </style>
 600 |     </section>
 601 | 
 602 |     <!-- stripe 渐变实现随机背景图案 -->
 603 |     <section class="code-wrap cf">
 604 |         <div class="css-live-wrap">
 605 |             <div class="star" title="致敬《CSS SECRET》作者，此实例是书中例子"></div>
 606 |             <summary>随机背景图</summary>
 607 |             <summary>利用渐变、蝉随机实现</summary>
 608 |             <hgroup class="random-stripe">
 609 |                 <h1>.random-stripe</h1>
 610 |             </hgroup>
 611 |         </div>
 612 |         <style class="code" contenteditable=true>
 613 |             .random-stripe{
 614 |                 position: absolute;
 615 |                 top: 50%;
 616 |                 left: 50%;
 617 |                 transform: translate(-50%, -50%);
 618 |                 width: 300px;
 619 |                 line-height: 200px;
 620 |                 text-align: center;
 621 |                 color: #fff;
 622 |                 font-size: 200%;
 623 |                 border-radius: .5em;
 624 |                 background: hsl(20, 40%, 90%);
 625 |                 background-image:
 626 |                 linear-gradient(90deg, #663366 11px, transparent 0),
 627 |                 linear-gradient(90deg, #CCCCCC 23px, transparent 0),
 628 |                 linear-gradient(90deg, #CC99CC 41px, transparent 0),
 629 |                 linear-gradient(90deg, #ff9933 53px, transparent 0);
 630 |                 background-size: 59px 100%, 61px 100%, 83px 100%, 103px 100%;
 631 |             }
 632 |         </style>
 633 |     </section>
 634 | 
 635 |     <!-- sun 线性渐变、阴影、旋转实现晴天天气图案 -->
 636 |     <section id="sun" class="code-wrap cf">
 637 |         <div class="css-live-wrap">
 638 |             <summary>晴天（sun）（单标签实现）</summary>
 639 |             <summary>利用线性渐变、阴影、旋转实现</summary>
 640 |             <hgroup class="sun">
 641 |                 <h1>.sun</h1>
 642 |             </hgroup>
 643 |         </div>
 644 |         <style class="code" contenteditable=true>
 645 |             .sun{
 646 |                 position: absolute;
 647 |                 top: 50%;
 648 |                 left: 50%;
 649 |                 width:200px;
 650 |                 height:260px;
 651 |                 transform: translate(-50%, -50%);
 652 |                 text-align:center;
 653 |                 font-size:200%;
 654 |                 color:#fff;
 655 |                 background:#0BF;
 656 |                 border-radius:5px;
 657 |             }
 658 |             .sun:before{
 659 |                 content: '';
 660 |                 position: absolute;
 661 |                 width: 80px;
 662 |                 height: 80px;
 663 |                 left: 50%;
 664 |                 top: 50%;
 665 |                 transform: translate(-50%, -50%);
 666 |                 border-radius:50%;
 667 |                 background:rgba(255, 238, 68, 1);
 668 |                 box-shadow: 0 0 0 15px rgba(255,255,0,0.2),0 0 15px #fff;
 669 |                 z-index:-10;
 670 |             }
 671 |             .sun:after{
 672 |                 content: '';
 673 |                 position: absolute;
 674 |                 top: 50%;
 675 |                 left: 50%;
 676 |                 height: 160px;
 677 |                 width: 160px;
 678 |                 transform: translate(-50%, -50%) rotate(30deg);
 679 |                 z-index:-100;
 680 |                 background-image:
 681 |                 -webkit-linear-gradient(top,rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%),
 682 |                 -webkit-linear-gradient(left,rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
 683 |                 background-size: 20px 100%, 100% 20px;
 684 |                 background-repeat: no-repeat;
 685 |                 background-position: center center, center center;
 686 |                 animation:sunRotate 10s linear infinite;
 687 |             }
 688 |             @keyframes sunRotate{
 689 |                 0%{
 690 |                     transform: translate(-50%, -50%) rotate(30deg);
 691 |                 }
 692 |                 100%{
 693 |                     transform: translate(-50%, -50%) rotate(390deg);
 694 |                 }
 695 |             }
 696 |         </style>
 697 |     </section>
 698 | 
 699 |     <!-- cloudy 阴影实现多云天气图案 -->
 700 |     <section id="cloudy" class="code-wrap cf">
 701 |         <div class="css-live-wrap">
 702 |             <summary>多云（cloudy）（单标签实现）</summary>
 703 |             <summary>利用线性渐变、阴影、缩放实现</summary>
 704 |             <hgroup class="cloudy">
 705 |                 <h1>.cloudy</h1>
 706 |             </hgroup>
 707 |         </div>
 708 |         <style class="code" contenteditable=true>
 709 |             .cloudy{
 710 |                 position: absolute;
 711 |                 top: 50%;
 712 |                 left: 50%;
 713 |                 width:200px;
 714 |                 height:260px;
 715 |                 transform: translate(-50%, -50%);
 716 |                 text-align:center;
 717 |                 font-size:200%;
 718 |                 color:#fff;
 719 |                 background:#2EB5E5;
 720 |                 border-radius:5px;
 721 |             }
 722 |             .cloudy:before{
 723 |                 content: '';
 724 |                 position: absolute;
 725 |                 height: 50px;
 726 |                 width: 50px;
 727 |                 background: #FFFFFF;
 728 |                 left:30%;
 729 |                 top:55%;
 730 |                 transform: translate(-50%, -50%);
 731 |                 border-radius: 50%;
 732 |                 z-index:100;
 733 |                 box-shadow:
 734 |                 #FFFFFF 65px -15px 0 -5px,
 735 |                 #FFFFFF 25px -25px,
 736 |                 #FFFFFF 30px 10px,
 737 |                 #FFFFFF 60px 15px 0 -10px,
 738 |                 #FFFFFF 85px 5px 0 -5px;
 739 |                 animation: cloudy 5s ease-in-out infinite;
 740 |             }
 741 |             .cloudy:after{
 742 |                 content:"";
 743 |                 position: absolute;
 744 |                 top: 80%;
 745 |                 left: 50%;
 746 |                 height: 15px;
 747 |                 width: 120px;
 748 |                 background:rgba(0,0,0,.5);
 749 |                 border-radius: 50%;
 750 |                 transform: translate(-50%, -50%);
 751 |                 animation: cloudy_shadow 5s ease-in-out infinite;
 752 |             }
 753 |             @keyframes cloudy {
 754 |                 50%{
 755 |                     transform: translate(-50%, -70%);
 756 |                 }
 757 |                 100%{
 758 |                     transform: translate(-50%, -50%);
 759 |                 }
 760 |             }
 761 |             @keyframes cloudy_shadow{
 762 |                 50%{
 763 |                     transform: translate(-50%, -50%) scale(0.8);
 764 |                     background:rgba(0,0,0,.2);
 765 |                 }
 766 |                 100%{
 767 |                     transform: translate(-50%, -50%) scale(1);
 768 |                     background:rgba(0,0,0,.5);
 769 |                 }
 770 |             }
 771 |        </style>
 772 |     </section>
 773 | 
 774 |     <!-- cloudy 阴影实现多云天气图案 -->
 775 |     <section id="cloudy2" class="code-wrap cf">
 776 |         <div class="css-live-wrap">
 777 |             <summary>多云（cloudy2）（单标签实现）</summary>
 778 |             <summary>利用线性渐变、阴影、缩放实现</summary>
 779 |             <hgroup class="cloudy2">
 780 |                 <h1>.cloudy2</h1>
 781 |             </hgroup>
 782 |         </div>
 783 |         <style class="code" contenteditable=true>
 784 |             .cloudy2{
 785 |                 position: absolute;
 786 |                 top: 50%;
 787 |                 left: 50%;
 788 |                 width:200px;
 789 |                 height:260px;
 790 |                 transform: translate(-50%, -50%);
 791 |                 text-align:center;
 792 |                 font-size:200%;
 793 |                 color:#fff;
 794 |                 background:#2EB5E5;
 795 |                 border-radius:5px;
 796 |             }
 797 |             .cloudy2:before {
 798 |                 content: "";
 799 |                 text-indent:23px;
 800 |                 font-size:22px;
 801 |                 line-height:40px;
 802 |                 color:#333;
 803 |                 position: absolute;
 804 |                 height: 50px;width: 50px;
 805 |                 background: #FFFFFF;
 806 |                 left:30%;
 807 |                 top:55%;
 808 |                 transform: translate(-50%, -50%);
 809 |                 border-radius: 50%;
 810 |                 z-index:100;
 811 |                 box-shadow:
 812 |                 #FFFFFF 65px -15px 0 -5px,
 813 |                 #FFFFFF 25px -25px,
 814 |                 #FFFFFF 30px 10px,
 815 |                 #FFFFFF 60px 15px 0 -10px,
 816 |                 #FFFFFF 85px 5px 0 -5px;
 817 |                 animation: cloudy2 5s ease-in-out infinite;
 818 |             }
 819 |             .cloudy2:after{
 820 |                 content:"";
 821 |                 position: absolute;
 822 |                 top: 45%;
 823 |                 left: 63%;
 824 |                 height: 60px;
 825 |                 width: 60px;
 826 |                 z-index:10;
 827 |                 background:linear-gradient(180deg,#FE9F38 0%, #F46635 100%);
 828 |                 border-radius: 50%;
 829 |                 transform: translate(-50%, -50%);
 830 |                 box-shadow: 0 0 10px 4px #FFA563;
 831 |                 animation: cloudy2 10s ease-in-out infinite;
 832 |             }
 833 |             @keyframes cloudy2 {
 834 |                 50%{
 835 |                     transform: translate(-50%, -70%);
 836 |                 }
 837 |                 100%{
 838 |                     transform: translate(-50%, -50%);
 839 |                 }
 840 |             }
 841 |         </style>
 842 |     </section>
 843 | 
 844 |     <!-- rainy 阴影实现雨天天气图案 -->
 845 |     <section id="rainy" class="code-wrap cf">
 846 |         <div class="css-live-wrap">
 847 |             <summary>雨（rainy）</summary>
 848 |             <summary>利用线性渐变、阴影、缩放实现</summary>
 849 |             <hgroup class="rainy-container">
 850 |                 <h1>.rainy</h1>
 851 |                 <div class="rainy"></div>
 852 |             </hgroup>
 853 |         </div>
 854 |         <style class="code" contenteditable=true>
 855 |             .rainy-container{
 856 |                 position: absolute;
 857 |                 top: 50%;
 858 |                 left: 50%;
 859 |                 width: 200px;
 860 |                 height: 260px;
 861 |                 transform: translate(-50%, -50%);
 862 |                 text-align: center;
 863 |                 font-size: 200%;
 864 |                 color: #fff;
 865 |                 background: #E6E6E6;
 866 |                 border-radius: 5px;
 867 |             }
 868 |             .rainy{
 869 |                 position: absolute;
 870 |                 width: 3px;
 871 |                 height: 6px;
 872 |                 top: 30%;
 873 |                 left: 50%;
 874 |                 background: #CCCCCC;
 875 |                 border-radius: 50%;
 876 |                 /*animation: rainy_rain .7s infinite linear;*/
 877 |             }
 878 |             .rainy:before{
 879 |                 content: "";
 880 |                 color: #333;
 881 |                 position: absolute;
 882 |                 height: 50px;
 883 |                 width: 50px;
 884 |                 top: 30px;
 885 |                 left: -40px;
 886 |                 background: #CCC;
 887 |                 transform: translate(-50%, -50%);
 888 |                 border-radius: 50%;
 889 |                 /*box-shadow: #CCC 65px -15px 0 -5px, #CCC 25px -25px, #CCC 30px 10px, #CCC 60px 15px 0 -10px, #CCC 85px 5px 0 -5px;
 890 |                 */
 891 |                 box-shadow: #CCC 65px -15px 0 -5px;
 892 |                 animation: cloudy 5s ease-in-out infinite;
 893 |             }
 894 |             .rainy:after{
 895 |                 content: "";
 896 |                 position: absolute;
 897 |                 top: 120px;
 898 |                 left: 50%;
 899 |                 height: 15px;
 900 |                 width: 120px;
 901 |                 background: rgba(0, 0, 0, .5);
 902 |                 border-radius: 50%;
 903 |                 transform: translate(-50%, -50%);
 904 |                 animation: cloudy_shadow 5s ease-in-out infinite;
 905 |             }
 906 |             @keyframes cloudy {
 907 |                 50% {
 908 |                     transform: translate(-50%, -70%);
 909 |                 }
 910 |                 100% {
 911 |                     transform: translate(-50%, -50%);
 912 |                 }
 913 |             }
 914 |             @keyframes cloudy_shadow {
 915 |                 50% {
 916 |                     transform: translate(-50%, -50%) scale(0.8);
 917 |                     background: rgba(0, 0, 0, .2);
 918 |                 }
 919 |                 100% {
 920 |                     transform: translate(-50%, -50%) scale(1);
 921 |                     background: rgba(0, 0, 0, .5);
 922 |                 }
 923 |             }
 924 |             @keyframes rainy_rain {
 925 |                 0% {
 926 |                     box-shadow: rgba(0, 0, 0, 0) -10px 30px, rgba(0, 0, 0, 0) 40px 40px, rgba(0, 0, 0, .3) -50px 75px, rgba(0, 0, 0, .3) 55px 50px, rgba(0, 0, 0, .3) -18px 100px, rgba(0, 0, 0, .3) 12px 95px, rgba(0, 0, 0, .3) -31px 45px, rgba(0, 0, 0, .3) 30px 35px;
 927 |                 }
 928 |                 25% {
 929 |                     box-shadow: rgba(0, 0, 0, .3) -10px 45px, rgba(0, 0, 0, .3) 40px 60px, rgba(0, 0, 0, .3) -50px 90px, rgba(0, 0, 0, .3) 55px 65px, rgba(0, 0, 0, 0) -18px 120px, rgba(0, 0, 0, 0) 12px 120px, rgba(0, 0, 0, .3) -31px 70px, rgba(0, 0, 0, .3) 30px 60px;
 930 |                 }
 931 |                 26% {
 932 |                     box-shadow: rgba(0, 0, 0, .3) -10px 45px, rgba(0, 0, 0, .3) 40px 60px, rgba(0, 0, 0, .3) -50px 90px, rgba(0, 0, 0, .3) 55px 65px, rgba(0, 0, 0, 0) -18px 40px, rgba(0, 0, 0, 0) 12px 20px, rgba(0, 0, 0, .3) -31px 70px, rgba(0, 0, 0, .3) 30px 60px;
 933 |                 }
 934 |                 50% {
 935 |                     box-shadow: rgba(0, 0, 0, .3) -10px 70px, rgba(0, 0, 0, .3) 40px 80px, rgba(0, 0, 0, 0) -50px 100px, rgba(0, 0, 0, .3) 55px 80px, rgba(0, 0, 0, .3) -18px 60px, rgba(0, 0, 0, .3) 12px 45px, rgba(0, 0, 0, .3) -31px 95px, rgba(0, 0, 0, .3) 30px 85px;
 936 |                 }
 937 |                 51% {
 938 |                     box-shadow: rgba(0, 0, 0, .3) -10px 70px, rgba(0, 0, 0, .3) 40px 80px, rgba(0, 0, 0, 0) -50px 45px, rgba(0, 0, 0, .3) 55px 80px, rgba(0, 0, 0, .3) -18px 60px, rgba(0, 0, 0, .3) 12px 45px, rgba(0, 0, 0, .3) -31px 95px, rgba(0, 0, 0, .3) 30px 85px;
 939 |                 }
 940 |                 75% {
 941 |                     box-shadow: rgba(0, 0, 0, .3) -10px 95px, rgba(0, 0, 0, .3) 40px 100px, rgba(0, 0, 0, .3) -50px 60px, rgba(0, 0, 0, 0) 55px 95px, rgba(0, 0, 0, .3) -18px 80px, rgba(0, 0, 0, .3) 12px 70px, rgba(0, 0, 0, 0) -31px 120px, rgba(0, 0, 0, 0) 30px 110px;
 942 |                 }
 943 |                 76% {
 944 |                     box-shadow: rgba(0, 0, 0, .3) -10px 95px, rgba(0, 0, 0, .3) 40px 100px, rgba(0, 0, 0, .3) -50px 60px, rgba(0, 0, 0, 0) 55px 35px, rgba(0, 0, 0, .3) -18px 80px, rgba(0, 0, 0, .3) 12px 70px, rgba(0, 0, 0, 0) -31px 25px, rgba(0, 0, 0, 0) 30px 15px;
 945 |                 }
 946 |                 100% {
 947 |                     box-shadow: rgba(0, 0, 0, 0) -10px 120px, rgba(0, 0, 0, 0) 40px 120px, rgba(0, 0, 0, .3) -50px 75px, rgba(0, 0, 0, .3) 55px 50px, rgba(0, 0, 0, .3) -18px 100px, rgba(0, 0, 0, .3) 12px 95px, rgba(0, 0, 0, .3) -31px 45px, rgba(0, 0, 0, .3) 30px 35px;
 948 |                 }
 949 |             }
 950 |         </style>
 951 |      </section>
 952 | 
 953 |     <!-- breeze 利用border、transparent、实现微风天气图案 -->
 954 |     <section id="breeze" class="code-wrap cf">
 955 |         <div class="css-live-wrap">
 956 |             <summary>微风（breeze）</summary>
 957 |             <summary>利用border、transparent、实现</summary>
 958 |             <hgroup class="breeze-container">
 959 |                 <h1>.breeze</h1>
 960 |                 <div class="breeze"></div>
 961 |             </hgroup>
 962 |         </div>
 963 |         <style class="code" contenteditable=true>
 964 |                .breeze-container{
 965 |                    position: absolute;
 966 |                    top: 50%;
 967 |                    left: 50%;
 968 |                    width:200px;
 969 |                    height:260px;
 970 |                    transform: translate(-50%, -50%);
 971 |                    text-align:center;
 972 |                    font-size:200%;
 973 |                    color:#fff;
 974 |                    background:#00BBFF;
 975 |                    border-radius:5px;
 976 |                }
 977 |                .breeze-container:after{
 978 |                    content:"";
 979 |                    position:absolute;
 980 |                    top:58%;
 981 |                    left:50%;
 982 |                    transform: translate(-50%, -50%);
 983 |                    width:6px;
 984 |                    height:70px;
 985 |                    background:#fff;
 986 |                }
 987 |                .breeze{
 988 |                    position:absolute;
 989 |                    top: 30%;
 990 |                    left: 50%;
 991 |                    transform: translate(-50%, -50%) rotate(1deg);
 992 |                    border-bottom:60px solid #fff;
 993 |                    border-left:5px solid transparent;
 994 |                    border-right:5px solid transparent;
 995 |                    animation: windmill 12s infinite linear;
 996 |                    transform-origin:50.5% 62px;
 997 |                }
 998 |                .breeze:before{
 999 |                    position:absolute;
1000 |                    top: 75px;
1001 |                    left: -59px;
1002 |                    content:"";
1003 |                    border-right:60px solid #fff;
1004 |                    border-top:5px solid transparent;
1005 |                    border-bottom:5px solid transparent;
1006 |                    transform:rotate(-30deg);
1007 |                }
1008 |                .breeze:after{
1009 |                    position:absolute;
1010 |                    top: 75px;left: -1px;
1011 |                    content:"";
1012 |                    border-left:60px solid #fff;
1013 |                    border-top:5px solid transparent;
1014 |                    border-bottom:5px solid transparent;
1015 |                    transform:rotate(30deg);
1016 |                }
1017 |                @keyframes windmill{
1018 |                    0%{
1019 |                        transform: translate(-50%, -50%) rotate(0deg);
1020 |                    }
1021 |                    100%{
1022 |                        transform: translate(-50%, -50%) rotate(360deg);
1023 |                    }
1024 |                }
1025 |         </style>
1026 |     </section>
1027 | 
1028 |     <!-- rainbow 利用border、box-shadow 实现彩虹天气图案 -->
1029 |     <section id="rainbow" class="code-wrap cf">
1030 |         <div class="css-live-wrap">
1031 |             <summary>彩虹（rainbow）</summary>
1032 |             <summary>利用border、box-shadow 实现</summary>
1033 |             <hgroup class="rainbow-container">
1034 |                 <h1>.rainbow</h1>
1035 |                 <div class="rainbow"></div>
1036 |             </hgroup>
1037 |         </div>
1038 |         <style class="code" contenteditable=true>
1039 |             .rainbow-container{
1040 |                 position: absolute;
1041 |                 top: 50%;
1042 |                 left: 50%;
1043 |                 width:200px;
1044 |                 height:260px;
1045 |                 transform: translate(-50%, -50%);
1046 |                 text-align:center;
1047 |                 font-size:200%;
1048 |                 color:#fff;
1049 |                 background:#F3D166;
1050 |                 border-radius:5px;
1051 |             }
1052 |             .rainbow{
1053 |                 position:absolute;
1054 |                 top: 50%;
1055 |                 left: 50%;
1056 |                 transform: translate(-50%, -50%);
1057 |                 height: 1px;
1058 |                 width: 1px;
1059 |             }
1060 |             .rainbow:before{
1061 |                 content:"";
1062 |                 position:absolute;
1063 |                 top: 50%;
1064 |                 left: 50%;
1065 |                 transform: translate(-50%, -50%) rotate(45deg);
1066 |                 height: 70px;
1067 |                 width: 70px;
1068 |                 border-radius: 100px 0 0 0;
1069 |                 box-shadow:
1070 |                 #F44336 -2px -2px 0 1px,
1071 |                 #FF9800 -4px -4px 0 3px,
1072 |                 #FFEB3B -6px -6px 0 5px,
1073 |                 #8BC34A -8px -8px 0 7px,
1074 |                 #00BCD4 -10px -10px 0 9px,
1075 |                 #2196F3 -12px -12px 0 11px,
1076 |                 #9C27B0 -14px -14px 0 13px;
1077 |                 animation: rainbow 5s ease-in-out infinite;
1078 |             }
1079 |             .rainbow:after{
1080 |                 content: "";
1081 |                 position: absolute;
1082 |                 top: 70px;
1083 |                 left: 50%;
1084 |                 height: 15px;
1085 |                 width: 120px;
1086 |                 background: rgba(0, 0, 0, .5);
1087 |                 border-radius: 50%;
1088 |                 transform: translate(-50%, -50%);
1089 |                 animation: cloudy_shadow 5s ease-in-out infinite;
1090 |             }
1091 |             @keyframes rainbow {
1092 |                 50% {
1093 |                     transform: translate(-50%, -55%) rotate(30deg);
1094 |                 }
1095 |                 100% {
1096 |                     transform: translate(-50%, -50%) rotate(45deg);
1097 |                 }
1098 |             }
1099 |             @keyframes cloudy_shadow {
1100 |                 50% {
1101 |                     transform: translate(-50%, -50%) scale(0.8);
1102 |                     background: rgba(0, 0, 0, .2);
1103 |                 }
1104 |                 100% {
1105 |                     transform: translate(-50%, -50%) scale(1);
1106 |                     background: rgba(0, 0, 0, .5);
1107 |                 }
1108 |             }
1109 |         </style>
1110 |     </section>
1111 | 
1112 |     <!-- starry 利用 box-shadow 实现彩虹天气图案 -->
1113 |     <section id="starry" class="code-wrap cf">
1114 |         <div class="css-live-wrap">
1115 |             <summary>夜空璀璨（starry）</summary>
1116 |             <summary>利用 box-shadow 实现</summary>
1117 |             <hgroup class="starry-container">
1118 |                 <h1>.starry</h1>
1119 |                 <div class="starry"></div>
1120 |             </hgroup>
1121 |         </div>
1122 |         <style class="code" contenteditable=true>
1123 |             .starry-container{
1124 |                 position: absolute;
1125 |                 top: 50%;
1126 |                 left: 50%;
1127 |                 width:200px;
1128 |                 height:260px;
1129 |                 transform: translate(-50%, -50%);
1130 |                 text-align:center;
1131 |                 font-size:200%;
1132 |                 color:#fff;
1133 |                 background:#222233;
1134 |                 border-radius:5px;
1135 |             }
1136 |             .starry{
1137 |                 position:absolute;
1138 |                 top: 30%;
1139 |                 left: 40%;
1140 |                 transform: translate(-50%, -50%);
1141 |                 height: 4px;
1142 |                 width: 4px;
1143 |                 border-radius:50%;
1144 |                 box-shadow:
1145 |                 #FFFFFF -26px 77px 0 -1px,
1146 |                 rgba(255,255,255,0.1) -36px 59px 0 -1px,
1147 |                 rgba(255,255,255,0.1) -28px 89px 0 -1px,
1148 |                 #FFFFFF -35px 20px 0 -1px,
1149 |                 #FFFFFF 14px 100px,
1150 |                 rgba(255,255,255,0.1) 41px 60px,
1151 |                 #FFFFFF 34px 39px,
1152 |                 rgba(255,255,255,0.1) 14px 45px 0 -1px,
1153 |                 #FFFFFF 64px 12px 0 -1px,
1154 |                 rgba(255,255,255,0.1) 32px 96px 0 -1px,
1155 |                 #FFFFFF 64px 71px,
1156 |                 rgba(255,255,255,0.1) 60px 18px 0 -1px,
1157 |                 #FFFFFF 34px 9px,
1158 |                 rgba(255,255,255,0.1) -26px 55px 0 -1px;
1159 |                 animation: starry_star 5s ease-in-out infinite;
1160 |             }
1161 |             .starry:before{
1162 |                 content:"";
1163 |                 position:absolute;
1164 |                 top: 20%;
1165 |                 left: 50%;
1166 |                 width:100px;
1167 |                 height:100px;
1168 |                 background: transparent;
1169 |                 box-shadow: #FFFFFF -25px 0;
1170 |                 transform: rotate(-5deg);
1171 |                 border-radius: 50%;
1172 |                 animation: starry 5s ease-in-out infinite;
1173 |             }
1174 |             @keyframes starry {
1175 |                 50% {
1176 |                     transform: rotate(10deg);
1177 |                 }
1178 |             }
1179 |             @keyframes starry_star{
1180 |                 50%{
1181 |                     box-shadow:
1182 |                     rgba(255,255,255,0.1) -26px 77px 0 -1px,
1183 |                     #FFF -36px 59px 0 -1px,
1184 |                     #FFF -28px 89px 0 -1px,
1185 |                     rgba(255,255,255,0.1) -35px 20px 0 -1px,
1186 |                     rgba(255,255,255,0.1) 14px 100px,
1187 |                     #FFF 41px 60px,
1188 |                     rgba(255,255,255,0.1) 34px 39px,
1189 |                     #FFF 14px 45px 0 -1px,
1190 |                     rgba(255,255,255,0.1) 64px 12px 0 -1px,
1191 |                     #FFF 32px 96px 0 -1px,
1192 |                     rgba(255,255,255,0.1) 64px 71px,
1193 |                     #FFF 60px 18px 0 -1px,
1194 |                     rgba(255,255,255,0.1) 34px 9px,
1195 |                     #FFF -26px 55px 0 -1px;
1196 |                 }
1197 |             }
1198 |         </style>
1199 |     </section>
1200 | 
1201 |     <!-- thunder 阴影、border实现雷电天气图案 -->
1202 |     <section id="thunder" class="code-wrap cf">
1203 |         <div class="css-live-wrap">
1204 |             <summary>雷电（thunder）</summary>
1205 |             <summary>利用阴影、border实现</summary>
1206 |             <hgroup class="thunder-container">
1207 |                 <h1>.thunder</h1>
1208 |                 <div class="thunder"></div>
1209 |             </hgroup>
1210 |         </div>
1211 |         <style class="code" contenteditable=true>
1212 |             .thunder-container {
1213 |                 position: absolute;
1214 |                 top: 50%;
1215 |                 left: 50%;
1216 |                 width: 200px;
1217 |                 height: 260px;
1218 |                 transform: translate(-50%, -50%);
1219 |                 text-align: center;
1220 |                 font-size: 200%;
1221 |                 color: #fff;
1222 |                 background: #444;
1223 |                 border-radius: 5px;
1224 |             }
1225 |             .thunder {
1226 |                 color: #333;
1227 |                 position: absolute;
1228 |                 height: 50px;
1229 |                 width: 50px;
1230 |                 top: 40%;
1231 |                 left: 30%;
1232 |                 background: #222;
1233 |                 transform: translate(-50%, -50%);
1234 |                 border-radius: 50%;
1235 |                 box-shadow:
1236 |                 #222 65px -15px 0 -5px,
1237 |                 #222 25px -25px,
1238 |                 #222 30px 10px,
1239 |                 #222 60px 15px 0 -10px,
1240 |                 #222 85px 5px 0 -5px;
1241 |                 animation: cloudy 5s ease-in-out infinite;
1242 |             }
1243 |             .thunder:before {
1244 |                 content: "";
1245 |                 position: absolute;
1246 |                 top: 60px;
1247 |                 left: 60px;
1248 |                 border-left: 0px solid transparent;
1249 |                 border-right: 8px solid transparent;
1250 |                 border-top: 38px solid yellow;
1251 |                 box-shadow: yellow -7px -32px;
1252 |                 transform:rotate(30deg);
1253 |                 transform-origin: center -50px;
1254 |                 animation:stormy_thunder 2s steps(1, start) infinite;;
1255 |                 animation-delay: 1s;
1256 |             }
1257 |             .thunder:after {
1258 |                 content: "";
1259 |                 position: absolute;
1260 |                 top: 120px;
1261 |                 left: 64px;
1262 |                 height: 15px;
1263 |                 width: 120px;
1264 |                 background: rgba(0, 0, 0, .5);
1265 |                 border-radius: 50%;
1266 |                 z-index:-1;
1267 |                 transform: translate(-50%, -50%);
1268 |                 animation: cloudy_shadow 5s ease-in-out infinite;
1269 |             }
1270 |             @keyframes cloudy {
1271 |                 50% {
1272 |                     transform: translate(-50%, -30px);
1273 |                 }
1274 |             }
1275 |             @keyframes cloudy_shadow {
1276 |                 50% {
1277 |                     transform: translate(-50%, 0) scale(0.8);
1278 |                     background: rgba(0, 0, 0, .2);
1279 |                 }
1280 |             }
1281 |             @keyframes stormy_thunder{
1282 |                 0%  {  transform: rotate(30deg); opacity:1; }
1283 |                 5%  {  transform: rotate(-34deg); opacity:1; }
1284 |                 10% {  transform: rotate(0deg); opacity:1; }
1285 |                 /*15% {  transform: rotate(-34deg); opacity:0; }*/
1286 |             }
1287 |         </style>
1288 |     </section>
1289 | 
1290 |     <!-- snowy 阴影实现雪天天气图案 -->
1291 |     <section id="snowy" class="code-wrap cf">
1292 |         <div class="css-live-wrap">
1293 |             <summary>雪（snowy）</summary>
1294 |             <summary>利用阴影实现</summary>
1295 |             <hgroup class="snowy-container">
1296 |                 <h1>.snowy</h1>
1297 |                 <div class="snowy"></div>
1298 |             </hgroup>
1299 |         </div>
1300 |         <style class="code" contenteditable=true>
1301 |             .snowy-container {
1302 |                 position: absolute;
1303 |                 top: 50%;
1304 |                 left: 50%;
1305 |                 width: 200px;
1306 |                 height: 260px;
1307 |                 transform: translate(-50%, -50%);
1308 |                 text-align: center;
1309 |                 font-size: 200%;
1310 |                 color: #fff;
1311 |                 background: #607D8B;
1312 |                 border-radius: 5px;
1313 |             }
1314 |             .snowy {
1315 |                 position: absolute;
1316 |                 width: 4px;
1317 |                 height: 4px;
1318 |                 border-radius:50%;
1319 |                 top: 30%;
1320 |                 left: 50%;
1321 |                 background: #fff;
1322 |                 border-radius: 50%;
1323 |                 animation: snowy_rain 2s infinite linear;
1324 |             }
1325 |             .snowy:before {
1326 |                 content: "";
1327 |                 color: #333;
1328 |                 position: absolute;
1329 |                 height: 50px;
1330 |                 width: 50px;
1331 |                 top: 30px;
1332 |                 left: -40px;
1333 |                 background: #eee;
1334 |                 transform: translate(-50%, -50%);
1335 |                 border-radius: 50%;
1336 |                 box-shadow:
1337 |                 #eee 65px -15px 0 -5px,
1338 |                 #eee 25px -25px,
1339 |                 #eee 30px 10px,
1340 |                 #eee 60px 15px 0 -10px,
1341 |                 #eee 85px 5px 0 -5px;
1342 |                 animation: cloudy 5s ease-in-out infinite;
1343 |             }
1344 |             .snowy:after {
1345 |                 content: "";
1346 |                 position: absolute;
1347 |                 top: 120px;
1348 |                 left: 50%;
1349 |                 height: 15px;
1350 |                 width: 120px;
1351 |                 background: rgba(0, 0, 0, .5);
1352 |                 border-radius: 50%;
1353 |                 transform: translate(-50%, -50%);
1354 |                 animation: cloudy_shadow 5s ease-in-out infinite;
1355 |             }
1356 |             @keyframes cloudy {
1357 |                 50% {
1358 |                     transform: translate(-50%, -70%);
1359 |                 }
1360 |                 100% {
1361 |                     transform: translate(-50%, -50%);
1362 |                 }
1363 |             }
1364 |             @keyframes cloudy_shadow {
1365 |                 50% {
1366 |                     transform: translate(-50%, -50%) scale(0.8);
1367 |                     background: rgba(0, 0, 0, .2);
1368 |                 }
1369 |                 100% {
1370 |                     transform: translate(-50%, -50%) scale(1);
1371 |                     background: rgba(0, 0, 0, .5);
1372 |                 }
1373 |             }
1374 |             @keyframes snowy_rain {
1375 |                 0% {
1376 |                     box-shadow: rgba(255, 255, 255, 0) -10px 30px,
1377 |                     rgba(255, 255, 255, 0) 40px 40px,
1378 |                     rgba(255, 255, 255, .6) -50px 75px,
1379 |                     rgba(255, 255, 255, .6) 55px 50px,
1380 |                     rgba(255, 255, 255, .6) -18px 100px,
1381 |                     rgba(255, 255, 255, .6) 12px 95px,
1382 |                     rgba(255, 255, 255, .6) -31px 45px,
1383 |                     rgba(255, 255, 255, .6) 30px 35px;
1384 |                 }
1385 |                 25% {
1386 |                     box-shadow: rgba(255, 255, 255, .6) -10px 45px,
1387 |                     rgba(255, 255, 255, .6) 40px 60px,
1388 |                     rgba(255, 255, 255, .6) -50px 90px,
1389 |                     rgba(255, 255, 255, .6) 55px 65px,
1390 |                     rgba(255, 255, 255, 0) -18px 120px,
1391 |                     rgba(255, 255, 255, 0) 12px 120px,
1392 |                     rgba(255, 255, 255, .6) -31px 70px,
1393 |                     rgba(255, 255, 255, .6) 30px 60px;
1394 |                 }
1395 |                 26% {
1396 |                     box-shadow: rgba(255, 255, 255, .6) -10px 45px,
1397 |                     rgba(255, 255, 255, .6) 40px 60px,
1398 |                     rgba(255, 255, 255, .6) -50px 90px,
1399 |                     rgba(255, 255, 255, .6) 55px 65px,
1400 |                     rgba(255, 255, 255, 0) -18px 40px,
1401 |                     rgba(255, 255, 255, 0) 12px 20px,
1402 |                     rgba(255, 255, 255, .6) -31px 70px,
1403 |                     rgba(255, 255, 255, .6) 30px 60px;
1404 |                 }
1405 |                 50% {
1406 |                     box-shadow: rgba(255, 255, 255, .6) -10px 70px,
1407 |                     rgba(255, 255, 255, .6) 40px 80px,
1408 |                     rgba(255, 255, 255, 0) -50px 100px,
1409 |                     rgba(255, 255, 255, .6) 55px 80px,
1410 |                     rgba(255, 255, 255, .6) -18px 60px,
1411 |                     rgba(255, 255, 255, .6) 12px 45px,
1412 |                     rgba(255, 255, 255, .6) -31px 95px,
1413 |                     rgba(255, 255, 255, .6) 30px 85px;
1414 |                 }
1415 |                 51% {
1416 |                     box-shadow: rgba(255, 255, 255, .6) -10px 70px,
1417 |                     rgba(255, 255, 255, .6) 40px 80px,
1418 |                     rgba(255, 255, 255, 0) -50px 45px,
1419 |                     rgba(255, 255, 255, .6) 55px 80px,
1420 |                     rgba(255, 255, 255, .6) -18px 60px,
1421 |                     rgba(255, 255, 255, .6) 12px 45px,
1422 |                     rgba(255, 255, 255, .6) -31px 95px,
1423 |                     rgba(255, 255, 255, .6) 30px 85px;
1424 |                 }
1425 |                 75% {
1426 |                     box-shadow: rgba(255, 255, 255, .6) -10px 95px,
1427 |                     rgba(255, 255, 255, .6) 40px 100px,
1428 |                     rgba(255, 255, 255, .6) -50px 60px,
1429 |                     rgba(255, 255, 255, 0) 55px 95px,
1430 |                     rgba(255, 255, 255, .6) -18px 80px,
1431 |                     rgba(255, 255, 255, .6) 12px 70px,
1432 |                     rgba(255, 255, 255, 0) -31px 120px,
1433 |                     rgba(255, 255, 255, 0) 30px 110px;
1434 |                 }
1435 |                 76% {
1436 |                     box-shadow: rgba(255, 255, 255, .6) -10px 95px,
1437 |                     rgba(255, 255, 255, .6) 40px 100px,
1438 |                     rgba(255, 255, 255, .6) -50px 60px,
1439 |                     rgba(255, 255, 255, 0) 55px 35px,
1440 |                     rgba(255, 255, 255, .6) -18px 80px,
1441 |                     rgba(255, 255, 255, .6) 12px 70px,
1442 |                     rgba(255, 255, 255, 0) -31px 25px,
1443 |                     rgba(255, 255, 255, 0) 30px 15px;
1444 |                 }
1445 |                 100% {
1446 |                     box-shadow: rgba(255, 255, 255, 0) -10px 120px,
1447 |                     rgba(255, 255, 255, 0) 40px 120px,
1448 |                     rgba(255, 255, 255, .6) -50px 75px,
1449 |                     rgba(255, 255, 255, .6) 55px 50px,
1450 |                     rgba(255, 255, 255, .6) -18px 100px,
1451 |                     rgba(255, 255, 255, .6) 12px 95px,
1452 |                     rgba(255, 255, 255, .6) -31px 45px,
1453 |                     rgba(255, 255, 255, .6) 30px 35px;
1454 |                 }
1455 |             }
1456 |         </style>
1457 |     </section>
1458 | 
1459 |     <!-- five-star 利用border、transparent、旋转实现 -->
1460 |     <section id="five-star" class="code-wrap cf">
1461 |         <div class="css-live-wrap">
1462 |             <summary>五角星（单标签实现）</summary>
1463 |             <summary>利用border、transparent、旋转实现</summary>
1464 |             <hgroup class="five-star">
1465 |                 <h1></h1>
1466 |             </hgroup>
1467 |         </div>
1468 |         <style class="code" contenteditable=true>
1469 |             .five-star{
1470 |                 position: absolute;
1471 |                 top: 35%;
1472 |                 right: 50%;
1473 |                 transform: translate(-50%, -50%);
1474 |                 width: 0;
1475 |                 height: 0;
1476 |                 display: block;
1477 |                 border-left: 3.04px solid transparent;
1478 |                 border-right: 3.24px solid transparent;
1479 |                 border-bottom: 10px solid #98DBE3;
1480 |                 -webkit-filter: drop-shadow(1px .5px 1px #ccc);
1481 |                 cursor: pointer;
1482 |                 transform:scale(8);
1483 |             }
1484 |             .five-star:before{
1485 |                 content: "";
1486 |                 position: absolute;
1487 |                 top: 8.65px;
1488 |                 left: -8.82px;
1489 |                 width: 0;
1490 |                 height: 0;
1491 |                 color: #98DBE3;
1492 |                 display: block;
1493 |                 border-left: 12.5px solid transparent;
1494 |                 border-right: 12.5px solid transparent;
1495 |                 border-bottom: 9.08px solid #98DBE3;
1496 |                 transform-origin: top center;
1497 |                 transform: rotate(36deg);
1498 |             }
1499 |             .five-star:after{
1500 |                 content: "";
1501 |                 position: absolute;
1502 |                 top: 8.65px;
1503 |                 left: -15px;
1504 |                 width: 0;
1505 |                 height: 0;
1506 |                 color: #98DBE3;
1507 |                 display: block;
1508 |                 border-left: 12.5px solid transparent;
1509 |                 border-right: 12.5px solid transparent;
1510 |                 border-bottom: 9.08px solid #98DBE3;
1511 |                 transform-origin: top center;
1512 |                 transform: rotate(-36deg);
1513 |             }
1514 |         </style>
1515 |     </section>
1516 | 
1517 |     <!-- TaiChi 利用border、transparent、旋转实现太极图 -->
1518 |     <section id="TaiChi" class="code-wrap cf">
1519 |         <div class="css-live-wrap">
1520 |             <summary>太极图（单标签实现）</summary>
1521 |             <summary>利用 box-shadow 实现</summary>
1522 |             <hgroup class="TaiChi">
1523 |                 <h1></h1>
1524 |             </hgroup>
1525 |         </div>
1526 |         <style class="code" contenteditable=true>
1527 |             .TaiChi{
1528 |                 position: absolute;
1529 |                 top: 50%;left: 50%;
1530 |                 width: 200px;height: 200px;
1531 |                 transform: translate(-50%, -50%);
1532 |                 box-shadow:0 0 2px #ddd;
1533 |                 border-radius:50%;
1534 |                 background-image:
1535 |                 radial-gradient(#000 12.5px, transparent 12.5px),
1536 |                 radial-gradient(#fff 12.5px, transparent 12.5px),
1537 |                 radial-gradient(#fff 50px, transparent 50px),
1538 |                 radial-gradient(#000 50px, transparent 50px),
1539 |                 linear-gradient(90deg,#000 100px, #fff 100px);
1540 |                 background-position:center 50px,center -50px,center 50px,center -50px,0 0;
1541 | 
1542 |             }
1543 |         </style>
1544 |     </section>
1545 | 
1546 |     <!-- captainAmerica 利用渐变实现美队盾牌 -->
1547 |     <section id="captainAmerica" class="code-wrap cf">
1548 |         <div class="css-live-wrap">
1549 |             <summary>美队盾牌（单标签实现）</summary>
1550 |             <summary>利用 渐变 实现</summary>
1551 |             <hgroup class="captainAmerica">
1552 |             </hgroup>
1553 |         </div>
1554 |         <style class="code" contenteditable=true>
1555 |             .captainAmerica{
1556 |                 position: absolute;
1557 |                 top: 50%;
1558 |                 left: 50%;
1559 |                 width: 200px;
1560 |                 height: 200px;
1561 |                 transform: translate(-50%, -50%);
1562 |                 background:
1563 |                 linear-gradient(45deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 65%),
1564 |                 linear-gradient(-45deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 65%),
1565 |                 linear-gradient(to right, rgba(0,0,0,0) 35%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 65%),
1566 |                 linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 65%),
1567 |                 radial-gradient(ellipse at center, #0033b0 20%, #ce0021 20%, #ce0021 35%, #eee 35%, #eee 55%, #ce0021 55%);
1568 |                 border-radius: 50%;
1569 |                 box-shadow: 0 3px 0 #a20917,
1570 |                             0 4px 2px 2px #eee;
1571 |             }
1572 |             .captainAmerica::before{
1573 |                 content: '★';
1574 |                 position:absolute;
1575 |                 top: 50%;
1576 |                 left: 50%;
1577 |                 transform: translate(-50%, -50%);
1578 |                 margin-left:-3px;
1579 |                 width: 50px;
1580 |                 height:50px;
1581 |                 font-family: simsun,Tahoma,Helvetica,Arial,SimHei,sans-serif;
1582 |                 line-height: 47px;
1583 |                 z-index: 1;
1584 |                 border-radius: 50%;
1585 |                 font-size: 55px;
1586 |                 color: #fff;
1587 |                 text-align:center;
1588 |                 text-shadow: 2px 1px 2px #777;
1589 |             }
1590 |         </style>
1591 |     </section>
1592 | </div>
1593 | </body>
1594 | </html>


--------------------------------------------------------------------------------
/cssShape/static/css/index.css:
--------------------------------------------------------------------------------
  1 | .container{
  2 |     width: 100%;
  3 |     position: relative;
  4 | }
  5 | .code-wrap{
  6 |     position: relative;
  7 |     width: 100%;
  8 |     border-top: 1px solid  #e6e6e6;
  9 |     border-bottom: 1px solid  #e6e6e6;
 10 |     height: 400px;
 11 |     margin-bottom: 10px;
 12 | }
 13 | .css-live-wrap{
 14 |     position:relative;
 15 |     width:50%;
 16 |     height:100%;
 17 |     float:left;
 18 | }
 19 | .code{
 20 |     width: 50%;
 21 |     height: 100%;
 22 |     box-sizing: border-box;
 23 |     font-size: 14px;
 24 |     background: #ffe;
 25 |     display: block;
 26 |     float: right;
 27 |     padding: 1em;
 28 |     font-family: Consolas, Monaco, monospace;
 29 |     white-space: pre;
 30 |     color: #333;
 31 |     text-shadow: 0 1px 1px white;
 32 |     overflow-y:scroll;
 33 | }
 34 | .star{
 35 |     position: absolute;
 36 |     top:20px;
 37 |     right: 40px;
 38 |     width: 0;
 39 |     height: 0;
 40 |     display: block;
 41 |     border-left: 3.24px solid transparent;
 42 |     border-right: 3.24px solid transparent;
 43 |     border-bottom: 9px solid #E91E63;
 44 |     cursor: pointer;
 45 | }
 46 | .star:before{
 47 |     content: "";
 48 |     position: absolute;
 49 |     top: 8.65px;
 50 |     left: -8.82px;
 51 |     width: 0;
 52 |     height: 0;
 53 |     color: #E91E63;
 54 |     display: block;
 55 |     border-left: 12.5px solid transparent;
 56 |     border-right: 12.5px solid transparent;
 57 |     border-bottom: 9.08px solid #E91E63;
 58 |     transform-origin: top center;
 59 |     transform: rotate(36deg);
 60 | }
 61 | .star:after{
 62 |     content: "";
 63 |     position: absolute;
 64 |     top: 8.65px;
 65 |     left: -15px;
 66 |     width: 0;
 67 |     height: 0;
 68 |     color: #E91E63;
 69 |     display: block;
 70 |     border-left: 12.5px solid transparent;
 71 |     border-right: 12.5px solid transparent;
 72 |     border-bottom: 9.08px solid #E91E63;
 73 |     transform-origin: top center;
 74 |     transform: rotate(-36deg);
 75 | }
 76 | .star:hover{
 77 |     transition:all 2s;
 78 |     transform:rotateY(180deg);
 79 | }
 80 | summary{
 81 |     position: absolute;
 82 |     cursor: default;
 83 |     left: 0;
 84 |     color: #999;
 85 |     font-size: 14px;
 86 |     line-height:18px;
 87 |     margin: 20px 0 0 20px;
 88 |     border-left: 2px solid #FF9800;
 89 |     padding: 0 10px;
 90 |     text-shadow: 0 0.2px hsl(0,0%,85%);
 91 |     /*background: linear-gradient(#FF9800, #FF9800) no-repeat;*/
 92 |     /*background-size: 100% 1px;*/
 93 |     /*background-position: -400px bottom;*/
 94 |     transition:.5s;
 95 | }
 96 | summary:nth-child(2){
 97 |     margin-top:60px;
 98 | }
 99 | 
100 | summary:nth-child(3){
101 |     margin-top:100px;
102 | }
103 | 
104 | summary:hover{
105 |     background-position: -0em bottom;
106 | }


--------------------------------------------------------------------------------
/cssShape/static/css/reset.css:
--------------------------------------------------------------------------------
 1 | /*CSS reset*/
 2 | html{
 3 |     overflow-x: hidden;
 4 |     overflow: auto;
 5 |     color: #333;
 6 |     font-size: 62.5%;
 7 |     font-family: Microsoft Yahei,simsun,Tahoma,Helvetica,Arial,SimHei,sans-serif;
 8 | }
 9 | 
10 | body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote{
11 |     margin: 0;
12 |     padding: 0;
13 | }
14 | 
15 | fieldset, img{
16 |     border: 0;
17 | }
18 | address, caption, cite, code, dfn, em, th, var, optgroup{
19 |     font-style: normal;
20 |     font-weight: 400;
21 | }
22 | 
23 | del, ins {
24 |     text-decoration: none
25 | }
26 | li {
27 |     list-style: none
28 | }
29 | caption, th {
30 |     text-align: left
31 | }
32 | q:before, q:after {
33 |     content: ''
34 | }
35 | abbr, acronym {
36 |     border: 0;
37 |     font-variant: normal
38 | }
39 | sup {
40 |     vertical-align: baseline
41 | }
42 | sub {
43 |     vertical-align: baseline
44 | }
45 | legend {
46 |     color: #000
47 | }
48 | input, button, textarea, select, optgroup, option {
49 |     font-family: inherit;
50 |     font-size: inherit;
51 |     font-style: inherit;
52 |     font-weight: inherit
53 | }
54 | input, button, textarea, select {
55 |     outline:none;
56 |     *font-size: 100%  /*IE8以下 hack */
57 | }
58 | textarea{resize:none}
59 | 
60 | a {
61 |     outline: 0;
62 |     text-decoration: none;
63 | }
64 | a:hover {
65 |     outline: 0;
66 |     text-decoration: none;
67 | }
68 | .clearfix, .cf {
69 |     zoom: 1
70 | }
71 | .clearfix:after, .cf:after {
72 |     content: "";
73 |     display: block;
74 |     height: 0;
75 |     clear: both;
76 |     visibility: hidden
77 | }
78 | * {
79 |     -webkit-tap-highlight-color: transparent;
80 |     -webkit-appearance: none;
81 |     outline:none;
82 | }
83 | 


--------------------------------------------------------------------------------
/cssShape/static/images/exp.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FounderIsShadowWalker/CSS-note/c49eba0a7c325a42f971e90b215819fef7ab771a/cssShape/static/images/exp.jpg


--------------------------------------------------------------------------------
/cssShape/static/images/forkme.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FounderIsShadowWalker/CSS-note/c49eba0a7c325a42f971e90b215819fef7ab771a/cssShape/static/images/forkme.png


--------------------------------------------------------------------------------
/cssShape/static/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FounderIsShadowWalker/CSS-note/c49eba0a7c325a42f971e90b215819fef7ab771a/cssShape/static/images/logo.jpg


--------------------------------------------------------------------------------
/cssShape/static/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FounderIsShadowWalker/CSS-note/c49eba0a7c325a42f971e90b215819fef7ab771a/cssShape/static/images/logo.png


--------------------------------------------------------------------------------
/frost_glass/README.md:
--------------------------------------------------------------------------------
 1 | ##制作毛玻璃效果
 2 | 制作毛玻璃的思路很简单，就是利用伪类，生成和body一样的背景，然后让他的伪类模糊掉就好。当然模糊会削减，削减的幅度就是模糊半径，所以最直接就是不设width，用-margin 撑开来，对于多出来的模糊范围直接在父标签上overflow 就好了。
 3 | 
 4 | 
 5 | ###思路就是这样,But..........
 6 | <i>出现的问题</i>
 7 | 
 8 | + 怎么生成和背景相同的背景
 9 | background 一样 带cover<b>(显示屏一般宽更长)</b>，但是这样不会无缝连上，完全是两张独立的图片。 
10 | ####background-attachment: fixed;
11 | 定义: 规定背景图像是否固定或者随着页面的其余部分滚动。
12 | 
13 | 其实w3c的定义完全没什么软用。attachment的作用是把目前的背景相对于body作为背景时位置显示的图片。
14 | 
15 | + 这个问题很有意思，是你打开网页调试工具，图片高度没有显示全，原因很简单，你background-size 用的cover，cover的优先级是宽。自然不会缩放。
16 | 最好的方法是使用vh，这个css3的新大小属性，可以把长度定位在当前视窗之中 100vh 相当于 100%。而你打开调试工具的时候，是不属于当前视窗的，就会把高度显示全。 
17 |  


--------------------------------------------------------------------------------
/frost_glass/frost_glass.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title></title>
 6 |     <style>
 7 |     body{
 8 |         min-height: 100vh;
 9 |         box-sizing: border-box;
10 |         margin: 0;
11 |         padding: calc(50vh - 6em);
12 |         font: 150%/1.6 Baskerville, Palatino, serif;
13 |     }
14 |     body {
15 |         background: url("http://csssecrets.io/images/tiger.jpg") 0 / cover fixed;
16 |     }
17 |     main::before{
18 |         background: url("http://csssecrets.io/images/tiger.jpg") 0 / cover fixed;
19 |     }
20 |     main{
21 |         position: relative;
22 |         margin: 0 auto;
23 |         padding: 1em;
24 |         max-width: 23em;
25 |         background: hsla(0,0%,100%,.25) border-box;
26 |         overflow: hidden;
27 |         border-radius: .3em;
28 |         box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
29 |         0 .5em 1em rgba(0, 0, 0, 0.6);
30 |         text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
31 |     }
32 |     main::before {
33 |         content: '';
34 |         position: absolute;
35 |         top: 0; right: 0; bottom: 0; left: 0;
36 |         z-index: -1;
37 |         margin: -30px;
38 |         -webkit-filter: blur(20px);
39 |         filter: blur(20px);
40 |     }
41 | 
42 |     blockquote { font-style: italic }
43 |     blockquote cite { font-style: normal; }
44 |     </style>
45 | </head>
46 | <body>
47 | <main>
48 |     <blockquote>“The only way to get rid of a temptation is to yield to it.
49 |         Resist it, and your soul grows sick with longing for the things it has forbidden to itself, with desire for what its monstrous laws have made monstrous and unlawful.”</em>
50 |         <footer>— <cite>Oscar Wilde, The Picture of Dorian Gray</cite></footer>
51 |     </blockquote>
52 | </main>
53 | </body>
54 | </html>


--------------------------------------------------------------------------------
/heart/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Heart</title>
 6 |     <style>
 7 |         html, body{
 8 |             margin: 0;
 9 |             padding: 0;
10 |             width: 100%;
11 |             height: 100%;
12 |         }
13 | 
14 |         .heart{
15 |              position: relative;
16 |              width: 100%;
17 |              height: 100%;
18 |              display: flex;
19 |              justify-content: center;
20 |              align-items: center;
21 |              animation: heart 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
22 |         }
23 | 
24 |         .square{
25 |             position: absolute;
26 |             width: 80px;
27 |             height: 80px;
28 |             background: red;
29 |             transform: rotate(45deg);
30 |             animation: square 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
31 |         }
32 |         .heartL{
33 |             position: absolute;
34 |             width: 80px;
35 |             height: 80px;
36 |             background: red;
37 |             transform: rotate(45deg) translate(0px, -40px);
38 |             border-radius: 100%;
39 |             animation: focus 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite;
40 |         }
41 |         .heartR{
42 |             position: absolute;
43 |             width: 80px;
44 |             height: 80px;
45 |             background: red;
46 |             transform: rotate(45deg) translate(-40px, 0px);
47 |             border-radius: 100%;
48 |             animation: focus 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite;
49 |         }
50 |         
51 |         @keyframes focus {
52 |             50%{
53 |                 transform: scale(0.4);
54 |             }
55 |         }
56 | 
57 |         @keyframes square {
58 |             50%{
59 |                 transform: scale(0.5);
60 |                 border-radius: 100%;
61 |             }
62 |         }
63 | 
64 |         @keyframes heart {
65 |             50%{
66 |                 transform: rotate(360deg);
67 |             }
68 |         }
69 |     </style>
70 | </head>
71 | <body>
72 |     <div class="heart">
73 |         <div class="heartL"></div>
74 |         <div class="heartR"></div>
75 |         <div class="square"></div>
76 |     </div>
77 | </body>
78 | </html>


--------------------------------------------------------------------------------
/hexagon-grid-w-hover/README.txt:
--------------------------------------------------------------------------------
1 | A Pen created at CodePen.io. You can find this one at https://codepen.io/johnheiner/pen/EKpQeP.
2 | 
3 |  CSS Hexagon grid with animation flip on hover


--------------------------------------------------------------------------------
/hexagon-grid-w-hover/css/style.css:
--------------------------------------------------------------------------------
  1 | .hex-container {
  2 |   position: relative;
  3 |   margin-top: 55px;
  4 |   margin-bottom: 55px;
  5 | }
  6 | 
  7 | .hex-grid {
  8 |   text-align: center;
  9 |   font-size: 0px;
 10 |   word-spacing: 0;
 11 | }
 12 | .hex-grid a.-hex,
 13 | .hex-grid div.-hex {
 14 |   display: inline-block;
 15 |   vertical-align: middle;
 16 |   position: relative;
 17 |   z-index: 10;
 18 |   -webkit-perspective: 800px;
 19 |           perspective: 800px;
 20 |   width: 190px;
 21 |   margin: 27px 0 27px 0;
 22 | }
 23 | .hex-grid a.-hex.-gutter,
 24 | .hex-grid div.-hex.-gutter {
 25 |   margin: 33px 6px 33px;
 26 | }
 27 | .hex-grid a.-hex .-hex-wrap,
 28 | .hex-grid div.-hex .-hex-wrap {
 29 |   height: 110px;
 30 | }
 31 | .hex-grid a.-hex .-card,
 32 | .hex-grid div.-hex .-card {
 33 |   background-size: auto 220px;
 34 |   height: 110px;
 35 |   width: 190px;
 36 | }
 37 | .hex-grid a.-hex .-clip:before,
 38 | .hex-grid div.-hex .-clip:before {
 39 |   height: 220px;
 40 |   width: 220px;
 41 | }
 42 | .hex-grid a.-hex .-clip.-left:before,
 43 | .hex-grid div.-hex .-clip.-left:before {
 44 |   -webkit-transform: rotate(-60deg) translate(-110px, 0);
 45 |           transform: rotate(-60deg) translate(-110px, 0);
 46 | }
 47 | .hex-grid a.-hex .-clip.-right:before,
 48 | .hex-grid div.-hex .-clip.-right:before {
 49 |   -webkit-transform: rotate(60deg) translate(40px,40px);
 50 |           transform: rotate(60deg) translate(40px,40px);
 51 | }
 52 | @media (min-width: 900px) {
 53 |   .hex-grid a.-hex,
 54 |   .hex-grid div.-hex {
 55 |     width: 260px;
 56 |     margin: 37px 0 38px 0;
 57 |   }
 58 |   .hex-grid a.-hex.-gutter,
 59 |   .hex-grid div.-hex.-gutter {
 60 |     margin: 47px 10px 47px;
 61 |   }
 62 |   .hex-grid a.-hex .-hex-wrap,
 63 |   .hex-grid div.-hex .-hex-wrap {
 64 |     height: 150px;
 65 |   }
 66 |   .hex-grid a.-hex .-card,
 67 |   .hex-grid div.-hex .-card {
 68 |     background-size: auto 300px;
 69 |     height: 150px;
 70 |     width: 260px;
 71 |   }
 72 |   .hex-grid a.-hex .-clip:before,
 73 |   .hex-grid div.-hex .-clip:before {
 74 |     height: 300px;
 75 |     width: 300px;
 76 |   }
 77 |   .hex-grid a.-hex .-clip.-left:before,
 78 |   .hex-grid div.-hex .-clip.-left:before {
 79 |     -webkit-transform: rotate(-60deg) translate(-150px, 0);
 80 |             transform: rotate(-60deg) translate(-150px, 0);
 81 |   }
 82 |   .hex-grid a.-hex .-clip.-right:before,
 83 |   .hex-grid div.-hex .-clip.-right:before {
 84 |     -webkit-transform: rotate(60deg) translate(55px,55px);
 85 |             transform: rotate(60deg) translate(55px,55px);
 86 |   }
 87 | }
 88 | @media (min-width: 1080px) {
 89 |   .hex-grid a.-hex,
 90 |   .hex-grid div.-hex {
 91 |     width: 330px;
 92 |     margin: 48px 0 48px 0;
 93 |   }
 94 |   .hex-grid a.-hex.-gutter,
 95 |   .hex-grid div.-hex.-gutter {
 96 |     margin: 57px 10px 57px;
 97 |   }
 98 |   .hex-grid a.-hex .-hex-wrap,
 99 |   .hex-grid div.-hex .-hex-wrap {
100 |     height: 190px;
101 |   }
102 |   .hex-grid a.-hex .-card,
103 |   .hex-grid div.-hex .-card {
104 |     background-size: auto 380px;
105 |     height: 190px;
106 |     width: 330px;
107 |   }
108 |   .hex-grid a.-hex .-clip:before,
109 |   .hex-grid div.-hex .-clip:before {
110 |     height: 380px;
111 |     width: 380px;
112 |   }
113 |   .hex-grid a.-hex .-clip.-left:before,
114 |   .hex-grid div.-hex .-clip.-left:before {
115 |     -webkit-transform: rotate(-60deg) translate(-190px, 0);
116 |             transform: rotate(-60deg) translate(-190px, 0);
117 |   }
118 |   .hex-grid a.-hex .-clip.-right:before,
119 |   .hex-grid div.-hex .-clip.-right:before {
120 |     -webkit-transform: rotate(60deg) translate(70px,69px);
121 |             transform: rotate(60deg) translate(70px,69px);
122 |   }
123 | }
124 | .hex-grid a.-hex .-hex-wrap,
125 | .hex-grid div.-hex .-hex-wrap {
126 |   position: relative;
127 |   width: 100%;
128 |   -webkit-transition: all 400ms ease-out;
129 |   transition: all 400ms ease-out;
130 |   -webkit-transform-style: preserve-3d;
131 |           transform-style: preserve-3d;
132 | }
133 | .hex-grid a.-hex .-card,
134 | .hex-grid div.-hex .-card {
135 |   -webkit-transition: none 1s;
136 |   transition: none 1s;
137 |   background-repeat: no-repeat;
138 |   background-position: 50% 50%;
139 |   text-align: center;
140 |   display: block;
141 |   position: absolute;
142 |   top: 0;
143 |   text-align: center;
144 |   -webkit-backface-visibility: hidden;
145 |           backface-visibility: hidden;
146 | }
147 | .hex-grid a.-hex .-card.-front,
148 | .hex-grid div.-hex .-card.-front {
149 |   z-index: 10;
150 | }
151 | .hex-grid a.-hex .-card.-back,
152 | .hex-grid div.-hex .-card.-back {
153 |   background-image: url(https://33.media.tumblr.com/95c5f652c652f154cf5578482012474a/tumblr_nj5wbzJQ5A1tcuj64o1_400.gif);
154 |   -webkit-transform: rotateY(-180deg);
155 |           transform: rotateY(-180deg);
156 |   z-index: 9;
157 | }
158 | .hex-grid a.-hex .-inner,
159 | .hex-grid div.-hex .-inner {
160 |   width: 100%;
161 |   padding: 0 1rem;
162 |   margin: 0 auto;
163 |   position: absolute;
164 |   bottom: 0;
165 |   z-index: 5;
166 | }
167 | .hex-grid a.-hex .-inner h3,
168 | .hex-grid a.-hex .-inner p,
169 | .hex-grid div.-hex .-inner h3,
170 | .hex-grid div.-hex .-inner p {
171 |   display: block;
172 |   color: #fff;
173 | }
174 | .hex-grid a.-hex .-inner p,
175 | .hex-grid div.-hex .-inner p {
176 |   margin: 0;
177 |   font-weight: 300;
178 | }
179 | .hex-grid a.-hex .-clip,
180 | .hex-grid div.-hex .-clip {
181 |   position: absolute;
182 |   height: 100%;
183 |   width: 100%;
184 |   top: 0;
185 |   left: 0;
186 |   overflow: hidden;
187 |   background: inherit;
188 |   -webkit-backface-visibility: hidden;
189 |           backface-visibility: hidden;
190 | }
191 | .hex-grid a.-hex .-clip:before,
192 | .hex-grid div.-hex .-clip:before {
193 |   content: '';
194 |   position: absolute;
195 |   left: 0;
196 |   background: inherit;
197 | }
198 | .hex-grid a.-hex .-clip.-left,
199 | .hex-grid div.-hex .-clip.-left {
200 |   z-index: -1;
201 |   -webkit-transform: rotate(60deg);
202 |           transform: rotate(60deg);
203 | }
204 | .hex-grid a.-hex .-clip.-left:before,
205 | .hex-grid div.-hex .-clip.-left:before {
206 |   -webkit-transform-origin: 0 0;
207 |           transform-origin: 0 0;
208 | }
209 | .hex-grid a.-hex .-clip.-right,
210 | .hex-grid div.-hex .-clip.-right {
211 |   z-index: -2;
212 |   -webkit-transform: rotate(-60deg);
213 |           transform: rotate(-60deg);
214 | }
215 | .hex-grid a.-hex .-clip.-right:before,
216 | .hex-grid div.-hex .-clip.-right:before {
217 |   bottom: 0;
218 |   -webkit-transform-origin: 50% 50%;
219 |           transform-origin: 50% 50%;
220 | }
221 | .hex-grid a.-hex:hover .-hex-wrap {
222 |   -webkit-transform: rotateY(180deg);
223 |           transform: rotateY(180deg);
224 | }
225 | 


--------------------------------------------------------------------------------
/hexagon-grid-w-hover/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" >
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title>Hexagon Grid w/ Hover</title>
  6 |   
  7 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  8 | 
  9 |   
 10 |       <link rel="stylesheet" href="css/style.css">
 11 | 
 12 |   
 13 | </head>
 14 | 
 15 | <body>
 16 |   <div class="hex-container">
 17 | 	<div class="hex-grid">
 18 | 		
 19 | 		<a href="#" class="-hex">
 20 | 			<div class="-hex-wrap">
 21 | 				<div class="-card -front" style="background-image: url(https://www.teamcolab.com/static/img/headshot/eddie.jpg);">
 22 | 					<div class="-inner">
 23 | 						<h3>Title</h3>
 24 | 						<p>description</p>
 25 | 					</div>
 26 | 					<div class="-clip -left"></div>
 27 | 					<div class="-clip -right"></div>
 28 | 				</div>
 29 | 				<div class="-card -back" style="background-image: url(http://media2.giphy.com/media/11i7RuOORxP7iM/giphy.gif);">
 30 | 					<div class="-inner">
 31 | 						<h3>Title</h3>
 32 | 						<p>description</p>
 33 | 					</div>
 34 | 					<div class="-clip -left"></div>
 35 | 					<div class="-clip -right"></div>
 36 | 				</div>
 37 | 			</div>
 38 | 		</a>
 39 | 		
 40 | 		<a href="#" class="-hex">
 41 | 			<div class="-hex-wrap">
 42 | 				<div class="-card -front" style="background-image: url(https://www.teamcolab.com/static/img/headshot/ralph.jpg);">
 43 | 					<div class="-inner">
 44 | 						<h3>Title</h3>
 45 | 						<p>description</p>
 46 | 					</div>
 47 | 					<div class="-clip -left"></div>
 48 | 					<div class="-clip -right"></div>
 49 | 				</div>
 50 | 				<div class="-card -back" style="background-image: url(http://media3.giphy.com/media/3KWHzadf2Iq64/giphy.gif);">
 51 | 					<div class="-inner">
 52 | 						<h3>Title</h3>
 53 | 						<p>description</p>
 54 | 					</div>
 55 | 					<div class="-clip -left"></div>
 56 | 					<div class="-clip -right"></div>
 57 | 				</div>
 58 | 			</div>
 59 | 		</a>
 60 | 		
 61 | 		<a href="#" class="-hex">
 62 | 			<div class="-hex-wrap">
 63 | 				<div class="-card -front" style="background-image: url(https://www.teamcolab.com/static/img/headshot/paul.jpg);">
 64 | 					<div class="-inner">
 65 | 						<h3>Title</h3>
 66 | 						<p>description</p>
 67 | 					</div>
 68 | 					<div class="-clip -left"></div>
 69 | 					<div class="-clip -right"></div>
 70 | 				</div>
 71 | 				<div class="-card -back" style="background-image: url(http://media3.giphy.com/media/PG7Xa4B58XhqE/giphy.gif);">
 72 | 					<div class="-inner">
 73 | 						<h3>Title</h3>
 74 | 						<p>description</p>
 75 | 					</div>
 76 | 					<div class="-clip -left"></div>
 77 | 					<div class="-clip -right"></div>
 78 | 				</div>
 79 | 			</div>
 80 | 		</a>
 81 | 	</div>
 82 | 	<div class="hex-grid">
 83 | 		<a href="#" class="-hex">
 84 | 			<div class="-hex-wrap">
 85 | 				<div class="-card -front" style="background-image: url(https://www.teamcolab.com/static/img/headshot/mike.jpg);">
 86 | 					<div class="-inner">
 87 | 						<h3>Title</h3>
 88 | 						<p>description</p>
 89 | 					</div>
 90 | 					<div class="-clip -left"></div>
 91 | 					<div class="-clip -right"></div>
 92 | 				</div>
 93 | 				<div class="-card -back" style="background-image: url(http://media0.giphy.com/media/PC3PhzppXcK5y/giphy.gif);">
 94 | 					<div class="-inner">
 95 | 						<h3>Title</h3>
 96 | 						<p>description</p>
 97 | 					</div>
 98 | 					<div class="-clip -left"></div>
 99 | 					<div class="-clip -right"></div>
100 | 				</div>
101 | 			</div>
102 | 		</a>
103 | 		
104 | 		<a href="#" class="-hex">
105 | 			<div class="-hex-wrap">
106 | 				<div class="-card -front" style="background-image: url(https://www.teamcolab.com/static/img/headshot/brandi.jpg);">
107 | 					<div class="-inner">
108 | 						<h3>Title</h3>
109 | 						<p>description</p>
110 | 					</div>
111 | 					<div class="-clip -left"></div>
112 | 					<div class="-clip -right"></div>
113 | 				</div>
114 | 				<div class="-card -back" style="background-image: url(http://media0.giphy.com/media/j9bRkg7HJiDMA/giphy.gif);">
115 | 					<div class="-inner">
116 | 						<h3>Title</h3>
117 | 						<p>description</p>
118 | 					</div>
119 | 					<div class="-clip -left"></div>
120 | 					<div class="-clip -right"></div>
121 | 				</div>
122 | 			</div>
123 | 		</a>
124 | 	</div>
125 | 	<div class="hex-grid">
126 | 		<a href="#" class="-hex">
127 | 			<div class="-hex-wrap">
128 | 				<div class="-card -front" style="background-image: url(https://www.teamcolab.com/static/img/headshot/caitlyn.jpg);">
129 | 					<div class="-inner">
130 | 						<h3>Title</h3>
131 | 						<p>description</p>
132 | 					</div>
133 | 					<div class="-clip -left"></div>
134 | 					<div class="-clip -right"></div>
135 | 				</div>
136 | 				<div class="-card -back" style="background-image: url(http://media2.giphy.com/media/AXJxMvKjJsKMo/giphy.gif);">
137 | 					<div class="-inner">
138 | 						<h3>Title</h3>
139 | 						<p>description</p>
140 | 					</div>
141 | 					<div class="-clip -left"></div>
142 | 					<div class="-clip -right"></div>
143 | 				</div>
144 | 			</div>
145 | 		</a>
146 | 		
147 | 		<a href="#" class="-hex">
148 | 			<div class="-hex-wrap">
149 | 				<div class="-card -front" style="background-image: url(https://www.teamcolab.com/static/img/headshot/chris.jpg);">
150 | 					<div class="-inner">
151 | 						<h3>Title</h3>
152 | 						<p>description</p>
153 | 					</div>
154 | 					<div class="-clip -left"></div>
155 | 					<div class="-clip -right"></div>
156 | 				</div>
157 | 				<div class="-card -back" style="background-image: url(http://media.giphy.com/media/Y1LlFX97M150k/giphy-tumblr.gif);">
158 | 					<div class="-inner">
159 | 						<h3>Title</h3>
160 | 						<p>description</p>
161 | 					</div>
162 | 					<div class="-clip -left"></div>
163 | 					<div class="-clip -right"></div>
164 | 				</div>
165 | 			</div>
166 | 		</a>
167 | 		
168 | 		<a href="#" class="-hex">
169 | 			<div class="-hex-wrap">
170 | 				<div class="-card -front" style="background-image: url(https://www.teamcolab.com/static/img/headshot/dylan.jpg);">
171 | 					<div class="-inner">
172 | 						<h3>Title</h3>
173 | 						<p>description</p>
174 | 					</div>
175 | 					<div class="-clip -left"></div>
176 | 					<div class="-clip -right"></div>
177 | 				</div>
178 | 				<div class="-card -back" style="background-image: url(http://media4.giphy.com/media/ziauh5HAPzVhC/giphy.gif);">
179 | 					<div class="-inner">
180 | 						<h3>Title</h3>
181 | 						<p>description</p>
182 | 					</div>
183 | 					<div class="-clip -left"></div>
184 | 					<div class="-clip -right"></div>
185 | 				</div>
186 | 			</div>
187 | 		</a>
188 | 	</div>
189 | 	<div class="hex-grid">
190 | 		<a href="#" class="-hex">
191 | 			<div class="-hex-wrap">
192 | 				<div class="-card -front" style="background-image: url(https://www.teamcolab.com/static/img/headshot/francis.jpg);">
193 | 					<div class="-inner">
194 | 						<h3>Title</h3>
195 | 						<p>description</p>
196 | 					</div>
197 | 					<div class="-clip -left"></div>
198 | 					<div class="-clip -right"></div>
199 | 				</div>
200 | 				<div class="-card -back" style="background-image: url(http://media2.giphy.com/media/QupZ48l99NAKA/giphy.gif);">
201 | 					<div class="-inner">
202 | 						<h3>Title</h3>
203 | 						<p>description</p>
204 | 					</div>
205 | 					<div class="-clip -left"></div>
206 | 					<div class="-clip -right"></div>
207 | 				</div>
208 | 			</div>
209 | 		</a>
210 | 		
211 | 		<a href="#" class="-hex">
212 | 			<div class="-hex-wrap">
213 | 				<div class="-card -front" style="background-image: url(https://www.teamcolab.com/static/img/headshot/gavin.jpg);">
214 | 					<div class="-inner">
215 | 						<h3>Title</h3>
216 | 						<p>description</p>
217 | 					</div>
218 | 					<div class="-clip -left"></div>
219 | 					<div class="-clip -right"></div>
220 | 				</div>
221 | 				<div class="-card -back" style="background-image: url(http://media2.giphy.com/media/X50rBGldq5YB2/giphy.gif);">
222 | 					<div class="-inner">
223 | 						<h3>Title</h3>
224 | 						<p>description</p>
225 | 					</div>
226 | 					<div class="-clip -left"></div>
227 | 					<div class="-clip -right"></div>
228 | 				</div>
229 | 			</div>
230 | 		</a>
231 | 	</div>
232 | 	<div class="hex-grid">
233 | 		<a href="#" class="-hex">
234 | 			<div class="-hex-wrap">
235 | 				<div class="-card -front" style="background-image: url(https://www.teamcolab.com/static/img/headshot/jereme.jpg);">
236 | 					<div class="-inner">
237 | 						<h3>Title</h3>
238 | 						<p>description</p>
239 | 					</div>
240 | 					<div class="-clip -left"></div>
241 | 					<div class="-clip -right"></div>
242 | 				</div>
243 | 				<div class="-card -back" style="background-image: url(http://media0.giphy.com/media/qJrFbfOeLuRNe/giphy.gif);">
244 | 					<div class="-inner">
245 | 						<h3>Title</h3>
246 | 						<p>description</p>
247 | 					</div>
248 | 					<div class="-clip -left"></div>
249 | 					<div class="-clip -right"></div>
250 | 				</div>
251 | 			</div>
252 | 		</a>
253 | 		
254 | 		<a href="#" class="-hex">
255 | 			<div class="-hex-wrap">
256 | 				<div class="-card -front" style="background-image: url(https://www.teamcolab.com/static/img/headshot/john.jpg);">
257 | 					<div class="-inner">
258 | 						<h3>Title</h3>
259 | 						<p>description</p>
260 | 					</div>
261 | 					<div class="-clip -left"></div>
262 | 					<div class="-clip -right"></div>
263 | 				</div>
264 | 				<div class="-card -back" style="background-image: url(http://media4.giphy.com/media/NDw25ETINa1ck/giphy.gif);">
265 | 					<div class="-inner">
266 | 						<h3>Title</h3>
267 | 						<p>description</p>
268 | 					</div>
269 | 					<div class="-clip -left"></div>
270 | 					<div class="-clip -right"></div>
271 | 				</div>
272 | 			</div>
273 | 		</a>
274 | 		
275 | 		<a href="#" class="-hex">
276 | 			<div class="-hex-wrap">
277 | 				<div class="-card -front" style="background-image: url(https://www.teamcolab.com/static/img/headshot/jordan-m.jpg);">
278 | 					<div class="-inner">
279 | 						<h3>Title</h3>
280 | 						<p>description</p>
281 | 					</div>
282 | 					<div class="-clip -left"></div>
283 | 					<div class="-clip -right"></div>
284 | 				</div>
285 | 				<div class="-card -back" style="background-image: url(http://media.giphy.com/media/zAYZOtH5OMhuU/giphy-tumblr.gif);">
286 | 					<div class="-inner">
287 | 						<h3>Title</h3>
288 | 						<p>description</p>
289 | 					</div>
290 | 					<div class="-clip -left"></div>
291 | 					<div class="-clip -right"></div>
292 | 				</div>
293 | 			</div>
294 | 		</a>
295 | 	</div>
296 | 	<div class="hex-grid">
297 | 		<a href="#" class="-hex">
298 | 			<div class="-hex-wrap">
299 | 				<div class="-card -front" style="background-image: url(https://www.teamcolab.com/static/img/headshot/jordan.jpg);">
300 | 					<div class="-inner">
301 | 						<h3>Title</h3>
302 | 						<p>description</p>
303 | 					</div>
304 | 					<div class="-clip -left"></div>
305 | 					<div class="-clip -right"></div>
306 | 				</div>
307 | 				<div class="-card -back" style="background-image: url(http://media0.giphy.com/media/1237EvS8dYtWIU/giphy.gif);">
308 | 					<div class="-inner">
309 | 						<h3>Title</h3>
310 | 						<p>description</p>
311 | 					</div>
312 | 					<div class="-clip -left"></div>
313 | 					<div class="-clip -right"></div>
314 | 				</div>
315 | 			</div>
316 | 		</a>
317 | 		<a href="#" class="-hex">
318 | 			<div class="-hex-wrap">
319 | 				<div class="-card -front" style="background-image: url(https://www.teamcolab.com/static/img/headshot/josh.jpg);">
320 | 					<div class="-inner">
321 | 						<h3>Title</h3>
322 | 						<p>description</p>
323 | 					</div>
324 | 					<div class="-clip -left"></div>
325 | 					<div class="-clip -right"></div>
326 | 				</div>
327 | 				<div class="-card -back" style="background-image: url(http://media0.giphy.com/media/Y8hzdgPnZ6Hwk/giphy.gif);">
328 | 					<div class="-inner">
329 | 						<h3>Title</h3>
330 | 						<p>description</p>
331 | 					</div>
332 | 					<div class="-clip -left"></div>
333 | 					<div class="-clip -right"></div>
334 | 				</div>
335 | 			</div>
336 | 		</a>
337 | 		
338 | 	</div>
339 | </div>
340 |   
341 |   
342 | </body>
343 | </html>
344 | 


--------------------------------------------------------------------------------
/hexagon-grid-w-hover/license.txt:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | <!--
 4 | Copyright (c) 2017 by John Heiner (https://codepen.io/johnheiner/pen/EKpQeP)
 5 | 
 6 | 
 7 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 8 | 
 9 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
10 | 
11 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
12 | -->
13 | 


--------------------------------------------------------------------------------
/hexagon-grid-w-hover/scss/style.scss:
--------------------------------------------------------------------------------
  1 | $white: #fff;
  2 | @mixin mq($width: 0) {
  3 | 	@media ( min-width: + $width ) {
  4 | 		@content;
  5 | 	}
  6 | }
  7 | 
  8 | @mixin hex-size($height, $grid_width, $margin, $gutter, $translate) {
  9 | 	width: $grid_width;
 10 | 	margin: #{$margin};
 11 | 
 12 | 	&.-gutter{
 13 | 		margin: #{$gutter};
 14 | 	}
 15 | 
 16 | 	.-hex-wrap{
 17 | 		height: $height/2;
 18 | 	}
 19 | 	.-card{
 20 | 		background-size: auto $height;
 21 | 		height: $height/2;
 22 | 		width: $grid_width;
 23 | 	}
 24 | 	.-clip{
 25 | 		&:before{
 26 | 			height: $height;
 27 | 			width: $height;
 28 | 		}
 29 | 		&.-left{
 30 | 			&:before{
 31 | 				transform: rotate(-60deg) translate(-$height/2,0);
 32 | 			}
 33 | 		}
 34 | 		&.-right{
 35 | 			&:before{
 36 | 				transform: rotate(60deg) translate(#{$translate});
 37 | 			}
 38 | 		}
 39 | 	}
 40 | }
 41 | 
 42 | @mixin hex-small() {
 43 | 	$height: 300px;
 44 | 	$width: $height;
 45 | 	$grid_width: 260px;
 46 | 
 47 | 	@include hex-size(220px, 190px, '27px 0 27px 0', '33px 6px 33px', '40px,40px');
 48 | }
 49 | @mixin hex-medium() {
 50 | 	$height: 300px;
 51 | 	$width: $height;
 52 | 	$grid_width: 260px;
 53 | 
 54 | 	@include hex-size(300px, 260px, '37px 0 38px 0', '47px 10px 47px', '55px,55px');
 55 | }
 56 | @mixin hex-large() {
 57 | 	$height: 380px;
 58 | 	$width: $height;
 59 | 	$grid_width: 330px;
 60 | 
 61 | 	@include hex-size(380px, 330px, '48px 0 48px 0', '57px 10px 57px', '70px,69px');
 62 | }
 63 | 
 64 | .hex-container{
 65 | 	position: relative;
 66 | 	margin-top: 55px;
 67 | 	margin-bottom: 55px;
 68 | }
 69 | .hex-grid{
 70 | 	text-align: center;
 71 | 	// margin-top: 55px;
 72 | 	// margin-bottom: 55px;
 73 | 	font-size: 0px;
 74 | 	word-spacing: 0;
 75 | 
 76 | 	a.-hex,
 77 | 	div.-hex{
 78 | 		// width: $grid_width;
 79 | 		// margin: 37px 0 38px 0;
 80 | 		display: inline-block;
 81 | 		vertical-align: middle;
 82 | 		position: relative;
 83 | 		z-index: 10;
 84 | 		perspective: 800px;
 85 | 
 86 | 		@include hex-small();
 87 | 
 88 | 		@include mq(900px) {
 89 | 			@include hex-medium();
 90 | 		}
 91 | 		@include mq(1080px) {
 92 | 			@include hex-large();
 93 | 		}
 94 | 		
 95 | 
 96 | 		// &.-gutter{
 97 | 		// 	margin: 57px 10px 57px;
 98 | 		// }
 99 | 
100 | 		.-hex-wrap{
101 | 			position: relative;
102 | 			// height: $height/2;
103 | 			width: 100%;
104 | 			transition: all 400ms ease-out;
105 | 			transform-style: preserve-3d;
106 | 		}
107 | 		.-card{
108 | 			// background-size: auto $height;
109 | 			// height: $height/2;
110 | 			transition: none 1s;
111 | 			// background-color: purple;
112 | 			background-repeat: no-repeat;
113 | 			background-position: 50% 50%;
114 | 			text-align: center;
115 | 			display: block;
116 | 			// width: $grid_width;
117 | 			position: absolute;
118 | 			top: 0;
119 | 			text-align: center;
120 | 			backface-visibility: hidden;
121 | 
122 | 			&.-front{
123 | 				// background-image: url(../img/test-bio.jpg);
124 | 				z-index: 10;
125 | 			}
126 | 			&.-back{
127 | 				background-image: url(https://33.media.tumblr.com/95c5f652c652f154cf5578482012474a/tumblr_nj5wbzJQ5A1tcuj64o1_400.gif);
128 | 				transform: rotateY(-180deg);
129 | 				z-index: 9;
130 | 			}
131 | 		}
132 | 		.-inner{
133 | 			width: 100%;
134 | 			padding: 0 1rem;
135 | 			margin: 0 auto;
136 | 			position: absolute;
137 | 			bottom: 0;
138 | 			z-index: 5;
139 | 			h3,
140 | 			p{
141 | 				display: block;
142 | 				color: $white;
143 | 			}
144 | 			p{
145 | 				margin: 0;
146 | 				font-weight: 300;
147 | 			}
148 | 		}
149 | 		.-clip{
150 | 			position: absolute;
151 | 			height: 100%;
152 | 			width: 100%;
153 | 			top: 0;
154 | 			left: 0;
155 | 			overflow: hidden;
156 | 			background: inherit;
157 | 			backface-visibility: hidden;
158 | 
159 | 			&:before{
160 | 				// height: $height;
161 | 				// width: $width;
162 | 				content: '';
163 | 				position: absolute;
164 | 				left: 0;
165 | 				background: inherit;
166 | 			}
167 | 
168 | 			&.-left{
169 | 				z-index: -1;
170 | 				transform: rotate(60deg);
171 | 
172 | 				&:before{
173 | 					// @include transform(rotate(-60deg) translate(-$height/2,0));
174 | 					transform-origin: 0 0;
175 | 				}
176 | 			}
177 | 			&.-right{
178 | 				z-index: -2;
179 | 				transform: rotate(-60deg);
180 | 
181 | 				&:before{
182 | 					bottom: 0;
183 | 					// @include transform(rotate(60deg) translate(70px,69px));
184 | 					transform-origin: 50% 50%;
185 | 				}
186 | 			}
187 | 		}
188 | 	}
189 | 
190 | 	a.-hex{
191 | 		&:hover{
192 | 			.-hex-wrap{
193 | 				transform: rotateY(180deg);
194 | 			}
195 | 		}
196 | 	}
197 | }
198 | 
199 | 


--------------------------------------------------------------------------------
/hiddenface/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Title</title>
 6 |     <link rel="stylesheet" href="rain.css">
 7 |     <style>
 8 |         body{
 9 |             position: relative;
10 |             margin: 0;
11 |             padding: 0;
12 |             display: flex;
13 |             justify-content: center;
14 |             align-items: center;
15 |             width: 100vw;
16 |             height: 100vh;
17 |             z-index: 1;
18 |         }
19 |         .rain{
20 |             position: absolute;
21 |             left: 0;
22 |             right: 0;
23 |             z-index: 2;
24 |             background: linear-gradient(to bottom, rgba(0, 0, 0 ,0.2w5) ,  rgba(0, 0, 0 ,0.7));
25 |             width: 100%;
26 |             height: 100%
27 |         }
28 |     </style>
29 | </head>
30 | <body>
31 | <canvas id="can"></canvas>
32 | <div class="rain">
33 |     <div class="drop"></div>
34 |     <div class="drop"></div>
35 |     <div class="drop"></div>
36 |     <div class="drop"></div>
37 |     <div class="drop"></div>
38 |     <div class="drop"></div>
39 |     <div class="drop"></div>
40 |     <div class="drop"></div>
41 |     <div class="drop"></div>
42 |     <div class="drop"></div>
43 |     <div class="drop"></div>
44 |     <div class="drop"></div>
45 |     <div class="drop"></div>
46 |     <div class="drop"></div>
47 |     <div class="drop"></div>
48 |     <div class="drop"></div>
49 |     <div class="drop"></div>
50 |     <div class="drop"></div>
51 |     <div class="drop"></div>
52 |     <div class="drop"></div>
53 | </div>
54 | <script src="index.js"></script>
55 | </body>
56 | </html>


--------------------------------------------------------------------------------
/hiddenface/index.js:
--------------------------------------------------------------------------------
  1 | var canvas = document.querySelector('canvas'),
  2 |     ctx = canvas.getContext('2d');
  3 | 
  4 |     canvas.width = document.documentElement.clientWidth;
  5 |     canvas.height = document.documentElement.clientHeight;
  6 | 
  7 |       ctx.translate(0, -85);
  8 | 
  9 |       //画无脸男
 10 |       ctx.beginPath();
 11 |       ctx.save();
 12 |       ctx.arc(360, 430, 82, Math.PI + Math.PI / 10, 2 * Math.PI - Math.PI / 10, false);
 13 |       ctx.stroke();
 14 | 
 15 |       ctx.quadraticCurveTo(360 + 82 * Math.cos(Math.PI / 10) + 20, 430 - 82 * Math.sin(Math.PI / 10) + 100,
 16 |           360 + 82 * Math.cos(Math.PI / 10) + 32, 430 - 82 * Math.sin(Math.PI / 10) + 300
 17 |       );
 18 | 
 19 |       ctx.lineTo(360 - 82 * Math.cos(Math.PI / 10) - 32, 430 - 82 * Math.sin(Math.PI / 10) + 300);
 20 | 
 21 |       ctx.quadraticCurveTo(360 - 82 * Math.cos(Math.PI / 10) - 20, 430 - 82 * Math.sin(Math.PI / 10) + 100,
 22 |           360 - 82 * Math.cos(Math.PI / 10), 430 - 82 * Math.sin(Math.PI / 10)
 23 |       );
 24 | 
 25 |       ctx.fill();
 26 |       ctx.stroke();
 27 | 
 28 |       ctx.beginPath();
 29 |       ctx.save();
 30 |       ctx.scale(2.5, 0.8);
 31 |       ctx.arc((360 + 82 * Math.cos(Math.PI / 10) + 32 + 360 - 82 * Math.cos(Math.PI / 10) - 32) / 2 / 2.5,
 32 |           (430 - 82 * Math.sin(Math.PI / 10) + 300) / 0.8, 44, 0, 2 * Math.PI);
 33 |       ctx.fill();
 34 |       ctx.stroke();
 35 |       ctx.restore();
 36 | 
 37 |       //画面具
 38 |       ctx.beginPath();
 39 |       ctx.save();
 40 |       ctx.scale(1.5, 1);
 41 |       ctx.arc(360 / 1.5, 420, 40, Math.PI, 2 * Math.PI, false);
 42 |       ctx.quadraticCurveTo(360 / 1.5 + 43, 450, 360 / 1.5 + 39, 480);
 43 |       ctx.quadraticCurveTo(360 / 1.5 + 35, 500, 360 / 1.5 + 20, 520);
 44 |       ctx.quadraticCurveTo(360 / 1.5 + 7, 525, 360 / 1.5, 526);
 45 |       ctx.quadraticCurveTo(360 / 1.5 - 7, 526, 360 / 1.5 - 20, 520);
 46 |       ctx.quadraticCurveTo(360 / 1.5 - 35, 500, 360 / 1.5 - 39, 480);
 47 |       ctx.quadraticCurveTo(360 / 1.5 - 43, 450, 360 / 1.5 - 40, 420);
 48 |       ctx.fillStyle = 'white';
 49 |       ctx.fill();
 50 |       ctx.stroke();
 51 |       ctx.restore();
 52 | 
 53 |       //画眼睛
 54 |       ctx.beginPath();
 55 |       ctx.arc(360 - 30, 445, 13, 0, 2 * Math.PI);
 56 |       ctx.arc(360 + 30, 445, 13, 0, 2 * Math.PI);
 57 |       ctx.fillStyle = 'black';
 58 |       ctx.fill();
 59 | 
 60 |       //画眼纹
 61 |       ctx.beginPath();
 62 |       ctx.save();
 63 |       ctx.scale(1, 4);
 64 |       ctx.arc((360 - 30) / 1, (445 - 17) / 4, 6, Math.PI, 2 * Math.PI);
 65 |       ctx.fillStyle = 'red';
 66 |       ctx.fill();
 67 |       ctx.restore();
 68 | 
 69 |       ctx.beginPath();
 70 |       ctx.save();
 71 |       ctx.scale(1, 4);
 72 |       ctx.arc((360 - 30) / 1, (445 + 17) / 4, 6, 0, Math.PI);
 73 |       ctx.fillStyle = 'red';
 74 |       ctx.fill();
 75 |       ctx.restore();
 76 | 
 77 |       ctx.beginPath();
 78 |       ctx.save();
 79 |       ctx.scale(1, 4);
 80 |       ctx.arc((360 + 30) / 1, (445 - 17) / 4, 6, Math.PI, 2 * Math.PI);
 81 |       ctx.fillStyle = 'red';
 82 |       ctx.fill();
 83 |       ctx.restore();
 84 | 
 85 |       ctx.beginPath();
 86 |       ctx.save();
 87 |       ctx.scale(1, 4);
 88 |       ctx.arc((360 + 30) / 1, (445 + 17) / 4, 6, 0, Math.PI);
 89 |       ctx.fillStyle = 'red';
 90 |       ctx.fill();
 91 |       ctx.restore();
 92 | 
 93 |       //画嘴
 94 |       ctx.beginPath();
 95 |       ctx.lineWidth = 5;
 96 |       ctx.lineCap = "round";
 97 |       ctx.moveTo(360 - 10, 500);
 98 |       ctx.lineTo(360 + 10, 500);
 99 |       ctx.stroke();
100 | 
101 |       ctx.beginPath();
102 |       ctx.lineWidth = 1;
103 |       ctx.lineCap = "butt";
104 |       ctx.moveTo(360 + 10 + 2.5, 500);
105 |       ctx.quadraticCurveTo(360, 509, 360 - 12.5, 500);
106 |       ctx.fill();
107 | 
108 | 
109 |       //画左脚
110 |       ctx.beginPath();
111 |       ctx.moveTo(320, 738);
112 |       ctx.lineTo(322, 770);
113 |       ctx.lineTo(334, 770);
114 |       ctx.lineTo(335, 738);
115 |       ctx.fill();
116 | 
117 |       //画右脚
118 |       ctx.beginPath();
119 |       ctx.moveTo(400, 738);
120 |       ctx.lineTo(401, 770);
121 |       ctx.lineTo(415, 770);
122 |       ctx.quadraticCurveTo(408, 750, 415, 735);
123 |       ctx.fill();
124 | 
125 |       //画脚下的圆环
126 |       ctx.beginPath();
127 |       ctx.save();
128 |       ctx.scale(4.2, 1);
129 |       ctx.arc(360 / 4.2, 770, 15, 0, 2 * Math.PI);
130 |       ctx.fill();
131 |       ctx.restore();
132 | 
133 |       //画手
134 |       ctx.beginPath();
135 |       ctx.save();
136 |       ctx.lineCap = "round";
137 |       ctx.lineWidth = '10';
138 |       ctx.moveTo(248, 518);
139 |       ctx.lineTo(270, 548);
140 |       ctx.stroke();
141 |       ctx.restore();
142 | 
143 |       //画手指
144 |       ctx.beginPath();
145 |       ctx.lineCap = "round";
146 |       ctx.lineWidth = '7';
147 |       ctx.moveTo(248, 518);
148 |       ctx.lineTo(245, 518);
149 | 
150 |       ctx.moveTo(248, 515);
151 |       ctx.lineTo(245.5, 515);
152 | 
153 |       ctx.moveTo(247.5, 510);
154 |       ctx.lineTo(246, 510);
155 |       ctx.stroke();
156 |       ctx.restore();
157 | 
158 |       //画雨伞渐变线
159 | 
160 |       ctx.save();
161 |       ctx.lineWidth = '1';
162 |       ctx.rotate(Math.PI / 30);
163 |       ctx.beginPath();
164 |       ctx.save();
165 |       ctx.scale(2.2, 2.3);
166 |       ctx.arc(300 / 2.2, 250 / 2.3, 70, Math.PI, Math.PI * 2);
167 | 
168 | 
169 |       var grd = ctx.createLinearGradient(300, 0, 300, 250);
170 | 
171 |       grd.addColorStop(0, "#217786");
172 |       grd.addColorStop(1, "#1A6180");
173 | 
174 |       ctx.fillStyle = grd;
175 |       ctx.fill();
176 |       ctx.stroke();
177 |       ctx.restore();
178 | 
179 |       ctx.beginPath();
180 |       ctx.save();
181 |       ctx.scale(2.2, 0.7);
182 |       ctx.arc(300 / 2.2, 250 / 0.7, 70, 0, Math.PI);
183 |       ctx.fillStyle = "#1E6E83";
184 |       ctx.fill();
185 |       ctx.stroke();
186 |       ctx.restore();
187 | 
188 | 
189 |       ctx.beginPath();
190 |       ctx.moveTo(300 - 2.2 * 70, 250);
191 |       ctx.strokeStyle = "#1E6E83";
192 |       ctx.lineTo(300 + 2.2 * 70, 250);
193 |       ctx.stroke();
194 |       ctx.strokeStyle = "#000";
195 | 
196 |       ctx.beginPath();
197 |       ctx.save();
198 |       ctx.scale(1, 2);
199 |       ctx.arc(300, 250 / 2, 80, Math.PI - Math.PI / 12, Math.PI * 2 + Math.PI / 12);
200 |       ctx.stroke();
201 |       ctx.restore();
202 | 
203 |       ctx.beginPath();
204 |       ctx.moveTo(300, 250 - 70 * 2.3);
205 |       ctx.quadraticCurveTo(280, 250 + 70 * Math.cos(Math.PI / 4) * 0.2, 294, 250 + 70 * Math.cos(Math.PI / 4));
206 |       ctx.stroke();
207 | 
208 |       ctx.beginPath();
209 |       ctx.lineWidth = 5;
210 |       ctx.moveTo(300, 250 + 70 * Math.cos(Math.PI / 4));
211 |       ctx.lineTo(300, 250 + 70 * Math.cos(Math.PI / 4) + 210);
212 |       ctx.stroke();
213 | 
214 |       ctx.beginPath();
215 |       ctx.lineWidth = 8;
216 |       ctx.strokeStyle = '#0B3542';
217 |       ctx.moveTo(300, 250 + 70 * Math.cos(Math.PI / 4) + 190);
218 |       ctx.lineTo(300, 250 + 70 * Math.cos(Math.PI / 4) + 210);
219 |       ctx.stroke();
220 | 
221 |       ctx.beginPath();
222 |       ctx.save();
223 |       ctx.scale(1, 0.9);
224 |       ctx.lineWidth = 8;
225 |       ctx.lineCap = "round";
226 |       ctx.arc(320, (250 + 70 * Math.cos(Math.PI / 4) + 210) / 0.9, 20, Math.PI / 3.5, Math.PI);
227 |       ctx.stroke();
228 |       ctx.restore();
229 | 
230 |       //伞尖下圆环
231 |       ctx.beginPath();
232 |       ctx.save();
233 |       ctx.lineWidth = 1;
234 |       ctx.scale(2, 1);
235 |       ctx.arc(300 / 2, 250 - 70 * 2.3 + 3, 6, 0, Math.PI * 2);
236 |       ctx.fill();
237 |       ctx.restore();
238 | 
239 |       //伞尖
240 |       ctx.beginPath();
241 |       ctx.moveTo(300 - 5, 250 - 70 * 2.3);
242 |       ctx.lineTo(300 + 5, 250 - 70 * 2.3);
243 |       ctx.lineWidth = 2;
244 |       ctx.lineCap = "round";
245 |       ctx.lineTo(301, 250 - 70 * 2.3 - 25);
246 |       ctx.lineTo(299, 250 - 70 * 2.3 - 25);
247 |       ctx.lineTo(300 - 5, 250 - 70 * 2.3);
248 |       ctx.lineCap = "butt";
249 |       ctx.fill();
250 |       ctx.stroke();
251 | 
252 |       ctx.restore();
253 |       ctx.restore();
254 | 


--------------------------------------------------------------------------------
/hiddenface/rain.css:
--------------------------------------------------------------------------------
  1 | .drop:nth-child(1) {
  2 |   position: absolute;
  3 |   width: 3px;
  4 |   height: 20px;
  5 |   left: 269px;
  6 |   top: 28px;
  7 |   background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
  8 |   transform: rotate(34deg);
  9 |   animation: move 0.6s linear 0.1s infinite; }
 10 | 
 11 | .drop:nth-child(2) {
 12 |   position: absolute;
 13 |   width: 3px;
 14 |   height: 20px;
 15 |   left: 100px;
 16 |   top: 71px;
 17 |   background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
 18 |   transform: rotate(43deg);
 19 |   animation: move 0.45s linear 0.1s infinite; }
 20 | 
 21 | .drop:nth-child(3) {
 22 |   position: absolute;
 23 |   width: 3px;
 24 |   height: 20px;
 25 |   left: 414px;
 26 |   top: 48px;
 27 |   background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
 28 |   transform: rotate(53deg);
 29 |   animation: move 0.7s linear 0.06667s infinite; }
 30 | 
 31 | .drop:nth-child(4) {
 32 |   position: absolute;
 33 |   width: 3px;
 34 |   height: 20px;
 35 |   left: 41px;
 36 |   top: 60px;
 37 |   background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
 38 |   transform: rotate(67deg);
 39 |   animation: move 0.95s linear 0.06667s infinite; }
 40 | 
 41 | .drop:nth-child(5) {
 42 |   position: absolute;
 43 |   width: 3px;
 44 |   height: 20px;
 45 |   left: 368px;
 46 |   top: 33px;
 47 |   background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
 48 |   transform: rotate(75deg);
 49 |   animation: move 0.4s linear 0.1s infinite; }
 50 | 
 51 | .drop:nth-child(6) {
 52 |   position: absolute;
 53 |   width: 3px;
 54 |   height: 20px;
 55 |   left: 48px;
 56 |   top: 9px;
 57 |   background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
 58 |   transform: rotate(70deg);
 59 |   animation: move 1.35s linear 0.03333s infinite; }
 60 | 
 61 | .drop:nth-child(7) {
 62 |   position: absolute;
 63 |   width: 3px;
 64 |   height: 20px;
 65 |   left: 755px;
 66 |   top: 85px;
 67 |   background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
 68 |   transform: rotate(49deg);
 69 |   animation: move 1s linear 0.06667s infinite; }
 70 | 
 71 | .drop:nth-child(8) {
 72 |   position: absolute;
 73 |   width: 3px;
 74 |   height: 20px;
 75 |   left: 656px;
 76 |   top: 91px;
 77 |   background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
 78 |   transform: rotate(62deg);
 79 |   animation: move 1.55s linear 0.03333s infinite; }
 80 | 
 81 | .drop:nth-child(9) {
 82 |   position: absolute;
 83 |   width: 3px;
 84 |   height: 20px;
 85 |   left: 749px;
 86 |   top: -3px;
 87 |   background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
 88 |   transform: rotate(45deg);
 89 |   animation: move 1s linear 0.06667s infinite; }
 90 | 
 91 | .drop:nth-child(10) {
 92 |   position: absolute;
 93 |   width: 3px;
 94 |   height: 20px;
 95 |   left: 639px;
 96 |   top: 42px;
 97 |   background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
 98 |   transform: rotate(45deg);
 99 |   animation: move 1.2s linear 0.03333s infinite; }
100 | 
101 | .drop:nth-child(11) {
102 |   position: absolute;
103 |   width: 3px;
104 |   height: 20px;
105 |   left: 177px;
106 |   top: 74px;
107 |   background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
108 |   transform: rotate(33deg);
109 |   animation: move 1.25s linear 0.06667s infinite; }
110 | 
111 | .drop:nth-child(12) {
112 |   position: absolute;
113 |   width: 3px;
114 |   height: 20px;
115 |   left: 123px;
116 |   top: 41px;
117 |   background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
118 |   transform: rotate(33deg);
119 |   animation: move 1.4s linear 0.03333s infinite; }
120 | 
121 | .drop:nth-child(13) {
122 |   position: absolute;
123 |   width: 3px;
124 |   height: 20px;
125 |   left: 403px;
126 |   top: 92px;
127 |   background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
128 |   transform: rotate(35deg);
129 |   animation: move 0.95s linear 0.1s infinite; }
130 | 
131 | .drop:nth-child(14) {
132 |   position: absolute;
133 |   width: 3px;
134 |   height: 20px;
135 |   left: 503px;
136 |   top: 90px;
137 |   background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
138 |   transform: rotate(51deg);
139 |   animation: move 1.6s linear 0.03333s infinite; }
140 | 
141 | .drop:nth-child(15) {
142 |   position: absolute;
143 |   width: 3px;
144 |   height: 20px;
145 |   left: 668px;
146 |   top: 18px;
147 |   background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
148 |   transform: rotate(34deg);
149 |   animation: move 0.9s linear 0.1s infinite; }
150 | 
151 | .drop:nth-child(16) {
152 |   position: absolute;
153 |   width: 3px;
154 |   height: 20px;
155 |   left: 692px;
156 |   top: 22px;
157 |   background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
158 |   transform: rotate(49deg);
159 |   animation: move 0.75s linear 0.06667s infinite; }
160 | 
161 | .drop:nth-child(17) {
162 |   position: absolute;
163 |   width: 3px;
164 |   height: 20px;
165 |   left: 656px;
166 |   top: 5px;
167 |   background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
168 |   transform: rotate(35deg);
169 |   animation: move 1.4s linear 0.06667s infinite; }
170 | 
171 | .drop:nth-child(18) {
172 |   position: absolute;
173 |   width: 3px;
174 |   height: 20px;
175 |   left: 530px;
176 |   top: 32px;
177 |   background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
178 |   transform: rotate(43deg);
179 |   animation: move 1.65s linear 0.1s infinite; }
180 | 
181 | .drop:nth-child(19) {
182 |   position: absolute;
183 |   width: 3px;
184 |   height: 20px;
185 |   left: 776px;
186 |   top: 57px;
187 |   background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
188 |   transform: rotate(64deg);
189 |   animation: move 0.75s linear 0.1s infinite; }
190 | 
191 | .drop:nth-child(20) {
192 |   position: absolute;
193 |   width: 3px;
194 |   height: 20px;
195 |   left: 738px;
196 |   top: 13px;
197 |   background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
198 |   transform: rotate(37deg);
199 |   animation: move 0.45s linear 0.03333s infinite; }
200 | 
201 | @keyframes move {
202 |   100% {
203 |     width: 3px;
204 |     height: 20px;
205 |     transform: translate3d(-650px, 650px, 0);
206 |     opacity: 0.1; } }
207 | 
208 | /*# sourceMappingURL=rain.css.map */
209 | 


--------------------------------------------------------------------------------
/hiddenface/rain.css.map:
--------------------------------------------------------------------------------
1 | {
2 | "version": 3,
3 | "mappings": "AASE,kBAAuB;EACrB,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,IAAI,EAAE,KAAuB;EAC7B,GAAG,EAAE,IAAuB;EAC5B,UAAU,EAAE,4EAA4E;EACxF,SAAS,EAAE,aAA+B;EAC1C,SAAS,EAAE,8BAA+F;;AAR5G,kBAAuB;EACrB,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,IAAI,EAAE,KAAuB;EAC7B,GAAG,EAAE,IAAuB;EAC5B,UAAU,EAAE,4EAA4E;EACxF,SAAS,EAAE,aAA+B;EAC1C,SAAS,EAAE,+BAA+F;;AAR5G,kBAAuB;EACrB,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,IAAI,EAAE,KAAuB;EAC7B,GAAG,EAAE,IAAuB;EAC5B,UAAU,EAAE,4EAA4E;EACxF,SAAS,EAAE,aAA+B;EAC1C,SAAS,EAAE,kCAA+F;;AAR5G,kBAAuB;EACrB,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,IAAI,EAAE,IAAuB;EAC7B,GAAG,EAAE,IAAuB;EAC5B,UAAU,EAAE,4EAA4E;EACxF,SAAS,EAAE,aAA+B;EAC1C,SAAS,EAAE,mCAA+F;;AAR5G,kBAAuB;EACrB,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,IAAI,EAAE,KAAuB;EAC7B,GAAG,EAAE,IAAuB;EAC5B,UAAU,EAAE,4EAA4E;EACxF,SAAS,EAAE,aAA+B;EAC1C,SAAS,EAAE,8BAA+F;;AAR5G,kBAAuB;EACrB,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,IAAI,EAAE,IAAuB;EAC7B,GAAG,EAAE,GAAuB;EAC5B,UAAU,EAAE,4EAA4E;EACxF,SAAS,EAAE,aAA+B;EAC1C,SAAS,EAAE,mCAA+F;;AAR5G,kBAAuB;EACrB,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,IAAI,EAAE,KAAuB;EAC7B,GAAG,EAAE,IAAuB;EAC5B,UAAU,EAAE,4EAA4E;EACxF,SAAS,EAAE,aAA+B;EAC1C,SAAS,EAAE,gCAA+F;;AAR5G,kBAAuB;EACrB,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,IAAI,EAAE,KAAuB;EAC7B,GAAG,EAAE,IAAuB;EAC5B,UAAU,EAAE,4EAA4E;EACxF,SAAS,EAAE,aAA+B;EAC1C,SAAS,EAAE,mCAA+F;;AAR5G,kBAAuB;EACrB,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,IAAI,EAAE,KAAuB;EAC7B,GAAG,EAAE,IAAuB;EAC5B,UAAU,EAAE,4EAA4E;EACxF,SAAS,EAAE,aAA+B;EAC1C,SAAS,EAAE,gCAA+F;;AAR5G,mBAAuB;EACrB,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,IAAI,EAAE,KAAuB;EAC7B,GAAG,EAAE,IAAuB;EAC5B,UAAU,EAAE,4EAA4E;EACxF,SAAS,EAAE,aAA+B;EAC1C,SAAS,EAAE,kCAA+F;;AAR5G,mBAAuB;EACrB,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,IAAI,EAAE,KAAuB;EAC7B,GAAG,EAAE,IAAuB;EAC5B,UAAU,EAAE,4EAA4E;EACxF,SAAS,EAAE,aAA+B;EAC1C,SAAS,EAAE,mCAA+F;;AAR5G,mBAAuB;EACrB,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,IAAI,EAAE,KAAuB;EAC7B,GAAG,EAAE,IAAuB;EAC5B,UAAU,EAAE,4EAA4E;EACxF,SAAS,EAAE,aAA+B;EAC1C,SAAS,EAAE,kCAA+F;;AAR5G,mBAAuB;EACrB,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,IAAI,EAAE,KAAuB;EAC7B,GAAG,EAAE,IAAuB;EAC5B,UAAU,EAAE,4EAA4E;EACxF,SAAS,EAAE,aAA+B;EAC1C,SAAS,EAAE,+BAA+F;;AAR5G,mBAAuB;EACrB,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,IAAI,EAAE,KAAuB;EAC7B,GAAG,EAAE,IAAuB;EAC5B,UAAU,EAAE,4EAA4E;EACxF,SAAS,EAAE,aAA+B;EAC1C,SAAS,EAAE,kCAA+F;;AAR5G,mBAAuB;EACrB,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,IAAI,EAAE,KAAuB;EAC7B,GAAG,EAAE,IAAuB;EAC5B,UAAU,EAAE,4EAA4E;EACxF,SAAS,EAAE,aAA+B;EAC1C,SAAS,EAAE,8BAA+F;;AAR5G,mBAAuB;EACrB,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,IAAI,EAAE,KAAuB;EAC7B,GAAG,EAAE,IAAuB;EAC5B,UAAU,EAAE,4EAA4E;EACxF,SAAS,EAAE,aAA+B;EAC1C,SAAS,EAAE,mCAA+F;;AAR5G,mBAAuB;EACrB,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,IAAI,EAAE,KAAuB;EAC7B,GAAG,EAAE,GAAuB;EAC5B,UAAU,EAAE,4EAA4E;EACxF,SAAS,EAAE,aAA+B;EAC1C,SAAS,EAAE,kCAA+F;;AAR5G,mBAAuB;EACrB,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,IAAI,EAAE,KAAuB;EAC7B,GAAG,EAAE,IAAuB;EAC5B,UAAU,EAAE,4EAA4E;EACxF,SAAS,EAAE,aAA+B;EAC1C,SAAS,EAAE,+BAA+F;;AAR5G,mBAAuB;EACrB,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,IAAI,EAAE,KAAuB;EAC7B,GAAG,EAAE,IAAuB;EAC5B,UAAU,EAAE,4EAA4E;EACxF,SAAS,EAAE,aAA+B;EAC1C,SAAS,EAAE,+BAA+F;;AAR5G,mBAAuB;EACrB,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,IAAI,EAAE,KAAuB;EAC7B,GAAG,EAAE,IAAuB;EAC5B,UAAU,EAAE,4EAA4E;EACxF,SAAS,EAAE,aAA+B;EAC1C,SAAS,EAAE,mCAA+F;;AAI9G,eAOC;EANC,IAAK;IACH,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,IAAI;IACZ,SAAS,EAAE,6BAA6B;IACxC,OAAO,EAAE,GAAG",
4 | "sources": ["rain.scss"],
5 | "names": [],
6 | "file": "rain.css"
7 | }


--------------------------------------------------------------------------------
/hiddenface/rain.scss:
--------------------------------------------------------------------------------
 1 | $animationTime: 2;
 2 | $delayTime: 3;
 3 | 
 4 | @function randomNum($max, $min:0){
 5 |   @return ($min + random($max))
 6 | }
 7 | 
 8 | @for $i from 1 to 21 {
 9 | 
10 |   .drop:nth-child(#{$i}) {
11 |     position: absolute;
12 |     width: 3px;
13 |     height: 20px;
14 |     left: #{randomNum(800, 20)}px;
15 |     top: #{randomNum(100, -5)}px;
16 |     background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
17 |     transform: rotate(#{randomNum(45, 30)}deg);
18 |     animation: move  #{randomNum($animationTime * 13, 7) / 20}s linear #{randomNum($delayTime) / 30}s infinite;
19 |   }
20 | }
21 | 
22 | @keyframes move {
23 |   100% {
24 |     width: 3px;
25 |     height: 20px;
26 |     transform: translate3d(-650px, 650px, 0);
27 |     opacity: 0.1;
28 |   }
29 | }


--------------------------------------------------------------------------------
/interestingNote/条状背景/README.md:
--------------------------------------------------------------------------------
  1 | ##CSS 线性渐变
  2 | 这里只讨论w3c的属性，各个浏览器私有实现，这里不讨论，未来的css属性一定会遵照w3c的规定发展的
  3 | 
  4 | 先看MDN的定义
  5 | 
  6 | 	渐变线由包含渐变图形的容器的中心点和一个角度来定义的。渐变线上的颜色值是由不同的点来定义，包括起始点，终点，以及两者之间的可选的中间点（中间点可以有多个）。
  7 | 	
  8 | 	起始点是渐变线上代表起始颜色值的点。起始点由渐变线和过容器顶点的垂直线之间的交叉点来定义。（垂直线跟渐变线在同一象限内）
  9 | 	
 10 | 	同样的，终点是渐变线上代表最终颜色值的点。终点也是由渐变线和从最近的顶点发出的垂直线之间的交叉点定义的，然而从起始点的对称点来定义终点是更容易理解的一种方式，因为终点是起点关于容器的中心点的反射点。
 11 | 
 12 | 这里首先挑明一点，线性渐变创建了一个呈现线性渐变的<image> 而不是css <color> 这就意味着它会受到 background-repeat 和 background-position 的 调整
 13 | 
 14 | MDN 的 API
 15 | 
 16 | linear-gradient([angle| to  &lt;side-or-corner>,]?, &lt;color-stop> [, &lt;color-stop>]+ )
 17 | 
 18 | 举例(*例子里的demo 全在test文件下*)
 19 | 
 20 | 测试一下两种写法
 21 | 
 22 | 一个上白下黑渐变的div
 23 | 
 24 | linear-gradient(0deg, #000, #fff)
 25 | 
 26 | 一个左白右黑渐变的div
 27 | linear-gradient(to right, #000, #fff)
 28 | 
 29 | 百分比的渐变
 30 | linear-gradient(0deg, #000 40%, #fff 60%)
 31 | 
 32 | 这里有一种特殊的写法
 33 | linear-gradient(0deg, #000 40%, #fff 0);
 34 | 
 35 | 0相当于无缝衔接上面的40%,等价于 linear-gradient(0, #000 40%, #fff 40%);  
 36 | 
 37 | ##斜向渐变
 38 | 先来个简单的经典45度
 39 | 
 40 | linear-gradient(45deg, red 15px, blue 15px);
 41 | 
 42 | 结果是斜向上的 渐变
 43 | 
 44 | 方向记住很简单，0deg 自下而上 顺时针 45deg  90deg 就好了
 45 | 
 46 | 我们做个均为30px的单元格，斜分颜色，很多同学这样想，这也特简单了吧，只要
 47 | 
 48 | background-image:  linear-gradient(45deg, red 15px, blue 15px);
 49 | background-size: 30px 30px 
 50 | 
 51 | 就好了,其实 NO NO NO
 52 | 
 53 | 记住我们开始的话，这个时候轴线变了，转了45度，渐变线已经变成bacground-size 的对角线了(background-size 横纵相等)，那平分点就是 30*√2/2了 大约 20 
 54 | 
 55 | 好了45deg太特殊了，换个60deg的，我们验验真伪
 56 | 
 57 |  background-image:  linear-gradient(60deg, red 50%, blue 0);
 58 |  
 59 |  哦？怎么过了 50% 呢？ 好，我们画个图 看看
 60 |   	
 61 | ![grapic1](img/graphic1.jpg)
 62 | 	
 63 | 现在知道为啥过50%了，很简单。对于正方形而言，最长的是那条对角线，那我把上面那条线移到对角线上，你猜中点会落在正方形的中点上吗？
 64 | 
 65 | 答案肯定是不会啊，不然它不就和对角线平行了吗？那到底是在左边还是右边呢？ 我们再画张图看看
 66 | 
 67 | ![grapic2](img/graphic2.jpg)	
 68 | 
 69 | 一图胜千言，我们看到 D 落在 O 的右边，且垂直A C的轴线 一定在右边了，截图为证
 70 | 
 71 | ![grapic3](img/graphic3.jpg)
 72 | 
 73 | 
 74 | ##repeating-linear-gradient
 75 | 
 76 | 这个简单
 77 | 举个栗子
 78 | repeating-linear-gradient(0deg,blue 0, red 30px);
 79 | ![grapic4](img/graphic4.jpg)
 80 | 
 81 | 我们看到它在一个background-size 单元格里进行了填充，等价于
 82 | linear-gradient(0deg,blue 0, red 30px,
 83 | 						 blue 30px, red 60px,
 84 | 						 blue 60px, red 90px,
 85 | 						 blue 90px, red 100px);
 86 | 						 
 87 | 这个方法简直神作，我们不需要计算60deg,150deg,默认长度是对角线，不再需要√2了，真是解放了 不会三角函数的同学，简单到只要改改角度就好，而不需要原来的liner-gradient 和background-size 简直大块人心
 88 | 
 89 | 看看效果
 90 | 
 91 | ![grapic5](img/graphic5.jpg)
 92 | 
 93 | **小tips**
 94 | 
 95 | 注意transparent
 96 | 
 97 | linear-gradient 本身一旦形成就不会被覆盖(transparent 除外)
 98 | 
 99 | 例如            
100 |  background: linear-gradient(90deg, blue 50px, red 80px),
101 |              linear-gradient(90deg, green 50px, purple 80px); 
102 |              
103 | 这里是不会出现的purple的，因为这些区域被blue 和 red 已经填满了，不会被覆盖。
104 | 
105 | *同时*
106 | 只要 透明度<1 也会被后面的颜色 覆盖
107 | 
108 | 但是
109 | background: linear-gradient(90deg, blue 50px, transparent 80px),
110 |           linear-gradient(90deg, green 50px, purple 80px);
111 | 这里 就会出现purple了，因为transparent把位置空出来了，大家觉得这有什么好讲的，对比一下box-shadow 你就知道了两者异同了
112 |   
113 |                              


--------------------------------------------------------------------------------
/interestingNote/条状背景/img/forkme.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FounderIsShadowWalker/CSS-note/c49eba0a7c325a42f971e90b215819fef7ab771a/interestingNote/条状背景/img/forkme.png


--------------------------------------------------------------------------------
/interestingNote/条状背景/img/graphic1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FounderIsShadowWalker/CSS-note/c49eba0a7c325a42f971e90b215819fef7ab771a/interestingNote/条状背景/img/graphic1.jpg


--------------------------------------------------------------------------------
/interestingNote/条状背景/img/graphic2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FounderIsShadowWalker/CSS-note/c49eba0a7c325a42f971e90b215819fef7ab771a/interestingNote/条状背景/img/graphic2.jpg


--------------------------------------------------------------------------------
/interestingNote/条状背景/img/graphic3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FounderIsShadowWalker/CSS-note/c49eba0a7c325a42f971e90b215819fef7ab771a/interestingNote/条状背景/img/graphic3.jpg


--------------------------------------------------------------------------------
/interestingNote/条状背景/img/graphic4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FounderIsShadowWalker/CSS-note/c49eba0a7c325a42f971e90b215819fef7ab771a/interestingNote/条状背景/img/graphic4.jpg


--------------------------------------------------------------------------------
/interestingNote/条状背景/img/graphic5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FounderIsShadowWalker/CSS-note/c49eba0a7c325a42f971e90b215819fef7ab771a/interestingNote/条状背景/img/graphic5.jpg


--------------------------------------------------------------------------------
/interestingNote/条状背景/test/index.css:
--------------------------------------------------------------------------------
 1 | .container{
 2 |     width: 100%;
 3 |     position: relative;
 4 | }
 5 | section{
 6 |     position: relative;
 7 |     width: 100%;
 8 |     height: 400px;
 9 |     border-top: 1px solid #e6e6e6;
10 |     border-bottom: 1px solid #e6e6e6;
11 |     margin-bottom: 10px;
12 | }
13 | .css-live-wrap{
14 |     position: relative;
15 |     width: 50%;
16 |     float: left;
17 |     height: 100%;
18 | }
19 | .code{
20 |     width: 50%;
21 |     height: 100%;
22 |     box-sizing: border-box;
23 |     font-size: 14px;
24 |     background: #ffe;
25 |     display: block;
26 |     float: right;
27 |     padding: 1em;
28 |     font-family: Consolas, Monaco, monospace;
29 |     white-space: pre;
30 |     color:#333;
31 |     text-shadow: 0 1px 1px white;
32 |     overflow-y:scroll;
33 | }
34 | summary{
35 |     position: absolute;
36 |     cursor: default;
37 |     left: 0;
38 |     color: #999;
39 |     font-size: 14px;
40 |     line-height:18px;
41 |     margin: 20px 0 0 20px;
42 |     border-left: 2px solid #FF9800;
43 |     padding: 0 10px;
44 |     text-shadow: 0 0.2px hsl(0,0%,85%);
45 |     background-size: 100% 1px;
46 |     transition:.5s;
47 | }


--------------------------------------------------------------------------------
/interestingNote/条状背景/test/reset.css:
--------------------------------------------------------------------------------
 1 | @charset "utf-8";
 2 | 
 3 | /*CSS reset*/
 4 | html {
 5 | 	overflow-x: hidden;
 6 | 	overflow-y: auto;
 7 | 	color: #333;
 8 | 	font-size: 62.5%;
 9 | 	font-family: Microsoft Yahei,simsun,Tahoma,Helvetica,Arial,SimHei,sans-serif;
10 | }
11 | body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote {
12 | 	margin: 0;
13 | 	padding: 0
14 | }
15 | fieldset, img {
16 | 	border: 0
17 | }
18 | address, caption, cite, code, dfn, em, th, var, optgroup {
19 | 	font-style: normal;
20 | 	font-weight: 400
21 | }
22 | del, ins {
23 | 	text-decoration: none
24 | }
25 | li {
26 | 	list-style: none
27 | }
28 | caption, th {
29 | 	text-align: left
30 | }
31 | q:before, q:after {
32 | 	content: ''
33 | }
34 | abbr, acronym {
35 | 	border: 0;
36 | 	font-variant: normal
37 | }
38 | sup {
39 | 	vertical-align: baseline
40 | }
41 | sub {
42 | 	vertical-align: baseline
43 | }
44 | legend {
45 | 	color: #000
46 | }
47 | input, button, textarea, select, optgroup, option {
48 | 	font-family: inherit;
49 | 	font-size: inherit;
50 | 	font-style: inherit;
51 | 	font-weight: inherit
52 | }
53 | input, button, textarea, select {
54 | 	outline:none;
55 | 	*font-size: 100%
56 | }
57 | textarea{resize:none}
58 | 
59 | a {
60 | 	outline: 0;
61 | 	text-decoration: none;
62 | }
63 | a:hover {
64 | 	outline: 0;
65 | 	text-decoration: none;
66 | }
67 | .clearfix, .cf {
68 | 	zoom: 1
69 | }
70 | .clearfix:after, .cf:after {
71 | 	content: "";
72 | 	display: block;
73 | 	height: 0;
74 | 	clear: both;
75 | 	visibility: hidden
76 | }
77 | * {
78 | 	-webkit-tap-highlight-color: transparent;
79 | 	-webkit-appearance: none;
80 | 	outline:none;
81 | }
82 | 


--------------------------------------------------------------------------------
/interestingNote/条状背景/test/test.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>线性渐变demo</title>
  6 |     <link href="reset.css" rel="stylesheet">
  7 |     <link href="index.css" rel="stylesheet">
  8 | </head>
  9 | <body>
 10 | <a style="width: 149px; height: 149px;position: fixed; top: 0; right: 0;z-index: 9999;" href="https://github.com/FounderIsShadowWalker/CSS-note" target="_blank">
 11 |     <img src="../img/forkme.png">
 12 | </a>
 13 | <div class="container">
 14 |     <section class="code-wrap cf">
 15 |         <div class="css-live-wrap">
 16 |             <summary>简单线性渐变</summary>
 17 |             <hgroup class="demo">
 18 |                 <h1>线性渐变</h1>
 19 |             </hgroup>
 20 |         </div>
 21 |         <style class="code" contenteditable="true">
 22 |             .demo{
 23 |                 position: absolute;
 24 |                 top: 50%;
 25 |                 left: 50%;
 26 |                 width: 200px;
 27 |                 line-height: 260px;
 28 |                 background-image: linear-gradient(0deg,#000, #fff);
 29 |                 text-align: center;
 30 |                 transform: translate(-50%,-50%);
 31 |             }
 32 |         </style>
 33 |     </section>
 34 | 
 35 |     <section class="code-wrap cf">
 36 |         <div class="css-live-wrap">
 37 |             <summary>简单线性渐变</summary>
 38 |             <hgroup class="demo1">
 39 |                 <h1>线性渐变</h1>
 40 |             </hgroup>
 41 |         </div>
 42 |         <style class="code" contenteditable="true">
 43 |             .demo1{
 44 |                 position: absolute;
 45 |                 top: 50%;
 46 |                 left: 50%;
 47 |                 width: 200px;
 48 |                 line-height: 260px;
 49 |                 background-image: linear-gradient(to right,#000, #fff);
 50 |                 text-align: center;
 51 |                 transform: translate(-50%,-50%);
 52 |             }
 53 |         </style>
 54 |     </section>
 55 | 
 56 |     <section class="code-wrap cf">
 57 |         <div class="css-live-wrap">
 58 |             <summary>简单线性渐变</summary>
 59 |             <hgroup class="demo2">
 60 |                 <h1>线性渐变</h1>
 61 |             </hgroup>
 62 |         </div>
 63 |         <style class="code" contenteditable="true">
 64 |             .demo2{
 65 |                 position: absolute;
 66 |                 top: 50%;
 67 |                 left: 50%;
 68 |                 width: 200px;
 69 |                 line-height: 260px;
 70 |                 background-image: linear-gradient(0deg,#000 40%, #fff 60%);
 71 |                 text-align: center;
 72 |                 transform: translate(-50%,-50%);
 73 |                 background-size: 100% 100px;
 74 |                 background-repeat: no-repeat;
 75 |             }
 76 |         </style>
 77 |     </section>
 78 | 
 79 |     <section class="code-wrap cf">
 80 |         <div class="css-live-wrap">
 81 |             <summary>简单线性渐变</summary>
 82 |             <hgroup class="demo3">
 83 |                 <h1>线性渐变</h1>
 84 |             </hgroup>
 85 |         </div>
 86 |         <style class="code" contenteditable="true">
 87 |             .demo3{
 88 |                 position: absolute;
 89 |                 top: 50%;
 90 |                 left: 50%;
 91 |                 width: 210px;
 92 |                 line-height: 210px;
 93 |                 background-image:  linear-gradient(45deg, red 15px, blue 15px);
 94 |                 text-align: center;
 95 |                 transform: translate(-50%,-50%);
 96 |                 background-size: 30px 30px;
 97 |                 background-repeat:no-repeat;
 98 |                 background-color: yellow;
 99 |             }
100 |         </style>
101 |     </section>
102 | 
103 |     <section class="code-wrap cf">
104 |         <div class="css-live-wrap">
105 |             <summary>简单线性渐变</summary>
106 |             <hgroup class="demo4">
107 |                 <h1>线性渐变</h1>
108 |             </hgroup>
109 |         </div>
110 |         <style class="code" contenteditable="true">
111 |             .demo4{
112 |                 position: absolute;
113 |                 top: 50%;
114 |                 left: 50%;
115 |                 width: 210px;
116 |                 line-height: 210px;
117 |                 background-image:  linear-gradient(60deg, red 50%, blue 0);
118 |                 text-align: center;
119 |                 transform: translate(-50%,-50%);
120 |                 background-size: 100px 100px;
121 |                 background-repeat:no-repeat;
122 |                 background-color: yellow;
123 |             }
124 |         </style>
125 |     </section>
126 | 
127 |     <section class="code-wrap cf">
128 |         <div class="css-live-wrap">
129 |             <summary>简单线性渐变</summary>
130 |             <hgroup class="demo5">
131 |                 <h1>线性渐变</h1>
132 |             </hgroup>
133 |         </div>
134 |         <style class="code" contenteditable="true">
135 |             .demo5{
136 |                 position: absolute;
137 |                 top: 50%;
138 |                 left: 50%;
139 |                 width: 210px;
140 |                 line-height: 210px;
141 |                 background:  repeating-linear-gradient(0deg, blue 0, red 30px);
142 |                 text-align: center;
143 |                 transform: translate(-50%,-50%);
144 |                 background-size: 100px 100px;
145 |                 background-repeat:no-repeat;
146 |                 background-color: yellow;
147 |             }
148 |         </style>
149 |     </section>
150 | 
151 |     <section class="code-wrap cf">
152 |         <div class="css-live-wrap">
153 |             <summary>简单线性渐变</summary>
154 |             <hgroup class="demo6">
155 |                 <h1>线性渐变</h1>
156 |             </hgroup>
157 |         </div>
158 |         <style class="code" contenteditable="true">
159 |             .demo6{
160 |                 position: absolute;
161 |                 top: 50%;
162 |                 left: 50%;
163 |                 width: 210px;
164 |                 line-height: 210px;
165 |                 background:  repeating-linear-gradient(60deg, blue 0px, red 30px);
166 |                 text-align: center;
167 |                 transform: translate(-50%,-50%);
168 |                 background-repeat:repeat;
169 |                 background-color: yellow;
170 |             }
171 |         </style>
172 |     </section>
173 | 
174 |     <section class="code-wrap cf">
175 |         <div class="css-live-wrap">
176 |             <summary>简单线性渐变</summary>
177 |             <hgroup class="demo7">
178 |                 <h1>线性渐变</h1>
179 |             </hgroup>
180 |         </div>
181 |         <style class="code" contenteditable="true">
182 |             .demo7{
183 |                 position: absolute;
184 |                 top: 50%;
185 |                 left: 50%;
186 |                 width: 210px;
187 |                 line-height: 210px;
188 |                 background: linear-gradient(90deg, blue 50px, red 80px),
189 |                               linear-gradient(90deg, green 50px, purple 80px);
190 |                 text-align: center;
191 |                 transform: translate(-50%,-50%);
192 |                 background-repeat:no-repeat;
193 |                 background-color: yellow;
194 |             }
195 |         </style>
196 |     </section>
197 | 
198 |     <section class="code-wrap cf">
199 |         <div class="css-live-wrap">
200 |             <summary>简单线性渐变</summary>
201 |             <hgroup class="demo8">
202 |                 <h1>线性渐变</h1>
203 |             </hgroup>
204 |         </div>
205 |         <style class="code" contenteditable="true">
206 |             .demo8{
207 |                 position: absolute;
208 |                 top: 50%;
209 |                 left: 50%;
210 |                 width: 210px;
211 |                 line-height: 210px;
212 |                 background: linear-gradient(90deg, blue 50px, transparent 80px),
213 |                 linear-gradient(90deg, green 50px, purple 80px);
214 |                 text-align: center;
215 |                 transform: translate(-50%,-50%);
216 |                 background-repeat:no-repeat;
217 |                 background-color: yellow;
218 |             }
219 |         </style>
220 |     </section>
221 | </div>
222 | 
223 | </body>
224 | </html>


--------------------------------------------------------------------------------
/layout/README.md:
--------------------------------------------------------------------------------
1 | 几列定宽 几列自适应的布局
2 | 1. margin + float
3 | 2. table-cell(自适应的with 3000 撑开)
4 | 3. float -margin 多列全float 利用-margin 定位置
5 | 4. flex 布局
6 | 5. calc


--------------------------------------------------------------------------------
/layout/adaption/3列/flex.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Title</title>
 6 |     <style>
 7 |         body,html{
 8 |             margin: 0;
 9 |             width: 100%;
10 |             height: 100%;
11 |         }
12 |         .container{
13 |             display: flex ;
14 |             width: 100%;
15 |             height: 100%;
16 |         }
17 |         .left{
18 |             width: 100px;
19 |             height: 100px;
20 |             background: blue;
21 |         }
22 |         .main{
23 |             flex: 1;
24 |             background: yellow;
25 |         }
26 |         .right{
27 |             width: 100px;
28 |             height: 100px;
29 |             background: red;
30 |         }
31 |     </style>
32 | </head>
33 | <body>
34 | <div class="container">
35 |     <div class="left"></div>
36 |     <div class="main"></div>
37 |     <div class="right"></div>
38 | </div>
39 | </body>
40 | </html>


--------------------------------------------------------------------------------
/layout/adaption/3列/float -margin.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Title</title>
 6 |     <style>
 7 |         body,html{
 8 |             margin: 0;
 9 |             width: 100%;
10 |             height: 100%;
11 |         }
12 |         .container{
13 |             width: 100%;
14 |             height: 100%;
15 |             float: left;
16 |             background: pink;
17 |         }
18 |         .left{
19 |             width: 100px;
20 |             height: 100px;
21 |             background: blue;
22 |             float: left;
23 |             margin-left:-100%;
24 |         }
25 |         .main{
26 |             background: yellow;
27 |             height: 100%;
28 |             margin: 0 auto;
29 | 
30 |         }
31 |         .right{
32 |             width: 100px;
33 |             height: 100px;
34 |             background: red;
35 |             float: left;
36 |             margin-left: -100px;
37 |         }
38 |     </style>
39 | </head>
40 | <body>
41 | <div class="container">
42 |     <div class="main"></div>
43 | </div>
44 | <div class="left">left</div>
45 | <div class="right">right</div>
46 | </body>
47 | </html>


--------------------------------------------------------------------------------
/layout/adaption/3列/table-cell.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Title</title>
 6 |     <style>
 7 |         body,html{
 8 |             margin: 0;
 9 |             width: 100%;
10 |             height: 100%;
11 |         }
12 |         .container{
13 |             display: table;
14 |             width: 100%;
15 |             height: 100%;
16 |         }
17 |         .left{
18 |             width: 100px;
19 |             height: 100px;
20 |             background: blue;
21 |             display: table-cell;
22 |         }
23 |         .main{
24 |             width: 3000px;
25 |             height: 100%;
26 |             background: yellow;
27 |             display: table-cell;
28 |         }
29 |         .right{
30 |             width: 100px;
31 |             height: 100px;
32 |             background: red;
33 |             display: table-cell;
34 |         }
35 |     </style>
36 | </head>
37 | <body>
38 | <div class="container">
39 |     <div class="left"></div>
40 |     <div class="main"></div>
41 |     <div class="right"></div>
42 | </div>
43 | </body>
44 | </html>


--------------------------------------------------------------------------------
/layout/adaption/flex.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Title</title>
 6 |     <style>
 7 |         body,html{
 8 |             margin: 0;
 9 |             padding: 0;
10 |             width: 100%;
11 |             height: 100%;
12 |         }
13 |         div.container{
14 |             display: flex;
15 |             width: 100%;
16 |             background: blue;
17 |         }
18 |         div.left{
19 |             width: 100px;
20 |             height: 100px;
21 |             background: red;
22 |         }
23 |         div.right{
24 |             flex: 1;
25 |             background: yellow;
26 |         }
27 |     </style>
28 | </head>
29 | <body>
30 | <div class="container">
31 |     <div class="left">left</div>
32 |     <div class="right">right</div>
33 | </div>
34 | </body>
35 | </html>


--------------------------------------------------------------------------------
/layout/adaption/float -margin.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Title</title>
 6 |     <style>
 7 |         body,html{
 8 |             margin: 0;
 9 |             padding: 0;
10 |             width: 100%;
11 |         }
12 |         .container{
13 |             width: 100%;
14 |             height: 100%;
15 |         }
16 |         .left{
17 |             width: 100%;
18 |             background: red;
19 |             float: left;
20 |             padding-left: 100px;
21 |             box-sizing: border-box;
22 |         }
23 |         .right{
24 |             width: 100px;
25 |             height: 100px;
26 |             background: yellow;
27 |             float: left;
28 |             margin-left: -100%;
29 |         }
30 |     </style>
31 | </head>
32 | <body>
33 | <div class="container">
34 | <div class="left">
35 |     left
36 | </div>
37 | <div class="right">
38 |     <p>right</p>
39 | </div>
40 | </div>
41 | </body>
42 | </html>


--------------------------------------------------------------------------------
/layout/adaption/margin.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Title</title>
 6 |     <style>
 7 |         html,body{
 8 |             margin: 0;
 9 |             padding: 0;
10 |             width: 100%;
11 |         }
12 |         .left{
13 |             width: 100px;
14 |             background: red;
15 |             float: left;
16 | 
17 |         }
18 |         .right{
19 |             margin-left: 100px;
20 |             background: blue;
21 |         }
22 |     </style>
23 | </head>
24 | <body>
25 | <div class="left">
26 | left
27 | </div>
28 | 
29 | <div class="right">
30 | right
31 | right
32 | right
33 | </div>
34 | </body>
35 | </html>


--------------------------------------------------------------------------------
/layout/adaption/table-cell.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Title</title>
 6 |     <style>
 7 |         body,html{
 8 |             margin: 0;
 9 |             padding: 0;
10 |             width: 100%;
11 |         }
12 |         .parent{
13 |             width: 100%;
14 |         }
15 |         .left{
16 |             width: 100px;
17 |             height: 100px;
18 |             background: red;
19 |             display: table-cell;
20 |         }
21 |         .right{
22 |             display: table-cell;
23 |             background: yellow;
24 |             width: 100%;
25 |         }
26 |     </style>
27 | </head>
28 | <body>
29 | <div class="parent">
30 |     <div class="left">
31 |         left
32 |     </div>
33 | 
34 |     <div class="right">
35 |         right
36 |     </div>
37 | </div>
38 | </body>
39 | </html>


--------------------------------------------------------------------------------
/layout/adaption/多列等高布局/flex.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Title</title>
 6 |     <style>
 7 |         body,html{
 8 |             margin: 0;
 9 |             padding: 0;
10 |             width: 100%;
11 |             height: 80%;
12 |         }
13 |         .container{
14 |             display: flex;
15 |             width: 100%;
16 |             height: 100%;
17 |             background: blue;
18 |             justify-content: center;
19 |             flex-wrap: wrap;
20 |             align-items: center;
21 |         }
22 |         .left, .right{
23 |             width: 100px;
24 |             height: 100px;
25 |             margin-right: 300px;
26 |         }
27 |         .left{
28 |             background: red;
29 |         }
30 |         .right{
31 |             background: yellow;
32 |         }
33 |     </style>
34 | </head>
35 | <body>
36 | <div class="container">
37 |     <div class="left">
38 |         <p>left</p>
39 |     </div>
40 |     <div class="right">
41 |         <p>right</p>
42 |         <p>right</p>
43 |         <p>right</p>
44 |     </div>
45 |     <div class="left">
46 |         <p>left</p>
47 |     </div>
48 |     <div class="right">
49 |         <p>right</p>
50 |         <p>right</p>
51 |         <p>right</p>
52 |     </div>
53 |     <div class="left">
54 |         <p>left</p>
55 |     </div>
56 |     <div class="right">
57 |         <p>right</p>
58 |         <p>right</p>
59 |         <p>right</p>
60 |     </div>
61 | </div>
62 | </body>
63 | </html>


--------------------------------------------------------------------------------
/layout/adaption/多列等高布局/margin-padding.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Title</title>
 6 |     <style>
 7 |         body,html{
 8 |             margin: 0;
 9 |             padding: 0;
10 |             width: 100%;
11 |             height: 100%;
12 |         }
13 |         .container{
14 |             overflow: hidden;
15 |         }
16 |         .left, .right{
17 |             padding-bottom: 9999px;
18 |             margin-bottom: -9999px;
19 |             float: left;
20 |         }
21 |         .left{
22 |             background: red;
23 |         }
24 |         .right{
25 |             background: yellow;
26 |         }
27 |     </style>
28 | </head>
29 | <body>
30 | <div class="container">
31 |     <div class="left">
32 |         <p>left</p>
33 |     </div>
34 |     <div class="right">
35 |         <p>right</p>
36 |         <p>right</p>
37 |         <p>right</p>
38 |     </div>
39 | </div>
40 | </body>
41 | </html>


--------------------------------------------------------------------------------
/layout/adaption/多列等高布局/table-cell.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Title</title>
 6 |     <style>
 7 |         body,html{
 8 |             margin: 0;
 9 |             padding: 0;
10 |             width: 100%;
11 |             height: 100%;
12 |         }
13 |         .container{
14 |             display: table;
15 |         }
16 |         .left, .right{
17 |             display: table-cell;
18 |         }
19 |         .left{
20 |             background: red;
21 |         }
22 |         .right{
23 |             background: yellow;
24 |         }
25 |     </style>
26 | </head>
27 | <body>
28 | <div class="container">
29 |     <div class="left">
30 |         <p>left</p>
31 |     </div>
32 |     <div class="right">
33 |         <p>right</p>
34 |         <p>right</p>
35 |         <p>right</p>
36 |     </div>
37 | </div>
38 | </body>
39 | </html>


--------------------------------------------------------------------------------
/macbook/css/index.css:
--------------------------------------------------------------------------------
  1 | @font-face {
  2 |     font-family: Helvetica;
  3 |     src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/164210/HelveticaNeue-UltraLight.otf) format('TrueType');
  4 |     font-weight: 300;
  5 | }
  6 | 
  7 | body {
  8 |     font-family: 'Helvetica', sans-serif;
  9 |     background: #f5f5f5;
 10 |     color: #333;
 11 |     letter-spacing: 1px;
 12 | }
 13 | html,body {
 14 |     height: 100%;
 15 |     margin: 0;
 16 |     padding: 0;
 17 |     overflow: hidden;
 18 | }
 19 | 
 20 | #wrapper{
 21 |     position: absolute;
 22 |     height: 520px;
 23 |     width: 800px;
 24 |     top: 50%;
 25 |     left: 50%;
 26 |     margin-left: -400px;
 27 |     margin-top: -260px;
 28 |     perspective: 6000px;
 29 | }
 30 | 
 31 | #macbook{
 32 |     position: relative;
 33 |     height: 560px;
 34 |     width: 700px;
 35 |     left: 126px;
 36 |     top: -60px;
 37 |     transform: rotateX(54deg) rotateZ(-46deg);
 38 |     transform-style: preserve-3d;
 39 | }
 40 | #shadow{
 41 |     position: relative;
 42 |     height: 560px;
 43 |     width: 700px;
 44 |     top: 5px;
 45 |     left: 0px;
 46 |     transform: translateZ(-17px);
 47 |     transform-style: preserve-3d;
 48 |     box-shadow: #000 0 0 10px 15px;
 49 |     opacity: 0.4;
 50 |     border-top-left-radius: 76px;
 51 |     border-top-right-radius: 200px;
 52 |     border-bottom-left-radius: 40px;
 53 |     border-bottom-right-radius: 56px;
 54 | }
 55 | #side {
 56 |     position: absolute;
 57 |     background: #CDD0D5;
 58 |     width: 730px;
 59 |     height: 580px;
 60 |     top: 5px;
 61 |     left: -26px;
 62 |     border-top-left-radius: 66px;
 63 |     border-bottom-left-radius: 42px;
 64 |     border-bottom-right-radius: 76px;
 65 |     border-top-right-radius: 70px;
 66 |     box-shadow: inset #3D3E42 0 0 15px 6px;
 67 | }
 68 | #battery{
 69 |     position: absolute;
 70 |     top: 75px;
 71 |     left: -34px;
 72 |     height: 40px;
 73 |     width: 16px;
 74 |     background: #909197;
 75 |     transform: rotateY(95deg);
 76 |     transform-origin: right;
 77 |     transform-style: preserve-3d;
 78 |     border-radius: 4px;
 79 | }
 80 | #battery div{
 81 |     position: absolute;
 82 |     left: 50%;
 83 |     top: 50%;
 84 |     transform: translate(-50%, -50%);
 85 |     margin-left: -1px;
 86 |     height: 30px;
 87 |     width: 9px;
 88 |     border-radius: 3px;
 89 |     box-shadow: inset -2px 0px 5px 1px #777, inset -2px 0px 8px #505057;
 90 | }
 91 | #thunderbolt{
 92 |     position: absolute;
 93 |     top: 135px;
 94 |     left: -34px;
 95 | }
 96 | #thunderbolt div{
 97 |     position: absolute;
 98 |     height: 25px;
 99 |     width: 16px;
100 |     background: #909197;
101 |     border-radius: 4px;
102 |     transform: rotateY(95deg);
103 |     transform-origin: right;
104 |     transform-style: preserve-3d;
105 |     box-shadow: inset -2px 0px 5px #909197, inset -2px 0px 6px #505057;
106 | }
107 | #thunderbolt div:last-child{
108 |     position: absolute;
109 |     top: 35px;
110 | }
111 | #display{
112 |     position: absolute;
113 |     top: 210px;
114 |     left: -34px;
115 |     width: 16px;
116 |     height: 45px;
117 |     border-radius: 4px;
118 |     transform: rotateY(95deg);
119 |     transform-origin: right;
120 |     transform-style: preserve-3d;
121 |     box-shadow: inset -2px 0px 8px 2px #777,inset 0px 0px 8px 3px #505057;
122 | }
123 | #volume{
124 |     position: absolute;
125 |     top: 270px;
126 |     left: -34px;
127 |     height: 15px;
128 |     width: 15px;
129 |     border-radius: 50%;
130 |     background: #909197;
131 |     transform: rotateY(95deg);
132 |     transform-origin: right;
133 |     transform-style: preserve-3d;
134 |     box-shadow: inset 2px 0px 5px #777, inset 0px 0px 4px 1px #505057;
135 | }
136 | #front{
137 |     height: 558px;
138 |     width: 698px;
139 |     border-radius: 49px;
140 |     position: absolute;
141 |     background-image: linear-gradient(-27deg,#ddd, silver 35%, silver 45% , #bbb 55%, #909197);
142 |     left: -1px;
143 |     top: 5px;
144 |     box-shadow: inset #777 2px 0 0 4px,2px 0 8px 1px #555;
145 |     transform: translateZ(2px);
146 | }
147 | #apple{
148 |     position: absolute;
149 |     left: 50%;
150 |     top: 50%;
151 |     transform: translate(-50%, -50%) scale(0.8, 0.8);
152 |     width: 125px;
153 |     height: 120px;
154 |     background: black;
155 |     border-top-left-radius: 20% 40%;
156 |     border-bottom-left-radius: 20% 60%;
157 |     border-top-right-radius: 30% 40%;
158 |     border-bottom-right-radius: 40% 70%;
159 | }
160 | #apple-top-left{
161 |     position: absolute;
162 |     left:3px;
163 |     top: -12px;
164 |     width: 80px;
165 |     height: 80px;
166 |     background: black;
167 |     z-index: 2;
168 |     border-radius: 50%;
169 | }
170 | #apple-top-right{
171 |     position: absolute;
172 |     right:0px;
173 |     top: -9px;
174 |     width: 65px;
175 |     height: 65px;
176 |     background: black;
177 |     z-index: 2;
178 |     border-top-right-radius: 60% 60%;
179 |     border-top-left-radius: 50% 50%;
180 |     border-bottom-right-radius: 10% 50%;
181 | }
182 | #apple-bottom-left{
183 |     position: absolute;
184 |     left:2px;
185 |     bottom: -8px;
186 |     width: 65px;
187 |     height: 65px;
188 |     background: black;
189 |     z-index: 2;
190 |     border-bottom-left-radius: 60% 100%;
191 |     border-bottom-right-radius: 50% 50%;
192 | }
193 | #apple-bottom-right{
194 |     position: absolute;
195 |     right:4px;
196 |     bottom: -8px;
197 |     width: 65px;
198 |     height: 65px;
199 |     background: black;
200 |     z-index: 2;
201 |     border-bottom-right-radius: 100% 150%;
202 |     border-bottom-left-radius: 50% 50%;
203 | }
204 | #apple-leaf{
205 |     position: absolute;
206 |     left: 62%;
207 |     top: -65px;
208 |     width: 35px;
209 |     height: 45px;
210 |     border-top-left-radius: 100%;
211 |     border-bottom-right-radius: 100%;
212 |     background: black;
213 |     z-index: 5;
214 |     transform: rotate(12deg);
215 |     transform-origin: left bottom;
216 | }
217 | #apple-right-hole{
218 |     position: absolute;
219 |     top: 20px;
220 |     right: 0;
221 |     background: silver;
222 |     width: 20px;
223 |     height: 60px;
224 |     z-index: 20;
225 |     border-top-left-radius: 100% 50%;
226 |     border-bottom-left-radius: 100% 50%;
227 | }
228 | #open{
229 |     position: absolute;
230 |     bottom: -18px;
231 |     left: 50%;
232 |     width: 100px;
233 |     height: 12px;
234 |     background: #777;
235 |     border-top-left-radius: 10% 100%;
236 |     border-top-right-radius: 2% 100%;
237 |     transform: translateX(-50%) rotateX(90deg);
238 |     box-shadow: inset -2px 0 5px #CCCCCC;
239 | }


--------------------------------------------------------------------------------
/macbook/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Title</title>
 6 |     <link href="css/index.css" rel="stylesheet">
 7 | </head>
 8 | <body>
 9 | <div id="wrapper">
10 |     <div id="macbook">
11 |         <div id="shadow"></div>
12 |         <div id="side"></div>
13 |         <div id="battery">
14 |             <div></div>
15 |         </div>
16 |         <div id="thunderbolt">
17 |             <div></div>
18 |             <div></div>
19 |         </div>
20 |         <div id="open"></div>
21 |         <div id="display"></div>
22 |         <div id="volume"></div>
23 |         <div id="front">
24 |             <div id="apple">
25 |                 <div id="apple-leaf"></div>
26 |                 <div id="apple-top-left"></div>
27 |                 <div id="apple-top-right"></div>
28 |                 <div id="apple-bottom-left"></div>
29 |                 <div id="apple-bottom-right"></div>
30 |                 <div id="apple-right-hole"></div>
31 |             </div>
32 |         </div>
33 |     </div>
34 | </div>
35 | </body>
36 | </html>


--------------------------------------------------------------------------------
/minion/js/minion.js:
--------------------------------------------------------------------------------
  1 | var canvas = document.querySelector('canvas'),
  2 |     ctx = canvas.getContext('2d');
  3 | 
  4 |     //head
  5 |     ctx.beginPath();
  6 |     ctx.moveTo(200, 100);
  7 |     ctx.bezierCurveTo(200, -10, 400, -10, 400, 100);
  8 |     ctx.stroke();
  9 | 
 10 |     //body
 11 |     ctx.moveTo(200, 100);
 12 |     ctx.lineTo(200, 250);
 13 |     ctx.lineTo(400, 250);
 14 |     ctx.lineTo(400, 100);
 15 |     ctx.fill();
 16 | 
 17 |     ctx.moveTo(200, 250);
 18 |     ctx.bezierCurveTo(200, 365, 400, 365, 400, 250);
 19 |     ctx.stroke();
 20 |     ctx.fillStyle = 'yellow';
 21 |     ctx.fill();
 22 | 
 23 | 
 24 |     //头发
 25 |     ctx.beginPath();
 26 |     ctx.moveTo(275, 19);
 27 |     ctx.quadraticCurveTo(245, -10, 205, 17);
 28 |     ctx.quadraticCurveTo(245, -5, 268, 22);
 29 |     ctx.fillStyle = 'black';
 30 |     ctx.fill();
 31 |     ctx.stroke();
 32 | 
 33 |     ctx.beginPath();
 34 |     ctx.moveTo(270, 22);
 35 |     ctx.quadraticCurveTo(240, 0, 218, 30);
 36 |     ctx.quadraticCurveTo(240, 5, 262, 22);
 37 |     ctx.fillStyle = 'black';
 38 |     ctx.fill();
 39 |     ctx.stroke();
 40 | 
 41 |     //画眼线
 42 |     ctx.beginPath();
 43 |     ctx.moveTo(200, 100);
 44 |     ctx.bezierCurveTo(200, 115, 400, 115, 400, 100);
 45 |     ctx.lineTo(400, 120);
 46 |     ctx.bezierCurveTo(400, 135, 200, 135, 200, 120);
 47 |     ctx.lineTo(200, 100);
 48 |     ctx.fillStyle = 'black';
 49 |     ctx.fill();
 50 |     ctx.stroke();
 51 | 
 52 |     //画左眼睛
 53 |     ctx.beginPath();
 54 |     ctx.arc(262, 118, 35, 0, Math.PI * 2);
 55 |     ctx.stroke();
 56 |     ctx.fillStyle = 'white';
 57 |     ctx.fill();
 58 | 
 59 |     //画右眼睛
 60 |     ctx.beginPath();
 61 |     ctx.arc(338, 118, 35, 0, Math.PI * 2);
 62 |     ctx.stroke();
 63 |     ctx.fillStyle = 'white';
 64 |     ctx.fill();
 65 | 
 66 |     //画左眼珠
 67 |     ctx.beginPath();
 68 |     ctx.arc(260, 118, 15, 0, Math.PI * 2);
 69 |     ctx.stroke();
 70 |     ctx.fillStyle = 'black';
 71 |     ctx.fill();
 72 | 
 73 |     //画右眼珠
 74 |     ctx.beginPath();
 75 |     ctx.arc(340, 118, 15, 0, Math.PI * 2);
 76 |     ctx.stroke();
 77 |     ctx.fillStyle = 'black';
 78 |     ctx.fill();
 79 | 
 80 |     //左眼留白
 81 |     ctx.beginPath();
 82 |     ctx.arc(266, 110, 5, 0, Math.PI * 2);
 83 |     ctx.stroke();
 84 |     ctx.fillStyle = 'white';
 85 |     ctx.fill();
 86 | 
 87 |     //右眼留白
 88 |     ctx.beginPath();
 89 |     ctx.arc(346, 110, 5, 0, Math.PI * 2);
 90 |     ctx.stroke();
 91 |     ctx.fillStyle = 'white';
 92 |     ctx.fill();
 93 | 
 94 |     //嘴
 95 |     ctx.beginPath();
 96 |     ctx.moveTo(275, 170);
 97 |     ctx.lineTo(325, 170);
 98 |     ctx.stroke();
 99 |     ctx.moveTo(275, 170);
100 |     ctx.bezierCurveTo(275, 190, 310, 195, 325, 170);
101 |     ctx.stroke();
102 |     ctx.fillStyle = 'white';
103 |     ctx.fill();
104 | 
105 | 
106 |     //裤子
107 |     ctx.beginPath();
108 |     ctx.moveTo(200, 250);
109 |     ctx.lineTo(230, 250);
110 |     ctx.lineTo(230, 200);
111 |     ctx.lineTo(375, 200);
112 |     ctx.lineTo(375, 250);
113 |     ctx.lineTo(400, 250);
114 |     ctx.fill();
115 |     ctx.moveTo(200, 250);
116 |     ctx.bezierCurveTo(200, 365, 400, 365, 400, 250);
117 |     ctx.fillStyle = 'blue';
118 |     ctx.fill();
119 |     ctx.stroke();
120 | 
121 |     //左裤带
122 |     ctx.beginPath();
123 |     ctx.moveTo(200, 175);
124 |     ctx.lineTo(200, 189);
125 |     ctx.lineTo(250, 217);
126 |     ctx.lineTo(255, 205)
127 |     ctx.lineTo(200, 175);
128 |     ctx.fillStyle = 'blue';
129 |     ctx.fill();
130 |     ctx.stroke();
131 | 
132 |     ctx.beginPath();
133 |     ctx.fillStyle = "black";
134 |     ctx.arc(245, 206, 3, 0, Math.PI * 2);
135 |     ctx.fill();
136 | 
137 |     //右裤带
138 |     ctx.beginPath();
139 |     ctx.moveTo(400, 175);
140 |     ctx.lineTo(400, 189);
141 |     ctx.lineTo(350, 217);
142 |     ctx.lineTo(345, 205)
143 |     ctx.lineTo(400, 175);
144 |     ctx.fillStyle = 'blue';
145 |     ctx.fill();
146 |     ctx.stroke();
147 | 
148 |     ctx.beginPath();
149 |     ctx.fillStyle = "black";
150 |     ctx.arc(355, 206, 3, 0, Math.PI * 2);
151 |     ctx.closePath();
152 |     ctx.fill();
153 | 
154 |     //左手
155 |     ctx.beginPath();
156 |     ctx.moveTo(199, 191);
157 |     ctx.lineTo(178, 215);
158 |     ctx.quadraticCurveTo(174, 220, 178, 225);
159 |     ctx.lineTo(199, 245);
160 |     ctx.fillStyle = 'yellow';
161 |     ctx.fill();
162 |     ctx.stroke();
163 | 
164 | 
165 |     ctx.moveTo(200, 210);
166 |     ctx.lineTo(197, 213);
167 |     ctx.stroke();
168 | 
169 |     //右手
170 | 
171 |     ctx.moveTo(401, 191);
172 |     ctx.lineTo(422, 215);
173 |     ctx.quadraticCurveTo(426, 220, 420, 225);
174 |     ctx.lineTo(401, 245);
175 |     ctx.fillStyle = 'yellow';
176 |     ctx.fill();
177 |     ctx.stroke();
178 | 
179 | 
180 |     ctx.moveTo(400, 210);
181 |     ctx.lineTo(403, 213);
182 |     ctx.stroke();
183 | 
184 |     //口袋
185 |     ctx.beginPath();
186 |     ctx.moveTo(275, 235);
187 |     ctx.lineTo(325, 235);
188 |     ctx.lineTo(325, 265);
189 |     ctx.quadraticCurveTo(300, 285, 275, 265);
190 |     ctx.lineTo(275, 235);
191 |     ctx.stroke();
192 | 
193 |     //裤子上的线
194 |     ctx.moveTo(300, 300);
195 |     ctx.lineTo(300, 335);
196 |     ctx.stroke();
197 | 
198 |     ctx.moveTo(205, 280);
199 |     ctx.quadraticCurveTo(220, 280, 225, 265);
200 |     ctx.stroke();
201 | 
202 |     ctx.moveTo(395, 280);
203 |     ctx.quadraticCurveTo(380, 280, 375, 265);
204 |     ctx.stroke();
205 | 
206 |     //左脚
207 |     ctx.beginPath();
208 |     ctx.moveTo(265, 332);
209 |     ctx.lineTo(265, 343);
210 |     ctx.lineTo(240, 341);
211 |     ctx.quadraticCurveTo(220, 350, 238, 363);
212 |     ctx.lineTo(290, 365)
213 |     ctx.lineTo(290, 335);
214 |     ctx.fillStyle = "black";
215 |     ctx.fill();
216 |     ctx.stroke();
217 | 
218 |     //右脚
219 |     ctx.beginPath();
220 |     ctx.moveTo(335, 332);
221 |     ctx.lineTo(335, 343);
222 |     ctx.lineTo(360, 341);
223 |     ctx.quadraticCurveTo(380, 350, 362, 363);
224 |     ctx.lineTo(310, 365)
225 |     ctx.lineTo(310, 335);
226 |     ctx.fillStyle = "black";
227 |     ctx.fill();
228 |     ctx.stroke();


--------------------------------------------------------------------------------
/minion/minion.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Title</title>
 6 |     <link rel="stylesheet" href="style/index.css">
 7 | </head>
 8 | <body>
 9 |     <div id="container">
10 |         <canvas width="600" height="500"></canvas>
11 |     </div>
12 |     <script src="js/minion.js"></script>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/minion/style/index.css:
--------------------------------------------------------------------------------
 1 | html,body {
 2 |     width: 100%;
 3 |     height: 100%;
 4 |     margin: 0;
 5 |     padding: 0;
 6 |     overflow: hidden;
 7 | }
 8 | 
 9 | div{
10 |     position: relative;
11 |     width: 100%;
12 |     height: 100%;
13 |     overflow: hidden;
14 |     display: flex;
15 |     justify-content: center;
16 |     align-items: center;
17 | }


--------------------------------------------------------------------------------
/text/clip-text.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Tri</title>
 6 |     <style>
 7 |         body{
 8 |             position: relative;
 9 |             width: 100vw;
10 |             height: 100vh;
11 |             margin: 0;
12 |             padding: 0;
13 |             text-align: center;
14 |             background: black;
15 |         }
16 |         div.wrapper{
17 |             position: absolute;
18 |             top: 30%;
19 |             left:50%;
20 |             transform: translateX(-50%) translateY(-50%);
21 |             text-align: center;
22 |             font-size: 180px;
23 |             font-weight: bold;
24 |             color: transparent;
25 |             background: url(timg.jpg)  center/cover no-repeat;
26 |             -webkit-background-clip: text;
27 |             animation: move 3s infinite ease-in-out;
28 |             animation-direction: alternate;
29 |             ;
30 |         }
31 | 
32 |         @keyframes move {
33 |             0%{
34 |                 background-position: 0 0;
35 |             }
36 | 
37 |             50%{
38 |                background-position: center center;
39 |             }
40 | 
41 |             100%{
42 |                 background-position: 100% 100%;
43 |             }
44 |         }
45 | 
46 |         @keyframes bgposition {
47 |             0% {
48 |                 background-position: 100% 0;
49 |             }
50 |             100% {
51 |                 background-position: 0 0;
52 |             }
53 |         }
54 | 
55 |         div.nickName{
56 |             position: absolute;
57 |             top: 50%;
58 |             left: 50%;
59 |             transform: translateX(-50%) translateY(-50%);
60 |             text-align: center;
61 |             font-size: 180px;
62 |             font-weight: bold;
63 |             color: transparent;
64 |             background: linear-gradient(90deg,  #6f27b0 0%, rgba(0,0,0, 0.2) 50%, #CCCCCC 50%, #cb72aa 60%, #cb72aa 60%, #16a085 70%,#16a085 70%, #94e458 80%,
65 |             #94e458 80%, #ffa260 90%, #ffa260 90%, #CCCCCC 100%);
66 |             background-size: 200% 100%;
67 |             -webkit-background-clip: text;
68 |             animation:  bgposition 3s infinite ease-in-out;
69 |             animation-direction: alternate;
70 |         }
71 |     </style>
72 | </head>
73 | <body>
74 | <div class="wrapper">
75 |     SHADOW
76 | </div>
77 | <div class="nickName">
78 |     WALKER
79 | </div>
80 | </body>
81 | </html>


--------------------------------------------------------------------------------
/text/timg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FounderIsShadowWalker/CSS-note/c49eba0a7c325a42f971e90b215819fef7ab771a/text/timg.jpg


--------------------------------------------------------------------------------