這篇文章帶給大家的內容是關於如何使用純CSS實現萬聖節的toggle控制項（附源碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
https://github.com/shanyuhai123 /learnCSS/tree/master/0159-halloween-switcher
定義容器halloween-switcher , 透過checkbox# 來實現切換
<section> <input> <label> <div></div> <div></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;
}設定實際容器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> </p><p></p> <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 , 補全vampire-container
<p> </p><p></p> <p> </p><p></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);
}
}以上是如何使用純CSS實作萬聖節的toggle控制項（附源碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
