跟我一块儿用CSS变量加grid画一只小企鹅吧！

时间 2020-06-23

标签一块儿 css 变量 grid 一只企鹅栏目 CSS 繁體版

原文原文链接

今天在学习的时候发现本身竟然不知道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.画一只小企鹅css

<!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.预览
html

推荐文章
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...函数