前端 CSS : 7# 純 CSS 實現像極了愛情

Code4App 發布于2019-08-30 15:43 / 2791人閱讀

摘要：介紹最近突然回想到之前看過的一個動畫，是一個正方體向球體表示愛意，被拒絕，改變自己的小動畫。不應有恨，何事長向別時圓人有悲歡離合，月有陰晴圓缺，此事古難全。此情無計可消除，才下眉頭，卻上心頭。豬腳登場龍套們退場，豬腳登場。

介紹

最近突然回想到之前看過的一個動畫，是一個正方體向球體表示愛意，被拒絕，改變自己的小動畫。

找了半天終于找到了，個人感覺是一個很棒的動畫，強烈安利：

《方塊》

效果預覽

github.io 瀏覽

源代碼地址

https://github.com/shanyuhai1...

代碼解讀 1. 導演上場

這個動畫中存在鏡頭轉換，所以我們需要一個導演把控全局，寫個簡單效果進行測試。

場景 love 就位，導演 director 就位，龍套們 actors 就位：


  
    
      丙辰中秋，歡飲達旦，大醉，作此篇，兼懷子由。
      明月幾時有？把酒問青天。不知天上宮闕，今夕是何年。我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒。起舞弄清影，何似在人間？
      轉朱閣，低綺戶，照無眠。不應有恨，何事長向別時圓？人有悲歡離合，月有陰晴圓缺，此事古難全。但愿人長久，千里共嬋娟。
    
    
      紅藕香殘玉簟秋。輕解羅裳，獨上蘭舟。云中誰寄錦書來，雁字回時，月滿西樓。
      花自飄零水自流。一種相思，兩處閑愁。此情無計可消除，才下眉頭，卻上心頭。

場景過于簡陋，需要美化升級一下，演員們也要稍微裝飾一下：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #f1f1f1;
  overflow: hidden;
}

.love {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 不定寬高垂直居中推薦 flex，此處玩玩而已 */
  width: 800px;
  height: 500px;
  background-color: #b5bfc0;
  overflow: hidden;
}

.director {
  width: 1200px;
  height: 100%;
  border: 1px dashed red;
  display: flex;
  justify-content: space-between;
}

.actors {
  width: 45%;
  border: 1px solid purple;
}

鏡頭 len 準備，導演試機：

.director {
  animation: len 5s linear .2s infinite;
}

@keyframes len {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-400px);
  }
}

測試完成。

2. 豬腳 cube 登場

龍套們退場，豬腳登場。

