最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
當(dāng)前位置: 首頁 - 科技 - 知識百科 - 正文

如何使用純CSS實現(xiàn)萬圣節(jié)的toggle控件(附源碼)

來源:懂視網(wǎng) 責(zé)編:小采 時間:2020-11-02 22:09:16
文檔

如何使用純CSS實現(xiàn)萬圣節(jié)的toggle控件(附源碼)

如何使用純CSS實現(xiàn)萬圣節(jié)的toggle控件(附源碼):本篇文章給大家?guī)淼膬?nèi)容是關(guān)于如何使用純CSS實現(xiàn)萬圣節(jié)的toggle控件(附源碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。效果預(yù)覽源代碼地址https://github.com/shanyuhai123/learnCSS/tree/master/0159-ha
推薦度:
導(dǎo)讀如何使用純CSS實現(xiàn)萬圣節(jié)的toggle控件(附源碼):本篇文章給大家?guī)淼膬?nèi)容是關(guān)于如何使用純CSS實現(xiàn)萬圣節(jié)的toggle控件(附源碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。效果預(yù)覽源代碼地址https://github.com/shanyuhai123/learnCSS/tree/master/0159-ha
本篇文章給大家?guī)淼膬?nèi)容是關(guān)于如何使用純CSS實現(xiàn)萬圣節(jié)的toggle控件(附源碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

效果預(yù)覽

3690678522-5bcb42a45c729_articlex.gif

源代碼地址

https://github.com/shanyuhai123/learnCSS/tree/master/0159-halloween-switcher

代碼解讀

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

<section class="halloween-switcher">
 <input type="checkbox" id="halloween-input">
 <label for="switch-input" class="halloween-label">
 <div class="pumpkin-container"></div>
 <div class="vampire-container"></div>
 </label>
</section>

引入字體, 居中顯示:

@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

<p class="pumpkin-container">
 <p class="pumpkin__eyes-n-nose"></p>
 <p class="pumpkin__mouth-n-teeths"></p>
</p>

新增果肉顏色

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

繪畫 pumpkinpumpkin__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;
}

繪畫 pumpkinpumpkin__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

<p class="vampire-container">
 <p class="vampire__eyes"></p>
 <p class="vampire__mouth">
 <p class="vampire__teeths"></p>
 <p class="vampire__tongue"></p>
 </p>
</p>

利用 偽元素 繪出 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);
 }
}

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

文檔

如何使用純CSS實現(xiàn)萬圣節(jié)的toggle控件(附源碼)

如何使用純CSS實現(xiàn)萬圣節(jié)的toggle控件(附源碼):本篇文章給大家?guī)淼膬?nèi)容是關(guān)于如何使用純CSS實現(xiàn)萬圣節(jié)的toggle控件(附源碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。效果預(yù)覽源代碼地址https://github.com/shanyuhai123/learnCSS/tree/master/0159-ha
推薦度:
  • 熱門焦點
專題
Top

抖音扫码关注

手机端二维码

每天分享百科知识!