css3delete

Ici, je vais vous présenter l'effet de suppression en CSS3 pour mieux optimiser la conception web.

CSS3 est une version améliorée de CSS, qui introduit de nombreuses nouvelles fonctionnalités et effets, notamment des effets de suppression. Tout d'abord, jetez un œil au style barré natif en CSS3 :

text-decoration: line-through;

Ce style ajoutera une ligne centrale au texte, indiquant que le texte a été supprimé.

Cependant, ce simple effet barré n'est plus assez cool. Nous avons besoin d'effets barrés plus créatifs pour rendre nos pages Web plus belles.

En CSS3, nous pouvons utiliser des pseudo-éléments (::before et ::after) et des animations CSS pour créer divers effets de suppression. ::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为一个斜杠信号。接着，通过偏移量和transform属性将斜杠信号居中对齐，并设置透明度和动画效果。当鼠标悬停在父元素上时，通过设置伪元素的样式以及transition属性实现了斜杠旋转的效果。

2. 垂直删除线

垂直删除线也是一种比较简单的效果，除了可以使用::before伪元素外，我们还可以使用::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伪元素。接着，通过设置伪元素的样式和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关键字指定了动画中的三个关键帧，分别是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

Ci-dessous, nous présentons plusieurs effets de suppression couramment utilisés.

1. Slash barré

Slash barré est un effet barré relativement simple, qui est défini par le pseudo-élément ::before style à réaliser. #🎜🎜#rrreee#🎜🎜#Dans le code ci-dessus, nous définissons le style barré d'origine sur aucun, puis définissons l'élément parent sur position : relative, puis ajoutons Un pseudo-élément ::before et définit son content sur un signal slash. Ensuite, centrez le signal de barre oblique via les propriétés offset et transform, et définissez les effets de transparence et d'animation. Lorsque la souris survole l'élément parent, l'effet de rotation de la barre oblique est obtenu en définissant le style du pseudo-élément et l'attribut transition. #🎜🎜#

2. Barré vertical

#🎜🎜#Le barré vertical est également un effet relativement simple en plus d'utiliser ::before En plus. au pseudo-élément , nous pouvons également utiliser le pseudo-élément ::after pour y parvenir. #🎜🎜#rrreee#🎜🎜#Dans le code ci-dessus, nous définissons également le style barré d'origine sur aucun, puis définissons l'élément parent sur position : relative et ajoutons Pseudo-éléments ::before et ::after. Ensuite, l'effet d'animation est obtenu en définissant le style et l'attribut transtion du pseudo-élément. Lorsque la souris survole l'élément parent, définissez la hauteur du pseudo-élément pour qu'elle soit égale à celle de l'élément parent en définissant le style, puis affichez lentement l'effet d'un barré vertical. #🎜🎜#

3. Burning barré

#🎜🎜#Burning barré est un effet intéressant qui nécessite l'utilisation d'une animation CSS3 pour être réalisé. #🎜🎜#rrreee#🎜🎜#Dans le code ci-dessus, nous définissons également le style barré d'origine sur aucun, puis définissons l'élément parent sur position : relative et ajoutons le pseudo-élément ::before. Ensuite, l'effet de gravure barrée est obtenu en définissant le style et l'effet d'animation du pseudo-élément. Le mot-clé keyframes spécifie trois images clés dans l'animation, qui sont 0%, 50% et 100%. Obtenez l'effet de gravure en réduisant progressivement la transparence et en augmentant la largeur. #🎜🎜#

4. Barré croisé

#🎜🎜# Le barré croisé est un effet relativement complexe qui nécessite l'utilisation de plusieurs pseudo-éléments et un positionnement absolu pour être obtenu. #🎜🎜#rrreee#🎜🎜#Dans le code ci-dessus, nous définissons également le style barré d'origine sur aucun, puis définissons l'élément parent sur position : relative et ajoutons Pseudo-éléments ::before et ::after. Ensuite, l'effet d'animation est obtenu en définissant le style du pseudo-élément et l'attribut transition. Lorsque la souris survole l'élément parent, définissez le style du pseudo-élément pour décaler sa largeur sur 0 et utilisez le décalage pour que ses deux extrémités se croisent dans un effet barré. #🎜🎜##🎜🎜#Ce qui précède est une introduction à certains effets de suppression courants dans CSS3. J'espère que cela sera utile à tout le monde. Dans la conception Web réelle, nous pouvons choisir différents effets de suppression en fonction de besoins spécifiques pour obtenir un effet de page plus cool. #🎜🎜#

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!