豬腳要有玉樹凌風之姿，一米八的身高配上微微側身，先來一張豬腳的海報吸引人氣吧：


  
    Cube
  
  
    
      (?′▽`?)

h1 {
  position: absolute;
  left: 100px;
  top: 100px;
  font-size: 140px;
  letter-spacing: 6px;
  color: #fff;
  user-select: none;
  text-shadow: 0 0 5px rgba(0, 0, 0, .05), 0 1px 3px rgba(0, 0, 0, .2), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .2), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .3);
}

.cube {
  position: absolute;
  left: 540px;
  --size: 180px;
  width: var(--size);
  height: var(--size);
  perspective: 600px;
}

.cube__body {
  position: relative;
  width: inherit;
  height: inherit;
  transform-style: preserve-3d;
  transform: rotateY(15deg);
}

.cube__face {
  position: absolute;
  width: inherit;
  height: inherit;
  opacity: .5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  background-color: lightcyan;
  border: 2px solid #fff;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, .5);
}

.cube__face_front {
  transform: rotateY(0) translate3d(0, 0, calc(var(--size) / 2));
}

.cube__face_back {
  transform: rotateY(180deg) translate3d(0, 0, calc(var(--size) / 2));
}

.cube__face_left {
  transform: rotateY(-90deg) translate3d(0, 0, calc(var(--size) / 2));
}

.cube__face_right {
  transform: rotateY(90deg) translate3d(0, 0, calc(var(--size) / 2));
}

.cube__face_top {
  transform: rotateX(90deg) translate3d(0, 0, calc(var(--size) / 2));
}

.cube__face_bottom {
  transform: rotateX(-90deg) translate3d(0, 0, calc(var(--size) / 2));
}

豬腳表示它并不想吊威亞，那就放它下來吧，試鏡發現化的妝也濃了，這張海報不合格：

.love {
  display: flex;
  align-items: flex-end;
  padding-bottom: 80px;
}

.cube__face {
  box-shadow: inset 0 0 2px rgba(0, 0, 0, .5);
}

重新拍一張海報，用來宣傳：

這樣豬腳看起來還是眉清目秀的。

3. 替身救場

原本是計劃著豬腳兩個前滾翻進入下一場景，奈何缺乏動作指導無法實現（求一個動作指導幫幫豬腳），這時候就只能靠替身救場了。

豬腳的前滾翻：

.cube__body {
  animation: woo 2s linear forwards;
}

@keyframes woo {
  0% {
    transform-origin: 100% 100%;
    transform: rotateY(0) rotateZ(0);
  }
  5% {
    transform-origin: 100% 100%;
    transform: rotateY(0) rotateZ(0);
  }
  50% {
    transform-origin: 100% 100%;
    transform: rotateY(0) rotateZ(.25turn);
  }
  99% {
    transform-origin: 100% 100%;
    transform: rotateY(0) rotateZ(.25turn);
  }
  100% {
    transform-origin: 100% 100%;
    transform: rotateY(0) rotateZ(.25turn);
    visibility: hidden;
  }
}

替身接替前滾翻：


  
    替身

.substitute__body {
  animation: woo_sub 2s 1.85s linear forwards;
  visibility: hidden;
}
@keyframes woo_sub {
  1% {
    transform-origin: 100% 100%;
    transform: rotateY(0) rotateZ(0);
    visibility: hidden;
  }
  5% {
    transform-origin: 100% 100%;
    transform: rotateY(0) rotateZ(0);
    visibility: hidden;
  }
  50% {
    transform-origin: 100% 100%;
    transform: rotateY(0) rotateZ(.25turn);
    visibility: visible;
  }
  100% {
    transform-origin: 100% 100%;
    transform: rotateY(0) rotateZ(.25turn);
    visibility: visible;
  }
}

鏡頭準備，再一次試鏡：

場景長度不夠，等下配角們站哪里？趕緊加點預算：

.director {
  width: 1700px;
}

@keyframes len {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-900px);
  }
}

4. 配角 sphere 上場

由于導演全局把控能力太差，所以需要分鏡頭拍攝：

.director {
  /* animation: len 6s linear .2s forwards; */
  transform: translateX(-900px);
}

.cube__body {
  /* animation: woo 2s 1s linear forwards; */
}
.substitute__body {
  /* animation: woo_sub 2s 2.85s linear forwards; */
}

配角們身高一米六，化好妝后登場：

.sphere__wrap {
  position: absolute;
  bottom: 0;
  right: -840px;
  height: 320px;
  width: 450px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.sphere {
  --sphere-size: 160px;
  width: var(--sphere-size);
  height: var(--sphere-size);
  border-radius:50%;
  box-shadow:
    0 3em 2.5em -2.5em rgba(53,64,73,.6),
    0 0 1em -0.35em rgba(255,255,255,.2),
    0 -1em 1.1em 0 rgba(255,255,255,.5) inset,
    0 0 2.5em 0 rgba(227,249,250,.4) inset;
  background:
    radial-gradient(circle at 33% -25%,rgba(227,249,250,0) 40%,rgba(0, 0, 0,.07) 50%),
    radial-gradient(circle at 50% 135%, rgba(0, 0, 0,.23) 43%,rgba(227,249,250,0)),
    radial-gradient(circle at 50% -35%, rgba(227,249,250,.8) 45%,rgba(227,249,250,0)),
    radial-gradient(circle at 50% 0, #fff,lightcyan);
  background-size: 150%, 100%, 100%, 100%;
}

喂，身為一個演員動作要豐富，不是讓你站著當花瓶的：

.sphere_left {
  animation: move 1s ease-in forwards;
}
@keyframes move {
  to {
    transform: translateX(50px) rotate(.05turn);
  }
}

還要有豐富的感情，你以為是小鮮肉面無表情就可以嗎：

.love {
  --color-love: #ed5a65;
}

.sphere_left::after {
  content: "?";
  font-size: 42px;
  color: var(--color-love);
  position: absolute;
  top: 0;
  right: 0;
  transform: scale(0);
  animation: love_gen 1s .8s linear forwards;
}

@keyframes love_gen {
  from {
    transform: scale(0) translate(0, 0);
  }
  to {
    transform: scale(1) translate(25px, -40px) rotate(-.05turn);
  }
}

OK，試鏡：

看起來還不錯，下一個鏡頭。

5. 豬腳示愛

配角們的鏡頭拍完了，還需要補拍豬腳示愛的鏡頭，這時候就要展現豬腳炸裂的演技了，從示愛到心碎：

.substitute__body::after {
  content: "?";
  font-size: 30px;
  color: var(--color-love);
  position: absolute;
  top: 0;
  right: 0;
  transform: scale(0);
  animation: love_vip 5s 4s linear forwards;
}

@keyframes love_vip {
  0% {
    transform: scale(0) translate(-100px, -200px);
  }
  10%, 80% {
    transform: scale(1) translate(-125px, -110px) rotate(-.25turn);
  }
  100% {
    content: "

云服務器 GPU云服務器純CSS 像極了第7天:CSS入門前端css

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116042.html

如何使用CSS創建巧妙的動畫提示框

摘要：我們巧妙的提示框打算使用屬性選擇器也就是方括號表示法。相對性這是用在提示框的父元素上的。向上向下提示框要用到關鍵幀，而向左向右提示框使用關鍵幀。注意，在這些關鍵幀中，我們只定義了提示框所需的終止狀態。原文：https://webdesign.tutsplus.co...原作：Jase Smith翻譯：Stypstive 當你的用戶需要漂亮的圖標給出額外的文字信息時，亦或是當他們在點擊...

wmui 2019-08-29 12:51 評論0 收藏0
如何使用CSS創建巧妙的動畫提示框

摘要：我們巧妙的提示框打算使用屬性選擇器也就是方括號表示法。相對性這是用在提示框的父元素上的。向上向下提示框要用到關鍵幀，而向左向右提示框使用關鍵幀。注意，在這些關鍵幀中，我們只定義了提示框所需的終止狀態。原文：https://webdesign.tutsplus.co...原作：Jase Smith翻譯：Stypstive 當你的用戶需要漂亮的圖標給出額外的文字信息時，亦或是當他們在點擊...

vpants 2019-08-01 17:05 評論0 收藏0
前端每日實戰 2018 年 7 月份項目匯總（共 29 個項目）

摘要：過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發的活的參考書視頻演示如何用純創作一臺咖啡機視頻演示如何用過往項目 2018 年 6 月份項目匯總（共 27 個項目） 2018 年 5 月份項目匯總（共 30 個項目） 2018 年 4 月份項目匯總（...

ghnor 2019-08-29 16:21 評論0 收藏0