CSS3삭제-프런트엔드 Q&A-php.cn

여기에서는 웹 디자인을 더 잘 최적화하기 위한 CSS3의 삭제 효과를 소개하겠습니다.

CSS3는 CSS의 업그레이드 버전으로, 삭제 효과를 비롯한 많은 새로운 기능과 효과가 도입되었습니다. 먼저 CSS3의 기본 취소선 스타일을 살펴보세요.

text-decoration: line-through;

로그인 후 복사

이 스타일은 텍스트가 삭제되었음을 나타내기 위해 텍스트에 중앙선을 추가합니다.

그러나 이 단순한 취소선 효과는 더 이상 멋지지 않습니다. 웹 페이지를 더욱 아름답게 만들려면 좀 더 창의적인 취소선 효과가 필요합니다.

CSS3에서는 의사 요소(::before 및 ::after)와 CSS 애니메이션을 사용하여 다양한 삭제 효과를 만들 수 있습니다. ::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

아래에서는 일반적으로 사용되는 몇 가지 삭제 효과를 소개합니다.

슬래시 취소선

슬래시 취소선은 ::before 의사 요소 스타일을 설정하여 수행되는 상대적으로 간단한 취소선 효과입니다. 🎜rrreee🎜위 코드에서는 원래 취소선 스타일을 none으로 설정한 다음 상위 요소를 position:relative로 설정하고 앞에 ::를 추가했습니다. 의사 요소를 선택하고 해당 콘텐츠를 슬래시 신호로 설정합니다. 다음으로 오프셋 및 변형 속성을 통해 슬래시 신호를 중앙 정렬하고 투명도와 애니메이션 효과를 설정합니다. 상위 요소 위로 마우스를 가져가면 의사 요소의 스타일과 transition 속성을 설정하여 슬래시 회전 효과를 얻을 수 있습니다. 🎜

세로 취소선

🎜세로 취소선은 ::before 의사 요소를 사용하는 것 외에도 상대적으로 간단한 효과입니다. 또한 이를 달성하기 위해 ::after 의사 요소를 사용할 수도 있습니다. 🎜rrreee🎜위 코드에서는 원래 취소선 스타일을 none으로 설정한 다음 상위 요소를 position:relative로 설정하고 ::를 앞에 추가했습니다. 및 ::after 의사 요소. 다음으로 의사 요소의 스타일과 transtion 속성을 설정하여 애니메이션 효과를 구현합니다. 상위 요소 위에 마우스를 올렸을 때 스타일을 설정하여 의사 요소의 높이를 상위 요소와 동일하게 설정한 후 천천히 수직 취소선 효과를 표시합니다. 🎜

불타는 취소선

🎜불타는 취소선은 CSS3 애니메이션을 사용해야 달성할 수 있는 흥미로운 효과입니다. 🎜rrreee🎜위 코드에서는 원래 취소선 스타일을 none으로 설정한 다음 상위 요소를 position:relative로 설정하고 ::를 앞에 추가했습니다. 의사 요소. 다음으로, 의사 요소의 스타일과 애니메이션 효과를 설정하여 불타는 취소선 효과를 얻습니다. keyframes 키워드는 애니메이션에서 0%, 50% 및 100%의 세 가지 키프레임을 지정합니다. 점차적으로 투명도를 낮추고 너비를 늘려 버닝 효과를 얻습니다. 🎜

교차 취소선

🎜교차 취소선은 달성하기 위해 여러 의사 요소와 절대 위치 지정의 도움이 필요한 비교적 복잡한 효과입니다. 🎜rrreee🎜위 코드에서는 원래 취소선 스타일을 none으로 설정한 다음 상위 요소를 position:relative로 설정하고 ::를 앞에 추가했습니다. 및 ::after 의사 요소. 다음으로 의사 요소의 스타일과 transition 속성을 설정하여 애니메이션 효과를 구현합니다. 마우스를 상위 요소 위로 가져가면 유사 요소의 스타일을 설정하여 너비를 0으로 오프셋하고 오프셋을 사용하여 두 끝이 취소선 효과로 교차하도록 만듭니다. 🎜🎜위 내용은 CSS3의 몇 가지 일반적인 삭제 효과에 대한 소개입니다. 모든 사람에게 도움이 되기를 바랍니다. 실제 웹 디자인에서는 더 멋진 페이지 효과를 얻기 위해 특정 요구 사항에 따라 다양한 삭제 효과를 선택할 수 있습니다. 🎜

위 내용은 CSS3삭제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!