前端 CSS : 3# 純 CSS 實現粉色愛心

時間 2019-11-06

標籤前端 css 實現粉色愛心欄目 CSS 简体版

原文原文鏈接

介紹

原文連接
感謝 comehope 大佬的 [前端每日實戰]css

工做三個月以爲糟糕跑路(順帶勸一下像我同樣的新人, 不要急於入職, 必定要挑一挑)回家從新補充了一下基礎知識及 node, 身爲一個前端結果發現 CSS 已經手生了, 爲了明年可以找到工做, 因此又開始練習了...html

效果預覽

github.io 瀏覽

源代碼地址

https://github.com/shanyuhai1...前端

代碼解讀

1. 首先是完成 `html` 結構

咱們須要五顆愛心及底部的 footernode

<figure class="hearts">
  <section class="heart"></section>
  <section class="heart"></section>
  <section class="heart"></section>
  <section class="heart"></section>
  <section class="heart"></section>
</figure>
<footer>pink hearts</footer>

樣式初始化及居中git

body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f3f3f3;
  overflow: hidden;
}

.hearts {
  width: 100vw;
  height: 20vw;
  border: 1px solid; /* the snippet will be deleted */
  box-sizing: border-box;
  padding: 0 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.heart {
  width: 15vw;
  height: 15vw;
  border: 1px solid; /* the snippet will be deleted */
}

footer {
  margin-top: 10vh;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: "verdana";
  font-size: 22px;
  color: #F48FB1;
}

2. 畫出旋轉的粉紅正方形

接着在第一個 heart 中添加一個粉紅的正方形github

添加 DOM 結構segmentfault

<section class="heart">
  <div class="plane">
    <div class="half-heart"></div>
  </div>
</section>

基準面(plane) 定位並完成基礎樣式flex

.heart {
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
}

.plane {
 position: absolute;
 opacity:0.8;
}
.half-heart {
 width: 7.5vw;
 height: 7.5vw;
 background-color: pink;
 transform: rotate(-45deg);
}

一顆愛心由兩個基準面組成動畫

<section class="heart">
  <div class="plane plane-left">
    <div class="half-heart"></div>
  </div>
  <div class="plane plane-right">
    <div class="half-heart"></div>
  </div>
</section>

.heart {
  transform-style: preserve-3d;
}

.plane-right {
  transform: rotateY(90deg); /* 由於此處爲 90 度垂直, 因此並不可見 */
}

接着添加旋轉動畫(這樣咱們就能夠看到兩個基準面了)spa

.heart {
  animation: rotate 5s ease-in-out infinite;
}
.heart:nth-of-type(1) {
  animation-delay:-5s;
}

/* keyframes */
@keyframes rotate {
  0% {
    transform: rotateY(0deg) rotateZ(25deg) translateY(7.5vw);
  }
  50% {
    transform: rotateY(270deg) rotateZ(25deg) translateY(-7.5vw);
  }
  100% {
    transform: rotateY(360deg) rotateZ(25deg) translateY(7.5vw);
  }
}

3. 將旋轉的兩個正方形改成心形

生成兩個圓形放置在正方的上方便可(僞元素可解決)

.half-heart:before,
.half-heart:after {
  content: "";
  width: 7.5vw;
  height: 7.5vw;
  background-color: pink;
  border-radius: 100%;
  position: absolute;
}
.half-heart:before {
  top: -3.25vw;
  left: 0;
}
.half-heart:after {
  top: 0;
  left: 3.25vw;
}

好了, 這樣一個旋轉上升的愛心就完成了

4. 補完 5 個 heart

修改延遲時間(DOM 結構省略)

.heart:nth-of-type(1) {
  animation-delay:-5s;
}
.heart:nth-of-type(2) {
  animation-delay:-4s;
}
.heart:nth-of-type(3) {
  animation-delay:-3s;
}
.heart:nth-of-type(4) {
  animation-delay:-2s;
}
.heart:nth-of-type(5) {
  animation-delay:-1s;
}