├── christmas ├── .gitignore ├── .sass-cache │ └── 15d8c244cf2d78c268141cba1aea96bb05465346 │ │ └── index.scssc ├── package.json ├── gulpfile.js ├── index.html ├── index.scss └── dist │ └── css │ └── index.css ├── README.md ├── text ├── timg.jpg └── clip-text.html ├── center ├── one.jpg ├── 居中.html ├── flex.html └── README.md ├── cssShape ├── static │ ├── images │ │ ├── exp.jpg │ │ ├── logo.jpg │ │ ├── logo.png │ │ └── forkme.png │ └── css │ │ ├── reset.css │ │ └── index.css ├── README.md └── html │ └── index.html ├── interestingNote └── 条状背景 │ ├── img │ ├── forkme.png │ ├── graphic1.jpg │ ├── graphic2.jpg │ ├── graphic3.jpg │ ├── graphic4.jpg │ └── graphic5.jpg │ ├── test │ ├── index.css │ ├── reset.css │ └── test.html │ └── README.md ├── layout ├── README.md └── adaption │ ├── margin.html │ ├── flex.html │ ├── table-cell.html │ ├── 多列等高布局 │ ├── table-cell.html │ ├── margin-padding.html │ └── flex.html │ ├── 3列 │ ├── flex.html │ ├── table-cell.html │ └── float -margin.html │ └── float -margin.html ├── hexagon-grid-w-hover ├── README.txt ├── license.txt ├── scss │ └── style.scss ├── css │ └── style.css └── index.html ├── minion ├── style │ └── index.css ├── minion.html └── js │ └── minion.js ├── frost_glass ├── README.md └── frost_glass.html ├── hiddenface ├── rain.scss ├── index.html ├── rain.css.map ├── rain.css └── index.js ├── macbook ├── index.html └── css │ └── index.css └── heart └── index.html /christmas/.gitignore: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSS-note 2 | CSS笔记 3 | -------------------------------------------------------------------------------- /text/timg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FounderIsShadowWalker/CSS-note/HEAD/text/timg.jpg -------------------------------------------------------------------------------- /center/one.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FounderIsShadowWalker/CSS-note/HEAD/center/one.jpg -------------------------------------------------------------------------------- /cssShape/static/images/exp.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FounderIsShadowWalker/CSS-note/HEAD/cssShape/static/images/exp.jpg -------------------------------------------------------------------------------- /cssShape/static/images/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FounderIsShadowWalker/CSS-note/HEAD/cssShape/static/images/logo.jpg -------------------------------------------------------------------------------- /cssShape/static/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FounderIsShadowWalker/CSS-note/HEAD/cssShape/static/images/logo.png -------------------------------------------------------------------------------- /cssShape/static/images/forkme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FounderIsShadowWalker/CSS-note/HEAD/cssShape/static/images/forkme.png -------------------------------------------------------------------------------- /interestingNote/条状背景/img/forkme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FounderIsShadowWalker/CSS-note/HEAD/interestingNote/条状背景/img/forkme.png -------------------------------------------------------------------------------- /interestingNote/条状背景/img/graphic1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FounderIsShadowWalker/CSS-note/HEAD/interestingNote/条状背景/img/graphic1.jpg -------------------------------------------------------------------------------- /interestingNote/条状背景/img/graphic2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FounderIsShadowWalker/CSS-note/HEAD/interestingNote/条状背景/img/graphic2.jpg -------------------------------------------------------------------------------- /interestingNote/条状背景/img/graphic3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FounderIsShadowWalker/CSS-note/HEAD/interestingNote/条状背景/img/graphic3.jpg -------------------------------------------------------------------------------- /interestingNote/条状背景/img/graphic4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FounderIsShadowWalker/CSS-note/HEAD/interestingNote/条状背景/img/graphic4.jpg -------------------------------------------------------------------------------- /interestingNote/条状背景/img/graphic5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FounderIsShadowWalker/CSS-note/HEAD/interestingNote/条状背景/img/graphic5.jpg -------------------------------------------------------------------------------- /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 -------------------------------------------------------------------------------- /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 -------------------------------------------------------------------------------- /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 -------------------------------------------------------------------------------- /christmas/.sass-cache/15d8c244cf2d78c268141cba1aea96bb05465346/index.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FounderIsShadowWalker/CSS-note/HEAD/christmas/.sass-cache/15d8c244cf2d78c268141cba1aea96bb05465346/index.scssc -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /minion/minion.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 |
10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /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']) -------------------------------------------------------------------------------- /frost_glass/README.md: -------------------------------------------------------------------------------- 1 | ##制作毛玻璃效果 2 | 制作毛玻璃的思路很简单，就是利用伪类，生成和body一样的背景，然后让他的伪类模糊掉就好。当然模糊会削减，削减的幅度就是模糊半径，所以最直接就是不设width，用-margin 撑开来，对于多出来的模糊范围直接在父标签上overflow 就好了。 3 | 4 | 5 | ###思路就是这样,But.......... 6 | 出现的问题 7 | 8 | + 怎么生成和背景相同的背景 9 | background 一样 带cover(显示屏一般宽更长)，但是这样不会无缝连上，完全是两张独立的图片。 10 | ####background-attachment: fixed; 11 | 定义: 规定背景图像是否固定或者随着页面的其余部分滚动。 12 | 13 | 其实w3c的定义完全没什么软用。attachment的作用是把目前的背景相对于body作为背景时位置显示的图片。 14 | 15 | + 这个问题很有意思，是你打开网页调试工具，图片高度没有显示全，原因很简单，你background-size 用的cover，cover的优先级是宽。自然不会缩放。 16 | 最好的方法是使用vh，这个css3的新大小属性，可以把长度定位在当前视窗之中 100vh 相当于 100%。而你打开调试工具的时候，是不属于当前视窗的，就会把高度显示全。 17 | -------------------------------------------------------------------------------- /center/居中.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 21 | 22 | 23 | 24 |
25 | 12345 26 |
27 | 28 | -------------------------------------------------------------------------------- /layout/adaption/margin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 23 | 24 | 25 |
26 | left 27 |
28 | 29 |
30 | right 31 | right 32 | right 33 |
34 | 35 | -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /layout/adaption/flex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 28 | 29 | 30 |
31 |
left
32 |
right
33 |
34 | 35 | -------------------------------------------------------------------------------- /layout/adaption/table-cell.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 27 | 28 | 29 |
30 |
31 | left 32 |
33 | 34 |
35 | right 36 |
37 |
38 | 39 | -------------------------------------------------------------------------------- /layout/adaption/多列等高布局/table-cell.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 26 | 27 | 28 |
29 |
30 |

