謹以此技術文，獻禮新中國成立70週年

時間 2019-11-05

標籤以此技術獻禮成立 70周简体版

原文原文鏈接

前言：謹以此技術文，慶祝中華人民共和國成立70週年！

本文主講如何繪製五星紅旗，涉及CSS3，ES6+等知識。

1、CSS的單位

（1）px

px，全稱pixel，就是咱們生活工做中說的像素，也是圖像的基本採樣單位。對於不一樣的設備，它的圖像基本單位是不一樣的。而咱們生活工做中一般所說的顯示器分辨率是指桌面設定的分辨率，不是顯示器的物理分辨率。總的來講px就是對應咱們顯示器的分辨率。

（2）em

em是相對單位，相對於當前標籤的字體尺寸（補充：瀏覽器默認的字體尺寸，也就是16px）。

（3）rem

rem和em同樣也是相對單位，可是不同的是rem始終都是相對html根元素。優勢是改變根元素就能改變全部使用rem的大小。新中國，新時代，固然兼容性也「新」，IE8以上版本和其餘瀏覽器都已經支持，是作響應式佈局的經常使用選擇。

（4）重點：vw和vh

vw和vh是視口單位，就是根據瀏覽器窗口的大小的單位，不受顯示器分辨率的影響，不須要顧慮那麼多不一樣電腦有關分辨率的自適應問題，是否是很開心？跟我在本文中左手右手用起來。
vw是視口的寬度單位，vh就是視口的高度。
和百分比有點同樣，1vw表示可視窗口的寬度的百分之一。好比視口寬度是1900px，那麼1vw=19px。和百分比不同的是，vw始終相對於可視窗口的寬度，而百分比和其父元素的寬度有關。（注：關於vw和vh兼容請查閱相關圖表）

2、Transform

（1）此文用到了translate/rotate/scale，但咱們不單單這些，具體如圖：

3、如何實現五角星？

（1）第一步：新建一個盒子以及僞元素實現三個三角形

.triangle {
      width: 0;
      height: 0;
      border-right: 5vw solid transparent;
      border-left: 5vw solid transparent;
      border-top: 3.5vw solid #ff0;
    }
    .triangle::after,
    .triangle::before {
      content: "";
      width: 0;
      height: 0;
      border-right: 5vw solid transparent;
      border-left: 5vw solid transparent;
      border-top: 3.5vw solid #ff0;
    }
複製代碼

（2）第二步：三個三角形定位到同一位置

.triangle {
      position: relative;
    }
    .triangle::after,
    .triangle::before {
      position: absolute;
      top: -3.5vw;
      left: -5vw;
    }
複製代碼

（3）第三步：僞元素三角形旋轉即實現五角星

.triangle::before {
      transform: rotate(70.5deg);
    }
    .triangle::after {
      transform: rotate(-70.5deg);
}
複製代碼

（4）整合後代碼

.triangle {
      width: 0; /* 第一步代碼 */
      height: 0; /* 第一步代碼 */
      border-right: 5vw solid transparent; /* 第一步代碼 */
      border-left: 5vw solid transparent; /* 第一步代碼 */
      border-top: 3.5vw solid #ff0; /* 第一步代碼 */
      position: relative; /* 第二步代碼 */
    }
    .triangle::after,
    .triangle::before {
      content: ""; /* 第一步代碼 */
      width: 0; /* 第一步代碼 */
      height: 0; /* 第一步代碼 */
      border-right: 5vw solid transparent; /* 第一步代碼 */
      border-left: 5vw solid transparent; /* 第一步代碼 */
      border-top: 3.5vw solid #ff0; /* 第一步代碼 */
      position: absolute; /* 第二步代碼 */
      top: -3.5vw; /* 第二步代碼 */
      left: -5vw; /* 第二步代碼 */
    }
    .triangle::before {
      transform: rotate(70.5deg); /* 第三步代碼 */
    }
    .triangle::after {
      transform: rotate(-70.5deg); /* 第三步代碼 */
    }
複製代碼

4、如何實現國旗？

（1）第一步：新增四個已實現五角星盒子

