css3delete

Here I will introduce to you the deletion effect in CSS3 to better optimize web design.

CSS3 is an upgraded version of CSS, which introduces many new features and effects, including deletion effects. First, take a look at the native strikethrough style in CSS3:

text-decoration: line-through;

This style will add a center line to the text, indicating that the text has been deleted.

However, this simple strikethrough effect is no longer cool enough. We need some more creative strikethrough effects to make our web pages more beautiful.

In CSS3, we can use pseudo elements (::before and ::after) and CSS animations to create various deletion effects.

Below, we introduce several commonly used deletion effects.

1. Slash strikethrough

Slash strikethrough is a relatively simple strikethrough effect, which is achieved by setting the ::before pseudo element style to achieve.

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

In the above code, we set the original strikethrough style to none, then set the parent element to position: relative, and add another ::before pseudo-element and sets its content to a slash signal. Next, center align the slash signal through the offset and transform properties, and set the transparency and animation effects. When the mouse hovers over the parent element, the slash rotation effect is achieved by setting the style of the pseudo element and the transition attribute.

2. Vertical strikethrough

Vertical strikethrough is also a relatively simple effect. In addition to using the ::before pseudo element, we also This can be achieved using the ::after pseudo-element.

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

In the above code, we also set the original strikethrough style to none, then set the parent element to position: relative, and add ::before and ::after pseudo-elements. Next, achieve the animation effect by setting the style and transtion attribute of the pseudo element. When the mouse hovers over the parent element, set the height of the pseudo element to be equal to the parent element by setting the style, and then slowly display the vertical strikethrough effect.

3. Burning strikethrough

Burning strikethrough is an interesting effect that requires the use of CSS3 animation to achieve.

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

In the above code, we also set the original strikethrough style to none, then set the parent element to position: relative, and add ::beforePseudo element. Next, the effect of burning strikethrough is achieved by setting the style and animation effect of the pseudo element. The keyframes keyword specifies three key frames in the animation, which are 0%, 50% and 100%. Achieve the burning effect by gradually reducing the transparency and increasing the width.

4. Cross strikethrough

Cross strikethrough is a relatively complex effect that requires the help of multiple pseudo-elements and absolute positioning to achieve.

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

In the above code, we also set the original strikethrough style to none, then set the parent element to position: relative, and add ::before and ::after pseudo-elements. Next, achieve the animation effect by setting the style of the pseudo element and the transition attribute. When the mouse hovers over the parent element, set the style of the pseudo element to offset its width to 0, and use the offset to make its two ends cross into a strikethrough effect.

The above is an introduction to some common deletion effects in CSS3. I hope it will be helpful to everyone. In actual web design, we can choose different deletion effects according to specific needs to achieve a cooler page effect.

The above is the detailed content of css3delete. For more information, please follow other related articles on the PHP Chinese website!