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 (::beforeand::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::beforepseudo 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 tonone, then set the parent element toposition: relative, and add another::beforepseudo-element and sets itscontentto a slash signal. Next, center align the slash signal through the offset andtransformproperties, 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 thetransitionattribute.

2. Vertical strikethrough

Vertical strikethrough is also a relatively simple effect. In addition to using the::beforepseudo element, we also This can be achieved using the::afterpseudo-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 tonone, then set the parent element toposition: relative, and add::beforeand::afterpseudo-elements. Next, achieve the animation effect by setting the style andtranstionattribute 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 tonone, then set the parent element toposition: relative, and add::beforePseudo element. Next, the effect of burning strikethrough is achieved by setting the style and animation effect of the pseudo element. Thekeyframeskeyword 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 tonone, then set the parent element toposition: relative, and add::beforeand::afterpseudo-elements. Next, achieve the animation effect by setting the style of the pseudo element and thetransitionattribute. 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!