CSS3で実装された6つの境界遷移効果

<h1>CSS 境界遷移</h1>

<セクションクラス="ボタン">
  <button class="draw">描画</button>

  <button class="draw meet">ドローミート</button>

  <button class="center">中央</button>

  <button class="spin">スピン</button>

  <button class="spin circle">スピンサークル</button>

  <button class="spin thick">スピン シック</button>
</セクション>

ボタン {
  背景: なし;
  境界線: 0;
  ボックスのサイズ: 境界線ボックス;
  余白: 1em;
  パディング: 1em 2em;
  ボックスシャドウ: インセット 0 0 0 2px #f45e61;
  色: #f45e61;
  フォントサイズ: 継承;
  フォントの太さ: 700;
  位置: 相対的;
  垂直位置合わせ: 中央;
}
ボタン::前、ボタン::後 {
  ボックスサイズ: 継承;
  コンテンツ： "";
  位置: 絶対;
  幅: 100%;
  高さ: 100%;
}

。描く {
  トランジション: カラー 0.25 秒;
}
.draw::before、.draw::after {
  境界線: 2px 透明実線;
  幅: 0;
  高さ: 0;
}
.draw::before {
  上: 0;
  左: 0;
}
.draw::after {
  下部: 0;
  右: 0;
}
.draw:hover {
  色: #60daaa;
}
.draw:hover::before、.draw:hover::after {
  幅: 100%;
  高さ: 100%;
}
.draw:hover::before {
  上の境界線の色: #60daaa;
  右境界線の色: #60daaa;
  遷移: 幅 0.25 秒のイーズアウト、高さ 0.25 秒のイーズアウト 0.25 秒。
}
.draw:hover::after {
  境界線下部の色: #60daaa;
  左境界線の色: #60daaa;
  遷移: border-color 0s、ease-out 0.5s、width 0.25s、ease-out 0.5s、height 0.25s、ease-out 0.75s;
}

.meet:hover {
  色: #fbca67;
}
.meet::after {
  上: 0;
  左: 0;
}
.meet:hover::before {
  上の境界線の色: #fbca67;
  右境界線の色: #fbca67;
}
.meet:hover::after {
  境界線下部の色: #fbca67;
  左境界線の色: #fbca67;
  遷移: 高さ 0.25 秒のイーズアウト、幅 0.25 秒のイーズアウト 0.25 秒。
}

.center:hover {
  色: #6477b9;
}
.center::before、.center::after {
  上: 0;
  左: 0;
  高さ: 100%;
  幅: 100%;
  変換の原点: 中心;
}
.center::before {
  上境界線: 2px 実線 #6477b9;
  下境界線: 2px 実線 #6477b9;
  変換: scale3d(0, 1, 1);
}
.center::after {
  左境界線: 2px 実線 #6477b9;
  右境界線: 2px 実線 #6477b9;
  変換: scale3d(1, 0, 1);
}
.center:hover::before、.center:hover::after {
  変換: scale3d(1, 1, 1);
  遷移: 0.5 秒を変換します。
}

.スピン{
  幅: 5em;
  高さ: 5em;
  パディング: 0;
}
.spin:hover {
  色: #0eb7da;
}
.spin::before、.spin::after {
  上: 0;
  左: 0;
}
.spin::before {
  境界線: 2px 透明実線;
}
.spin:hover::before {
  上の境界線の色: #0eb7da;
  右境界線の色: #0eb7da;
  境界線下部の色: #0eb7da;
  遷移: border-top-color 0.15s 線形、border-right-color 0.15s 線形 0.1s、border-bottom-color 0.15s 線形 0.2s。
}
.spin::after {
  境界線: 0 透明;
}
.spin:hover::after {
  上境界線: 2px 実線 #0eb7da;
  左境界線の幅: 2px;
  右境界線の幅: 2px;
  変換: 回転(270度);
  遷移: transform 0.4s linear 0s、border-left-width 0s linear 0.35s;
}

。丸 {
  境界線の半径: 100%;
  ボックスシャドウ: なし;
}
.circle::before、.circle::after {
  境界線の半径: 100%;
}

。厚い {
  色: #f45e61;
}
.thick:hover {
  色: #fff;
  フォントの太さ: 700;
}
.thick::before {
  境界線: 2.5em 透明実線;
  Zインデックス: -1;
}
.thick::after {
  ミックスブレンドモード: カラードッジ;
  Zインデックス: -1;
}
.thick:hover::before {
  背景: #f45e61;
  上の境界線の色: #f45e61;
  右境界線の色: #f45e61;
  境界線の下の色: #f45e61;
  遷移: 背景 0 秒 線形 0.4 秒、境界上部の色 0.15 秒 線形、境界右色 0.15 秒 線形 0.15 秒、境界下部の色 0.15 秒 線形 0.25 秒。
}
.thick:hover::after {
  上ボーダー: 2.5em 実線 #f45e61;
  左ボーダーの幅: 2.5em;
  右ボーダーの幅: 2.5em;
}

/* ページのスタイル */
html{
  背景: #fefefe;
}

体 {
  背景: #fefefe;
  色: #4b507a;
  フォント: 300 24px/1.5 Lato、サンセリフ;
  マージン: 1em 自動;
  最大幅: 36em;
  パディング: 1em 1em 2em;
  テキスト配置: 中央;
}

.ボタン{
  分離：隔離する;
}

h1 {
  フォントの太さ: 300;
  フォントサイズ: 2.5em;
}