純粋な CSS を使用してハロウィーントグルコントロールを実装する方法 (ソースコードが添付されています)-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

純粋な CSS を使用してハロウィーントグルコントロールを実装する方法 (ソースコードが添付されています)

不言

Oct 22, 2018 pm 01:47 PM

csscss3html5フロントエンド

この記事の内容は、純粋な CSS を使用してハロウィントグルコントロールを実装する方法に関するものです (ソースコードが添付されています)。必要な方は参考にしていただければ幸いです。

エフェクトのプレビュー

純粋な CSS を使用してハロウィーントグルコントロールを実装する方法 (ソースコードが添付されています)

ソースコードのアドレス

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;
}

2 つのコンテナの色を追加

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);
}

Add

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;
}

ペイント

pumpkinpumpkin__目と鼻

擬似目を描く要素

.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;
}

Painting

pumpkin ofpumpkin__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;
}

## の顔を描画します疑似要素の描画吸血鬼__目

<pre class="brush:php;toolbar:false">.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; }</pre>描画

吸血鬼__口

<pre class="brush:php;toolbar:false">.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; }</pre>描画

吸血鬼__歯

前歯、疑似要素の描画歯<pre class="brush:php;toolbar:false">.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; }</pre>描画

吸血鬼__舌

<pre class="brush:php;toolbar:false">.vampire__tongue { position: absolute; width: 3.5rem; height: 1.75rem; background-color: #d63e49; bottom: -0.75rem; border-radius: 3.5rem 3.5rem 0 0; }</pre>次に、

チェックボックスを非表示にします

<pre class="brush:php;toolbar:false">.halloween-input { display: none; }</pre>笑顔のアニメーションを追加します

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 を使用してハロウィーントグルコントロールを実装する方法 (ソースコードが添付されています)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事はsegmentfault思否で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。