css3删除

百变鹏仔 3个月前 (10-31) #前端问答

这里给大家介绍一下css3中的删除效果，以便更好地优化网页设计。

CSS3是CSS的升级版本，引入了很多新的特性和效果，其中就包括删除效果。首先看一下CSS3中原生的删除线样式：

text-decoration: line-through;

这个样式会在文本中添加一条中划线，表示该文本已被删除。

但是，这种简单的删除线效果已经不够酷炫了，我们需要一些更加有创意的删除效果来让我们的网页更加优美。

在CSS3中，我们可以使用伪元素(::before和::after)和CSS动画来制作各种删除效果。

立即学习“前端免费学习笔记（深入）”；

下面，我们分别介绍几个比较常用的删除效果。

斜杠删除线

斜杠删除线是一种比较简单的删除线效果，它通过设置::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属性实现了斜杠旋转的效果。

垂直删除线

垂直删除线也是一种比较简单的效果，除了可以使用::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属性来实现动画效果。当鼠标悬停在父元素上时，通过设置伪元素的样式将其高度设置为与父元素相等，再慢慢地显示出垂直删除线的效果。

燃烧删除线

燃烧删除线是一种比较有趣的效果，需要使用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%。通过逐渐降低透明度和加大宽度来实现燃烧效果。

交叉删除线

交叉删除线是一种比较复杂的效果，需要借助多个伪元素和绝对定位来实现。

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，并通过偏移量使其两端交叉成一条删除线的效果。

文章推荐

css3删除

javascript里怎么输入

网页关闭javascript

javascript怎么实现异步

javascript隐藏的元素显示属性

javascript要全部记住吗