left

31 |
32 |
33 |

right

34 |

right

35 |

right

36 |
37 |
38 | 39 | -------------------------------------------------------------------------------- /center/flex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 24 | 25 | 26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 | 38 | -------------------------------------------------------------------------------- /layout/adaption/3列/flex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 32 | 33 | 34 |
35 |
36 |
37 |
38 |
39 | 40 | -------------------------------------------------------------------------------- /layout/adaption/多列等高布局/margin-padding.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 28 | 29 | 30 |
31 |
32 |

left

33 |
34 |
35 |

right

36 |

right

37 |

right

38 |
39 |
40 | 41 | -------------------------------------------------------------------------------- /layout/adaption/float -margin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 31 | 32 | 33 |
34 |
35 | left 36 |
37 |
38 |

right

39 |
40 |
41 | 42 | -------------------------------------------------------------------------------- /macbook/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 | 36 | -------------------------------------------------------------------------------- /layout/adaption/3列/table-cell.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 36 | 37 | 38 |
39 |
40 |
41 |
42 |
43 | 44 | -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /hexagon-grid-w-hover/license.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 13 | -------------------------------------------------------------------------------- /layout/adaption/3列/float -margin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 39 | 40 | 41 |
42 |
43 |
44 |
left
45 |
right
46 | 47 | -------------------------------------------------------------------------------- /layout/adaption/多列等高布局/flex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 34 | 35 | 36 |
37 |
38 |

