순수 CSS를 사용하여 할로윈 토글 컨트롤을 구현하는 방법(소스 코드 첨부)

이 글의 내용은 순수 CSS를 사용하여 할로윈 토글 컨트롤을 구현하는 방법에 대한 것입니다. (소스 코드 첨부) 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

효과 미리보기

소스 코드 주소

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

코드 해석

정의 컨테이너 halloween -switcher, checkbox를 통한 전환 실현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);
  }
}

글꼴 소개, 중앙 표시:

rrreee
실제 컨테이너 라벨 크기 설정

rrreee🎜두 종류 추가 컨테이너 색상 일치🎜rrreee🎜는 pumpkin-container, vampire-container 컨테이너를 정의하고 text🎜rrreee🎜는 label 컨테이너 색상 그라데이션🎜rrreee🎜을 추가합니다. 호박 컨테이너, 뱀파이어 컨테이너 컨테이너 및 텍스트🎜🎜애니메이션 효과🎜rrreee🎜먼저 호박를 그리고 호박 컨테이너🎜rrreee🎜새로운 펄프 컬러🎜rrreee🎜Painting<code>pumpkin의pumpkin__eyes-n-nose 🎜🎜눈을 그리는 의사 요소🎜rrreee🎜Paintingpumpkin 의 pumpkin__mouth-n-teeths 🎜🎜pseudo-element는 이빨을 그리고🎜rrreee🎜그런 다음 뱀파이어를 그려 뱀파이어 용기를 완성합니다. 🎜 rrreee🎜의사 요소를 사용하여 뱀파이어 컨테이너의 얼굴을 그립니다🎜rrreee🎜의사 요소를 사용하여 뱀파이어__눈 을 그립니다🎜rrreee🎜뱀파이어__입 그리기🎜rrreee 🎜 vampire__teeths 앞니, 의사 요소를 그려 치아를 그립니다🎜rrreee🎜 vampire__tongue 를 그리고🎜rrreee🎜그런 다음 체크박스를 숨깁니다🎜rrreee 🎜미소 애니메이션 웃으세요🎜rrreee🎜🎜🎜

위 내용은 순수 CSS를 사용하여 할로윈 토글 컨트롤을 구현하는 방법(소스 코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!