共计 5042 个字符，预计需要花费 13 分钟才能阅读完成。
今天在学习的时候发现自己居然不知道 css 可以使用变量来引用一个值。所以决定做一个小案例。刚好之前也了解到新出的 grid 布局很好用，这里我就结合一下两个我不熟悉的知识点，给大家画一只可爱的小企鹅。欢迎大家指正错误。我们共同进步吧！
1.grid 实现”9 宫格“- 小企鹅是基于下图的九宫格来展开的。
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>CSS 变量加 grid 画一只企鹅 </title> | |
| <style> | |
| .penguin { | |
| width: 300px; | |
| height: 300px; | |
| display: grid; | |
| grid-template-columns: 100px 100px 100px;// 3 列 | |
| grid-template-rows: 100px 100px 100px; // 3 行 | |
| } | |
| .item:nth-child(even) {background-color: darkkhaki;} | |
| .item:nth-child(odd) {background-color: darksalmon;} | |
| </style> | |
| </head> | |
| <body> | |
| <main class="penguin"> | |
| <div class="item">1</div> | |
| <div class="item">2</div> | |
| <div class="item">3</div> | |
| <div class="item">4</div> | |
| <div class="item">5</div> | |
| <div class="item">6</div> | |
| <div class="item">7</div> | |
| <div class="item">8</div> | |
| <div class="item">9</div> | |
| </main> | |
| </body> | |
| </html> |
2. 画一只小企鹅
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>CSS 变量加 grid 画一只企鹅 </title> | |
| <style> | |
| .penguin { | |
| width: 300px; | |
| height: 300px; | |
| background-color: aquamarine; | |
| display: grid; | |
| grid-template-columns: 65px 170px 65px; | |
| grid-template-rows: 100px 150px 50px; | |
| /* 声明变量的时候，变量名前面要加两根连词线（--）；var()函数用于读取变量；函数还可以使用第二个参数，表示变量的默认值。eg:background: var(--penguin-skin, gray);*/ | |
| /* 动态设置企业的肤色 */ | |
| --penguin-skin: gray; | |
| --penguin-belly: white; | |
| --penguin-foot: orange; | |
| --penguin-cheek: pink; | |
| } | |
| /* 基数 */ | |
| /* .item:nth-child(even) {background-color: darkkhaki;}*/ | |
| /* 偶数 */ | |
| /* .item:nth-child(odd) {background-color: darksalmon;} */ | |
| /* 头 */ | |
| .head {background: var(--penguin-skin, gray); | |
| width: 80%; | |
| height: 100%; | |
| border-radius: 80% 80% 50% 50%; | |
| align-self: end; | |
| transform: translateY(20%); | |
| z-index: 3; | |
| position: relative; | |
| } | |
| .face { | |
| /* display: grid; | |
| grid-template-columns: 33% 33% 33%; | |
| justify-items: center; | |
| align-items: end; */ | |
| width: 80%; | |
| height: 90%; | |
| /* border-radius: 50%; */ | |
| position: relative; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| top: 0; | |
| margin: 10% auto; | |
| } | |
| .face:before { | |
| display: block; | |
| content: ""; | |
| width: 80%; | |
| height: 100%; | |
| border-radius: 70% 60% 50% 40%; | |
| transform: rotate(-45deg); | |
| background: var(--penguin-belly, white); | |
| position: absolute; | |
| left: -5%; | |
| top: 5%; | |
| } | |
| .face:after { | |
| display: block; | |
| content: ""; | |
| width: 80%; | |
| height: 100%; | |
| border-radius: 60% 70% 40% 50%; | |
| transform: rotate(45deg); | |
| background: var(--penguin-belly, white); | |
| position: absolute; | |
| right: -5%; | |
| top: 5%; | |
| } | |
| .face-on { | |
| display: grid; | |
| grid-template-columns: 33% 33% 33%; | |
| justify-items: center; | |
| align-items: end; | |
| width: 80%; | |
| height: 80%; | |
| margin: 0 auto; | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| } | |
| .eye { | |
| background: black; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| } | |
| .left-eye {margin-left: 50%;} | |
| .right-eye {margin-right: 50%;} | |
| /* | |
| CSS 选择器 | |
| :before p:before 在每个 <p> 元素的内容之前插入内容。:after p:after 在每个 <p> 元素的内容之后插入内容。*/ | |
| .eye:after { | |
| display: block; | |
| content: " "; | |
| background-color: var(--penguin-belly, white); | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| } | |
| /* 脸颊 */ | |
| .cheek { | |
| width: 60%; | |
| height: 30%; | |
| border-radius: 50%; | |
| background-color: var(--penguin-cheek, pink); | |
| align-self: start; | |
| } | |
| .mouth { | |
| width: 100%; | |
| height: 100%; | |
| display: block; | |
| } | |
| .mouth:before { | |
| display: block; | |
| content: " "; | |
| width: 60%; | |
| height: 20%; | |
| border-radius: 50%; | |
| background: var(--penguin-foot, rgb(139, 137, 137)); | |
| margin: 0 auto; | |
| } | |
| .mouth:after { | |
| display: block; | |
| content: " "; | |
| width: 50%; | |
| height: 20%; | |
| border-radius: 50%; | |
| background: var(--penguin-foot, gray); | |
| margin: 0 auto; | |
| } | |
| /* 手 */ | |
| .hand { | |
| width: 50%; | |
| height: 50%; | |
| background: var(--penguin-skin, gray); | |
| z-index: 0; | |
| } | |
| /* | |
| 设置多个不同的 CSS 变换 (transform) 属性时，在属性中间用空格隔开即可，旋转 缩放 扭曲 等同时执行多个效果！顺序：是从后向前执行的！！！顺序不同变换效果也会不同！！！eg: transform: rotate(45deg) translateX(10px); | |
| eg: transform: translateX(10px) rotate(45deg) ; | |
| 位置会有很大的区别！*/ | |
| /* 左手 */ | |
| .left-hand { | |
| border-radius: 30% 30% 120% 30%; | |
| transform: rotate(45deg) translate(90%, -26%); | |
| justify-self: end; | |
| } | |
| /* 右手 */ | |
| .right-hand { | |
| border-radius: 30% 30% 30% 120%; | |
| transform: rotate(-45deg) translate(-90%, -26%); | |
| } | |
| /* 肚子 */ | |
| .center {margin: 0 auto;} | |
| .belly-border { | |
| width: 95%; | |
| height: 100%; | |
| background: var(--penguin-skin, gray); | |
| border-radius: 120%; | |
| z-index: 1; | |
| } | |
| .belly-in { | |
| width: 85%; | |
| height: 95%; | |
| background: var(--penguin-belly, white); | |
| border-radius: 120% 120% 100% 100%; | |
| } | |
| /* 脚 */ | |
| .penguin-feet {position: relative;} | |
| .feet { | |
| display: inline-block; | |
| width: 30%; | |
| height: 50%; | |
| background: var(--penguin-foot, orange); | |
| border-radius: 50%; | |
| position: absolute; | |
| z-index: 0; | |
| top: -40%; | |
| } | |
| .left-feet {transform: rotate(160deg); | |
| left: 18%; | |
| } | |
| .right-feet {transform: rotate(-160deg); | |
| right: 18%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <img src="./penguin.png" style="width: 300px; height: 300px;" /> | |
| <main class="penguin"> | |
| <section class="item"></section> | |
| <section class="item head center"> | |
| <div class="face"></div> | |
| <div class="face-on"> | |
| <div class="eye left-eye"></div> | |
| <div></div> | |
| <div class="eye right-eye"></div> | |
| <div class="cheek left-cheek"></div> | |
| <div class="mouth"></div> | |
| <div class="cheek right-cheek"></div> | |
| </div> | |
| </section> | |
| <section class="item"></section> | |
| <section class="item hand left-hand"></section> | |
| <section class="item center belly-border"> | |
| <div class="belly-in center"></div> | |
| </section> | |
| <section class="item hand right-hand"></section> | |
| <section class="item"></section> | |
| <section class="item penguin-feet"> | |
| <section class="feet left-feet"></section> | |
| <section class="feet right-feet"></section> | |
| </section> | |
| <section class="item"></section> | |
| </main> | |
| </body> | |
| </html> |
3. 预览
推荐文章
1.grid 布局
http://www.ruanyifeng.com/blo…
2.css 变量
http://www.ruanyifeng.com/blo…
3.css 选择器
https://www.w3school.com.cn/c…
4.flex 布局
http://www.ruanyifeng.com/blo…
正文完
发表至： javascript
2020-06-22