left

39 |
40 |
41 |

right

42 |

right

43 |

right

44 |
45 |
46 |

left

47 |
48 |
49 |

right

50 |

right

51 |

right

52 |
53 |
54 |

left

55 |
56 |
57 |

right

58 |

right

59 |

right

60 |
61 |
62 | 63 | -------------------------------------------------------------------------------- /christmas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 | 47 | 48 | -------------------------------------------------------------------------------- /hiddenface/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 29 | 30 | 31 | 32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 | 55 | 56 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /frost_glass/frost_glass.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 45 | 46 | 47 |
48 |
“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.” 50 | 51 |
52 |
53 | 54 | -------------------------------------------------------------------------------- /heart/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Heart 6 | 70 | 71 | 72 |
73 |
74 |
75 |
76 |
77 | 78 | -------------------------------------------------------------------------------- /text/clip-text.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tri 6 | 72 | 73 | 74 |
75 | SHADOW 76 |
77 |
78 | WALKER 79 |
80 | 81 | -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /interestingNote/条状背景/README.md: -------------------------------------------------------------------------------- 1 | ##CSS 线性渐变 2 | 这里只讨论w3c的属性，各个浏览器私有实现，这里不讨论，未来的css属性一定会遵照w3c的规定发展的 3 | 4 | 先看MDN的定义 5 | 6 | 渐变线由包含渐变图形的容器的中心点和一个角度来定义的。渐变线上的颜色值是由不同的点来定义，包括起始点，终点，以及两者之间的可选的中间点（中间点可以有多个）。 7 | 8 | 起始点是渐变线上代表起始颜色值的点。起始点由渐变线和过容器顶点的垂直线之间的交叉点来定义。（垂直线跟渐变线在同一象限内） 9 | 10 | 同样的，终点是渐变线上代表最终颜色值的点。终点也是由渐变线和从最近的顶点发出的垂直线之间的交叉点定义的，然而从起始点的对称点来定义终点是更容易理解的一种方式，因为终点是起点关于容器的中心点的反射点。 11 | 12 | 这里首先挑明一点，线性渐变创建了一个呈现线性渐变的 而不是css 这就意味着它会受到 background-repeat 和 background-position 的 调整 13 | 14 | MDN 的 API 15 | 16 | linear-gradient([angle| to <side-or-corner>,]?, <color-stop> [, <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 | -------------------------------------------------------------------------------- /hiddenface/rain.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": ["rain.scss"], 5 | "names": [], 6 | "file": "rain.css" 7 | } -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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(); -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /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 | 
 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 |
31 | 32 | 2.子级 postion: static 的居中方法。 33 | 34 | 
 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 |
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 | 
 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 |
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 | 
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 |
133 | 134 | 显然这样的居中有好有坏，好处自然是没有 ie8 的坎, 但是却多出来了一个标签，先前仿 Tumblr 的时候，发现里面的前端喜欢这样,至于好坏大家拿捏吧。 135 | 136 | 最后有一种懒人居中法，适应于你不想使用以上两种方法，然后想取巧的话，当然适用方法只适用于内标签为absolute 情况. 137 | 138 | 
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 |
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 | 
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 |
200 | 201 | 多个子div的实现也很简单 202 | 这里 提一下 flex-direction 默认为 row 也就是横轴为主轴，改成 column 后，align-item 与justify-content 就交换了。 203 | 204 | 
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 |
221 | 222 | ##inline-block 在 block的居中 223 | 1. table-cell 和 inline-block 相仿，我们看到td 并不存在换行的现象 224 | 2. 我们以一般的角度来看看如何实现 225 | 226 | 首先需要一个basic 高100% 来作为基准，然后设置vertical-aligin: middle 来对齐basic的中部 227 | 228 | 
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 |
257 | 258 | 259 | 最后一个inline 居中了 主要应用 line-height 上下间距加起来等于父类的高度 就能实现居中了 260 | 261 | 
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 |
276 | 当然把inline 变成 inline-block 居中自然也是可以的，也比较推崇这种，因为往往父类的高度是不固定的，需要做出自适应，第一种方案就能完美解决了。 277 | 278 | 279 | 居中的方案大致就这些了，大家晚安。 -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /interestingNote/条状背景/test/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 线性渐变demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 简单线性渐变 17 |
18 |

