css3刪除

這裡跟大家介紹一下CSS3中的刪除效果，以便更好地優化網頁設計。

CSS3是CSS的升級版本，引進了許多新的特性和效果，其中就包含刪除效果。首先來看看CSS3中原生的刪除線樣式：

text-decoration: line-through;

這個樣式會在文字中加入一條中劃線，表示該文字已被刪除。

但是，這種簡單的刪除線效果已經不夠酷炫了，我們需要一些更有創意的刪除效果來讓我們的網頁更加優美。

在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為一個斜線訊號。接著，透過偏移量和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屬性來實現動畫效果。當滑鼠懸停在父元素上時，透過設定偽元素的樣式將其寬度抵消到0，並透過偏移量使其兩端交叉成一條刪除線的效果。

以上就是介紹的CSS3中的一些常見刪除效果，希望對大家有幫助。在實際的網頁設計中，我們可以根據特定需求來選擇不同的刪除效果，從而實現更酷炫的頁面效果。

以上是css3刪除的詳細內容。更多資訊請關注PHP中文網其他相關文章！