css3削除

ここでは、Web デザインをより最適化するための CSS3 の削除効果を紹介します。

CSS3 は CSS のアップグレード バージョンで、削除効果を含む多くの新機能と効果が導入されています。まず、CSS3 のネイティブの取り消し線スタイルを見てください:

text-decoration: line-through;

このスタイルは、テキストに中心線を追加し、テキストが削除されたことを示します。

しかし、この単純な取り消し線効果は、もはや十分に魅力的ではありません。Web ページをより美しくするには、さらにクリエイティブな取り消し線効果が必要です。

CSS3 では、疑似要素 (::before および ::after) と CSS アニメーションを使用して、さまざまな削除効果を作成できます。

以下では、一般的に使用される削除エフェクトをいくつか紹介します。

1. スラッシュ取り消し線

スラッシュ取り消し線は比較的単純な取り消し線効果であり、::before 擬似要素スタイルを設定することで実現されます。

text-decoration: none;
position: relative;
&::before {
    content: "/";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: center;
    font-size: 14px;
    color: #666;
    opacity: 0.5;
    transition: all .3s ease;
}
&:hover::before {
    opacity: 1;
    transform: translateY(-50%) rotate(45deg);
}

上記のコードでは、元の取り消し線スタイルを none に設定し、親要素を position:relative に設定して、別の を追加します。 :before 疑似要素を作成し、その content をスラッシュ信号に設定します。次に、offset プロパティと transform プロパティを使用してスラッシュ信号を中央に揃え、透明度とアニメーション効果を設定します。親要素の上にマウスを置くと、擬似要素のスタイルと transition 属性を設定することによって、スラッシュ回転効果が実現されます。

2. 垂直取り消し線

垂直取り消し線も比較的単純な効果です。::before 疑似要素の使用に加えて、This も実行できます。 ::after 疑似要素を使用して実現できます。

text-decoration: none;
position: relative;
&::before, &::after {
    content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #666;
    transition: all .3s ease;
}
&::before {
    left: -6px;
}
&::after {
    right: -6px;
}
&:hover::before, &:hover::after {
    height: 100%;
}

上記のコードでは、元の取り消し線スタイルを none に設定し、親要素を position:relative に設定して、 を追加します。 :before および ::after 擬似要素。次に、疑似要素の style と transtion 属性を設定して、アニメーション効果を実現します。マウスを親要素の上に置くと、スタイルを設定して疑似要素の高さが親要素と同じになるように設定し、垂直方向の取り消し線効果をゆっくりと表示します。

3. 書き込み取り消し線

書き込み取り消し線は興味深い効果であり、実現するには CSS3 アニメーションの使用が必要です。

text-decoration: none;
position: relative;
&::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    height: 2px;
    background-color: #666;
    animation: burn .5s linear infinite;
}
@keyframes burn {
    0% {
        opacity: 1;
        width: 0;
    }
    50% {
        opacity: 1;
        width: 100%;
    }
    100% {
        opacity: 0;
        width: 100%;
    }
}

上記のコードでは、元の取り消し線スタイルを none に設定し、親要素を position:relative に設定して、 を追加します。 :before疑似要素。次に、取り消し線を消す効果は、疑似要素のスタイルとアニメーション効果を設定することによって実現されます。keyframes キーワードは、アニメーション内の 3 つのキー フレーム (0%、50%、100%) を指定します。透明度を徐々に下げ、幅を大きくすることで、燃焼効果を実現します。

4. 十字の取り消し線

十字の取り消し線は比較的複雑なエフェクトであり、実現するには複数の疑似要素と絶対配置の助けを必要とします。

text-decoration: none;
position: relative;
&::before, &::after {
    content: "";
    position: absolute;
    height: 2px;
    width: 0;
    transition: all .3s ease;
    background-color: #666;
}
&::before {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
&::after {
    bottom: 50%;
    right: 0;
    transform: translateY(50%);
}
&:hover::before {
    left: 50%;
    width: 50%;
}
&:hover::after {
    right: 50%;
    width: 50%;
}

上記のコードでは、元の取り消し線スタイルを none に設定し、親要素を position:relative に設定して、 を追加します。 :before および ::after 擬似要素。次に、疑似要素のスタイルと transition 属性を設定して、アニメーション効果を実現します。マウスを親要素の上に置くと、疑似要素のスタイルを設定して幅を 0 にオフセットし、オフセットを使用してその 2 つの端が交差して取り消し線効果になります。

上記は CSS3 における一般的な削除効果の紹介です。皆様のお役に立てれば幸いです。実際の Web デザインでは、特定のニーズに応じてさまざまな削除効果を選択し、よりクールなページ効果を実現できます。

以上がcss3削除の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。