<div class="China-flag">
        <div class="flag-star"></div>
        <div class="flag-star"></div>
        <div class="flag-star"></div>
        <div class="flag-star"></div>
        <div class="flag-star"></div>
    </div>
複製代碼

（2）第二步：僞類結合使用transform技術定位五角星的正確位置

.flag-star:nth-child(1) {
      transform: translate(3.5vw, 7vw) scale(0.9);
    }
複製代碼

（3）整合後代碼

.China-flag {
      margin: 5vw auto 2vw auto;
      width: 51.2vw;
      height: 34.1vw;
      background: #f00;
    }
    .flag-star,
    .flag-star::before,
    .flag-star::after
     {
      width: 0;
      height: 0;
      border-right: 5vw solid transparent;
      border-left: 5vw solid transparent;
      border-top: 3.5vw solid #ff0;
    }
    .flag-star {
      position: relative;
    }
    .flag-star::after,
    .flag-star::before {
      position: absolute;
      content: "";
      top: -3.5vw;
      left: -5vw;
    }
    .flag-star::after {
      transform: rotate(70.5deg);
    }
    .flag-star::before {
      transform: rotate(-70.5deg);
    }
    .flag-star:nth-child(1) {
      transform: translate(3.5vw, 7vw) scale(0.9);
    }
    .flag-star:nth-child(2) {
      transform: translate(11vw, -2vw) scale(0.33) rotate(-45deg);
    }
    .flag-star:nth-child(3) {
      transform: translate(15vw, -2vw) scale(0.33) rotate(45deg);
    }
    .flag-star:nth-child(4) {
      transform: translate(15vw, 0px) scale(0.33);
    }
    .flag-star:nth-child(5) {
      transform: translate(11vw, 0px) scale(0.33) rotate(-45deg);
    }
複製代碼

5、如何實現多行祝福語，一個一個字展現。

（1）HTML結構和數據結構

<div class="China-blessing" v-for="(item,index) in blessingObj" :key="index">
        <span v-for="(item,index) in item" :key="index">{{item}}</span>
    </div>
複製代碼

data() {
      return {
        blessingObj: {
          first: [],
          second: [],
          third: [],
          fourth: []
        }
      };
    },
複製代碼

//假設後端返回的數據以下
    const blessingObj = {
        first: ["我","愛","你","，","中","華","人","民","共","和","國"],
        second: ["此","生","無","悔","入","華","夏","，","來","世","還","作","中","國","人"],
        third: ["微","信","公","衆","號","「","黑","叔","說","前","端","」"],
        fourth: ["謹","以","此","技","術","文","獻","禮","新","中","國","成","立","70","年"]
    };
複製代碼

（2）初級版實現

let i = 0;
      blessingObj.first.forEach(ele => {
        const _this = this;
        setTimeout(() => {
          _this.blessingObj.first.push(ele);
        }, 200 * i);
        i++;
      });
      blessingObj.second.forEach(ele => {
        const _this = this;
        setTimeout(() => {
          _this.blessingObj.second.push(ele);
        }, 200 * i);
        i++;
      });
      blessingObj.third.forEach(ele => {
        const _this = this;
        setTimeout(() => {
          _this.blessingObj.third.push(ele);
        }, 200 * i);
        i++;
      });
      blessingObj.fourth.forEach(ele => {
        const _this = this;
        setTimeout(() => {
          _this.blessingObj.fourth.push(ele);
        }, 200 * i);
        i++;
      });
複製代碼

（2）中級版實現

let sleep = step => new Promise(resolve => setTimeout(() => resolve(), step))
      ;(async function(param) {
        let _this=param;
        for await (let key of Object.keys(blessingObj)) {
          let __this=_this;
          for await (let value of blessingObj[key]) {
            let ___this=__this;
            await sleep(888)
            ___this.blessingObj[key].push(value)
          }
        }
      })(this)
複製代碼

（3）高級版實現

let i = 0;
      Object.keys(blessingObj).forEach(key => {
        blessingObj[key].forEach(value => {
          setTimeout(() => {
            this.blessingObj[key].push(value);
          }, 168 * i++);
        });
      });
複製代碼