线性渐变

19 |
20 |
21 | 33 |
34 | 35 |
36 |
37 | 简单线性渐变 38 |
39 |

线性渐变

40 |
41 |
42 | 54 |
55 | 56 |
57 |
58 | 简单线性渐变 59 |
60 |

线性渐变

61 |
62 |
63 | 77 |
78 | 79 |
80 |
81 | 简单线性渐变 82 |
83 |

线性渐变

84 |
85 |
86 | 101 |
102 | 103 |
104 |
105 | 简单线性渐变 106 |
107 |

线性渐变

108 |
109 |
110 | 125 |
126 | 127 |
128 |
129 | 简单线性渐变 130 |
131 |

线性渐变

132 |
133 |
134 | 149 |
150 | 151 |
152 |
153 | 简单线性渐变 154 |
155 |

线性渐变

156 |
157 |
158 | 172 |
173 | 174 |
175 |
176 | 简单线性渐变 177 |
178 |

线性渐变

179 |
180 |
181 | 196 |
197 | 198 |
199 |
200 | 简单线性渐变 201 |
202 |

线性渐变

203 |
204 |
205 | 220 |
221 |
222 | 223 | 224 | -------------------------------------------------------------------------------- /hexagon-grid-w-hover/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hexagon Grid w/ Hover 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 | 19 | 20 |
21 |
22 |
23 |

Title

24 |

description

25 |
26 |
27 |
28 |
29 |
30 |
31 |

Title

32 |

description

33 |
34 |
35 |
36 |
37 |
38 | 39 | 40 | 41 |
42 |
43 |
44 |

Title

45 |

description

46 |
47 |
48 |
49 |
50 |
51 |
52 |

Title

53 |

description

54 |
55 |
56 |
57 |
58 |
59 | 60 | 61 | 62 |
63 |
64 |
65 |

Title

66 |

description

67 |
68 |
69 |
70 |
71 |
72 |
73 |

Title

74 |

description

75 |
76 |
77 |
78 |
79 |
80 | 81 |
82 |
83 | 84 |
85 |
86 |
87 |

Title

88 |

description

89 |
90 |
91 |
92 |
93 |
94 |
95 |

Title

96 |

description

97 |
98 |
99 |
100 |
101 |
102 | 103 | 104 | 105 |
106 |
107 |
108 |

Title

109 |

description

110 |
111 |
112 |
113 |
114 |
115 |
116 |

Title

117 |

description

118 |
119 |
120 |
121 |
122 |
123 | 124 |
125 |
126 | 127 |
128 |
129 |
130 |

Title

131 |

description

132 |
133 |
134 |
135 |
136 |
137 |
138 |

Title

139 |

description

140 |
141 |
142 |
143 |
144 |
145 | 146 | 147 | 148 |
149 |
150 |
151 |

Title

152 |

description

153 |
154 |
155 |
156 |
157 |
158 |
159 |

Title

160 |

description

161 |
162 |
163 |
164 |
165 |
166 | 167 | 168 | 169 |
170 |
171 |
172 |

Title

173 |

description

174 |
175 |
176 |
177 |
178 |
179 |
180 |

Title

181 |

description

182 |
183 |
184 |
185 |
186 |
187 | 188 |
189 |
190 | 191 |
192 |
193 |
194 |

