[分享]css3按钮边框旋转

CSS3是一种非常强大的样式语言，它可以使网页变得更加美观，更加易于操作。其中CSS3的按钮边框旋转是一种常见的效果，下面我们就来了解一下它的实现方式。.btn { : relative; displ...

CSS3是一种非常强大的样式语言，它可以使网页变得更加美观，更加易于操作。其中CSS3的按钮边框旋转是一种常见的效果，下面我们就来了解一下它的实现方式。

.btn {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    background: #fff;
    border: 2px solid #333;
    color: #333;
    font-size: 16px;
    transition: all .3s ease-out;
    cursor: pointer;
}

.btn:hover {
    border-color: #ff0000;
    color: #ff0000;
}

.btn::before, .btn::after {
    content: ';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    border: 2px solid #333;
    transform: rotate(-45deg);
    transition: all .3s ease-out;
}

.btn::before {
    transform-origin: 0 100%;
}

.btn::after {
    transform-origin: 100% 0;
}

.btn:hover::before, .btn:hover::after {
    border-color: #ff0000;
}

.btn:hover::before {
    transform: rotate(45deg);
}

.btn:hover::after {
    transform: rotate(-135deg);
} 

以上是按钮边框旋转的代码示例，通过设置按钮的伪元素before和after来实现。通过设定transform-origin属性可以设置旋转中心点的位置，通过将before元素旋转45度和after元素旋转-45度，并设置边框颜色的过渡效果，实现点击时按钮边框的旋转效果。