前端 CSS : 1# 純 CSS 實現(xiàn)萬圣節(jié) toggle 控件

Berwin 發(fā)布于2019-08-29 17:03 / 1260人閱讀

摘要：介紹原文設(shè)計來源感謝大佬的前端每日實戰(zhàn)對我的啟蒙該文僅對是原文進行一部分的分析及分享有興趣的建議查看原文效果預覽瀏覽源代碼地址代碼解讀定義容器通過來實現(xiàn)切換引入字體居中顯示設(shè)置實際容器大小增加兩種容器的配色

介紹

原文
設(shè)計來源

感謝 comehope 大佬的前端每日實戰(zhàn) 對我的啟蒙

該文僅對是原文進行一部分的分析及分享, 有興趣的建議查看原文

效果預覽

github.io 瀏覽

源代碼地址

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

代碼解讀

定義容器 halloween-switcher , 通過 checkbox 來實現(xiàn)切換

引入字體, 居中顯示:

@import url("https://fonts.googleapis.com/css?family=Kodchasan");

* {
  font-family: "Kodchasan";
}

html {
  font-size: 20px;
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #081219;
  overflow: hidden;
}

設(shè)置實際容器 label 大小

.halloween-label {
  width: 30rem;
  height: 10rem;
  border: 3px solid #E56D48;
  border-radius: 10rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
}

增加兩種容器的配色

html {
  --pumpkin-color: #E56D48;
  --vampire-color: #4D7C99;
}

定義 pumpkin-container , vampire-container 容器及文字

.halloween-input ~ .halloween-label::before,
.halloween-input:checked ~ .halloween-label::before {
  position: absolute;
  font-size: 2.5rem;
  text-transform: uppercase;
}
.halloween-input ~ .halloween-label::before {
  content: "Pumpkin";
  color: var(--pumpkin-color);
  left: 70%;
  transform: translateX(-70%);
}
.halloween-input:checked ~ .halloween-label::before {
  content: "Vampire";
  color: var(--vampire-color);
  left: 25%;
  transform: translateX(-25%);
}

.halloween-input ~ .halloween-label .pumpkin-container,
.halloween-input ~ .halloween-label .vampire-container {
  width: 9.5rem;
  height: 9.5rem;
  border-radius: 50%;
  position: absolute;
  left: 0.25rem;
  overflow: hidden;
}
.halloween-input ~ .halloween-label .pumpkin-container {
  background-color: var(--pumpkin-color);
  filter: opacity(1);
}
.halloween-input ~ .halloween-label .vampire-container {
  background-color: var(--vampire-color);
  filter: opacity(0);
}
.halloween-input:checked ~ .halloween-label .pumpkin-container {
  left: calc(100% - 0.25rem);
  transform: translateX(-100%);
  filter: opacity(0);
}
.halloween-input:checked ~ .halloween-label .vampire-container {
  left: calc(100% - 0.25rem);
  transform: translateX(-100%);
  filter: opacity(1);
}

增加 label容器顏色漸變

.halloween-label {
  border: 3px solid var(--label-border-color);
  transition: .5s ease-in-out;
}
.halloween-label {
  --label-border-color: var(--pumpkin-color);
}
.halloween-input:checked ~ .halloween-label {
  --label-border-color: var(--vampire-color);
}

pumpkin-container , vampire-container 容器及文字

動畫效果

.halloween-input ~ .halloween-label::before,
.halloween-input:checked ~ .halloween-label::before {
  transition: .5s ease;
}
.halloween-input ~ .halloween-label .pumpkin-container,
.halloween-input ~ .halloween-label .vampire-container {
  transition: .5s ease;
}

先繪畫 pumpkin , 補全 pumpkin-container

新增果肉顏色

html {
  --pumkin-pulp-color: #330A0F;
}

繪畫 pumpkin 的 pumpkin__eyes-n-nose

偽元素畫出眼睛

.pumpkin__eyes-n-nose {
  position: absolute;
  top: 20%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0.8rem 1.6rem 0.8rem;
  color: var(--pumpkin-color);
  border-bottom-color: var(--pumkin-pulp-color);
  background-color: var(--pumkin-pulp-color);
}
.pumpkin__eyes-n-nose::before,
.pumpkin__eyes-n-nose::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  background-color: var(--pumkin-pulp-color);
  border-radius: 50%;
  top: 0.5rem;
  left: 0;
}
.pumpkin__eyes-n-nose::before {
  margin-left: -3.25rem;
}
.pumpkin__eyes-n-nose::after {
  margin-left: 2.25rem;
}

繪畫 pumpkin 的 pumpkin__mouth-n-teeths

偽元素畫出牙齒

.pumpkin__mouth-n-teeths {
  position: absolute;
  width: 6.5rem;
  height: 3.25rem;
  bottom: 10%;
  background-color: var(--pumkin-pulp-color);
  border-radius: 0 0 6.5rem 6.5rem;
}
.pumpkin__mouth-n-teeths::before,
.pumpkin__mouth-n-teeths::after {
  content: "";
  position: absolute;
  height: 0.75rem;
  width: 1rem;
  background-color: var(--pumpkin-color);
}
.pumpkin__mouth-n-teeths::before {
  top: 0;
  left: 1.25rem;
}
.pumpkin__mouth-n-teeths::after {
  height: 1rem;
  bottom: 0;
  right: 1.25rem;
}