Title

195 |

description

196 |
197 |
198 |
199 |
200 |
201 |
202 |

Title

203 |

description

204 |
205 |
206 |
207 |
208 |
209 | 210 | 211 | 212 |
213 |
214 |
215 |

Title

216 |

description

217 |
218 |
219 |
220 |
221 |
222 |
223 |

Title

224 |

description

225 |
226 |
227 |
228 |
229 |
230 | 231 |
232 |
233 | 234 |
235 |
236 |
237 |

Title

238 |

description

239 |
240 |
241 |
242 |
243 |
244 |
245 |

Title

246 |

description

247 |
248 |
249 |
250 |
251 |
252 | 253 | 254 | 255 |
256 |
257 |
258 |

Title

259 |

description

260 |
261 |
262 |
263 |
264 |
265 |
266 |

Title

267 |

description

268 |
269 |
270 |
271 |
272 |
273 | 274 | 275 | 276 |
277 |
278 |
279 |

Title

280 |

description

281 |
282 |
283 |
284 |
285 |
286 |
287 |

Title

288 |

description

289 |
290 |
291 |
292 |
293 |
294 | 295 |
296 |
297 | 298 |
299 |
300 |
301 |

Title

302 |

description

303 |
304 |
305 |
306 |
307 |
308 |
309 |

Title

310 |

description

311 |
312 |
313 |
314 |
315 |
316 | 317 | 318 |
319 |
320 |
321 |

Title

322 |

description

323 |
324 |
325 |
326 |
327 |
328 |
329 |

Title

330 |

description

331 |
332 |
333 |
334 |
335 |
336 | 337 | 338 |
339 |
340 | 341 | 342 | 343 | 344 | -------------------------------------------------------------------------------- /cssShape/html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | CSS 奇思妙想 9 | 10 | 11 | 12 | 13 |

CSS3奇思妙想, 使用CSS3实现各类图形

14 | 15 | 16 | 17 |
18 | 19 | 20 |
21 |
22 | 心形 23 | 利用 圆形 和 正方形实现 24 |
25 |

.heartShaped

26 |
27 |
28 | 60 |
61 | 62 | 63 |
64 |
65 | 气泡三角形 66 | 利用 border 的 transparent 特性实现 67 |
68 |

.bubbly

69 |
70 |
71 | 97 |
98 | 99 | 100 |
101 |
102 |
103 | 切角 104 | 使用线性渐变实现 105 |
106 |

.notching

107 |
108 |
109 | 132 |
133 | 134 | 135 |
136 |
137 |
138 | 弧形切角 139 | 使用径向渐变实现 140 |
141 |

.arc

142 |
143 |
144 | 171 |
172 | 173 | 174 |
175 |
176 | 单个颜色实现 hover 和 active 时的明暗变化效果 177 | 利用伪类 及 透明度实现 178 |
179 |

.pesudo

180 |
181 |
182 | 208 |
209 | 210 | 211 |
212 |
213 | 梯形 214 | 利用伪类加旋转透视 215 |
216 |

.trapezoid

217 |
218 |
219 | 241 |
242 | 243 | 244 |
245 |
246 |
247 | 饼图 248 | 利用伪类、线性渐变、旋转实现 249 |
250 |

.pie

251 |
252 |
253 | 288 |
289 | 290 | 291 |
292 |
293 | 平行四边形 294 | 利用伪类、拉伸实现 295 |
296 |

.parallelogram

297 |
298 |
299 | 323 |
324 | 325 | 326 |
327 |
328 | 菱形 329 | 利用伪类、旋转实现 330 |
331 |

.diamond

332 |
333 |
334 | 358 |
359 | 360 | 361 |
362 |
363 |
364 | 折角 365 | 利用切角、伪类、渐变、旋转实现 366 |
367 |

.corner

368 |
369 |
370 | 401 |
402 | 403 | 404 |
405 |
406 |
407 | 下划线 408 | 利用 background-image 实现 409 |
410 |

