您好,登錄后才能下訂單哦!
本篇文章為大家展示了CSS使用toggle控件的方法,代碼簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
Toggle 控件用于在屏幕上繪制一個開關(guān),通過控制開關(guān)的開啟與閉合來執(zhí)行一些具體的操作當(dāng)用戶切換開關(guān)狀態(tài)時,Toggle 控件的繪制函數(shù)就會根據(jù)不同的切換動作來返回相應(yīng)的布爾值。選中 Toggle 控件會返回布爾值 true,取消選中就會返回布爾值 false。
https://github.com/shanyuhai123/learnCSS/tree/master/0159-halloween-switcher
定義容器 halloween-switcher
, 通過 checkbox
來實(shí)現(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è)置實(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
, 補(bǔ)全 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; }
繪畫 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
, 補(bǔ)全 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); } }
上述內(nèi)容就是CSS使用toggle控件的方法,你們學(xué)到知識或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識儲備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。