再繪畫 vampire , 補全 vampire-container

利用偽元素繪出 vampire-container 的臉

.vampire-container::before,
.vampire-container::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #c2def2;  /* face color */
  border-radius: 45% 45% 0 0;
  top: 0.75rem;
}
.vampire-container::before {
  left: -4rem;
}
.vampire-container::after {
  right: -4rem;
}

偽元素繪出 vampire__eyes

.vampire__eyes {
  top: 20%;
  position: absolute;
  z-index: 1;
}
.vampire__eyes::before,
.vampire__eyes::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  background-color: #d63e49; /* eye-color */
  border-radius: 50%;
  top: 0.5rem;
  left: 0;
}
.vampire__eyes::before {
  margin-left: -3.25rem;
}
.vampire__eyes::after {
  margin-left: 2.25rem;
}

繪出 vampire__mouth

.vampire__mouth {
  position: absolute;
  width: 6.5rem;
  height: 3.25rem;
  background-color: var(--pumkin-pulp-color);
  bottom: 10%;
  border-radius: 0 0 6.5rem 6.5rem;
  display: flex;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
}

繪出 vampire__teeths 門牙, 偽元素繪出牙齒

.vampire__teeths {
  position: absolute;
  width: 100%;
  height: 1rem;
  background-color: #fffae6;
  top: -1px;
}
.vampire__teeths::before,
.vampire__teeths::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  color: transparent;
  border-style: solid;
  border-width: 0.65rem 0.375rem 0 0.375rem;
  border-top-color: #fffae6;
  top: 0.95rem;
}
.vampire__teeths::before {
  left: 1rem;
}
.vampire__teeths::after {
  right: 1rem;
}

繪出 vampire__tongue

.vampire__tongue {
  position: absolute;
  width: 3.5rem;
  height: 1.75rem;
  background-color: #d63e49;
  bottom: -0.75rem;
  border-radius: 3.5rem 3.5rem 0 0;
}

再接著把 checkbox 隱藏掉即可

.halloween-input {
  display: none;
}

增加微笑動畫 smile

.vampire__teeths {
  animation: smile 2s ease-in-out infinite;
}
.vampire__tongue {
  animation: smile 3s ease-in-out infinite;
}
@keyframes smile {
  50% {
    transform: scaleY(1.5);
  }
}

最后

這樣就大功告成了

云服務器 GPU云服務器純CSS 前端css css前端浮動-前端-css

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/114068.html

發(fā)表評論

登陸后可評論

0條評論

Berwin

男|高級講師

我要關(guān)注我要私信

TA的文章

【黑五】OVH/Soyoustart：獨服、VPS優(yōu)惠

閱讀 1893·2021-11-24 11:16
有時候苦苦找尋的東西，原來是近在咫尺——學習資源！

閱讀 3256·2021-09-10 10:51
DMIT：LAX.Pro系列VPS進行帶寬免費升級/加量不加價/200M升級為1Gbps/300M升

閱讀 3179·2021-08-03 14:03
前端 CSS : 1# 純 CSS 實現(xiàn)萬圣節(jié) toggle 控件

閱讀 1261·2019-08-29 17:03
利用css3修改input[type=radio]樣式

閱讀 3238·2019-08-29 12:36
js監(jiān)聽用戶進入和離開當前頁面

閱讀 2218·2019-08-26 14:06
React Fiber 架構(gòu)理解

閱讀 492·2019-08-23 16:32
Docker部署Node.js的方法步驟

閱讀 2660·2019-08-23 13:42

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

前端 CSS : 1# 純 CSS 實現(xiàn)萬圣節(jié) toggle 控件

相關(guān)文章

**前端每日實戰(zhàn)：145# 視頻演示如何用純 CSS 創(chuàng)作一個電源開關(guān)控件**

**前端每日實戰(zhàn)：145# 視頻演示如何用純 CSS 創(chuàng)作一個電源開關(guān)控件**

**前端每日實戰(zhàn)：158# 視頻演示如何用純 CSS 創(chuàng)作一個雨傘 toggle 控件**

發(fā)表評論

0條評論

Berwin

男|高級講師

TA的文章

【黑五】OVH/Soyoustart：獨服、VPS優(yōu)惠

有時候苦苦找尋的東西，原來是近在咫尺——學習資源！

DMIT：LAX.Pro系列VPS進行帶寬免費升級/加量不加價/200M升級為1Gbps/300M升

前端 CSS : 1# 純 CSS 實現(xiàn)萬圣節(jié) toggle 控件

利用css3修改input[type=radio]樣式

js監(jiān)聽用戶進入和離開當前頁面

React Fiber 架構(gòu)理解

Docker部署Node.js的方法步驟

最新活動