.underline1-ajkpys

411 |
412 |
413 | 445 |
446 | 447 | 448 |
449 |
450 | spectiveBlur 451 | 纯 CSS 方案实现背景变暗效果（hover按钮触发） 452 |
453 |

.spectiveBlur

454 |
455 |
456 | 477 |
478 | 479 | 480 |
481 |
482 |
483 | 条纹背景图 484 | 利用渐变实现 485 |
486 |

.stripe

487 |
488 |
489 | 507 |
508 | 509 | 510 |
511 |
512 | 条纹背景图 513 | 利用渐变实现 514 |
515 |

.wave-stripe

516 |
517 |
518 | 539 |
540 | 541 | 542 |
543 |
544 | 条纹背景图 545 | 利用渐变实现 546 |
547 |

.arrow-stripe

548 |
549 |
550 | 570 |
. 571 | 572 | 573 |
574 |
575 | 混合模式背景图 576 | 利用渐变实现 577 |
578 |

.colorful-stripe

579 |
580 |
581 | 600 |
601 | 602 | 603 |
604 |
605 |
606 | 随机背景图 607 | 利用渐变、蝉随机实现 608 |
609 |

.random-stripe

610 |
611 |
612 | 633 |
634 | 635 | 636 |
637 |
638 | 晴天（sun）（单标签实现） 639 | 利用线性渐变、阴影、旋转实现 640 |
641 |

.sun

642 |
643 |
644 | 697 |
698 | 699 | 700 |
701 |
702 | 多云（cloudy）（单标签实现） 703 | 利用线性渐变、阴影、缩放实现 704 |
705 |

.cloudy

706 |
707 |
708 | 772 |
773 | 774 | 775 |
776 |
777 | 多云（cloudy2）（单标签实现） 778 | 利用线性渐变、阴影、缩放实现 779 |
780 |

.cloudy2

781 |
782 |
783 | 842 |
843 | 844 | 845 |
846 |
847 | 雨（rainy） 848 | 利用线性渐变、阴影、缩放实现 849 |
850 |

.rainy

851 |
852 |
853 |
854 | 951 |
952 | 953 | 954 |
955 |
956 | 微风（breeze） 957 | 利用border、transparent、实现 958 |
959 |

.breeze

960 |
961 |
962 |
963 | 1026 |
1027 | 1028 | 1029 |
1030 |
1031 | 彩虹（rainbow） 1032 | 利用border、box-shadow 实现 1033 |
1034 |

.rainbow

1035 |
1036 |
1037 |
1038 | 1110 |
1111 | 1112 | 1113 |
1114 |
1115 | 夜空璀璨（starry） 1116 | 利用 box-shadow 实现 1117 |
1118 |

.starry

1119 |
1120 |
1121 |
1122 | 1199 |
1200 | 1201 | 1202 |
1203 |
1204 | 雷电（thunder） 1205 | 利用阴影、border实现 1206 |
1207 |

.thunder

1208 |
1209 |
1210 |
1211 | 1288 |
1289 | 1290 | 1291 |
1292 |
1293 | 雪（snowy） 1294 | 利用阴影实现 1295 |
1296 |

.snowy

1297 |
1298 |
1299 |
1300 | 1457 |
1458 | 1459 | 1460 |
1461 |
1462 | 五角星（单标签实现） 1463 | 利用border、transparent、旋转实现 1464 |
1465 |

1466 |
1467 |
1468 | 1515 |
1516 | 1517 | 1518 |
1519 |
1520 | 太极图（单标签实现） 1521 | 利用 box-shadow 实现 1522 |
1523 |

1524 |
1525 |
1526 | 1544 |
1545 | 1546 | 1547 |
1548 |
1549 | 美队盾牌（单标签实现） 1550 | 利用 渐变 实现 1551 |
1552 |
1553 |
1554 | 1591 |
1592 |
1593 | 1594 | --------------------------------------------------------------------------------