css旋转边框特效

CSS旋转边框特效基础概念

CSS旋转边框特效是一种视觉效果，通过CSS的动画和变换属性实现边框的旋转动画。这种效果可以用于按钮、图标、卡片等元素，增加页面的动态感和吸引力。

类型

纯CSS旋转：使用transform属性和animation属性来实现边框的旋转动画。
伪元素旋转：通过创建伪元素（如::before或::after）并应用旋转动画来实现边框效果。

应用场景

按钮：在用户点击按钮时，按钮的边框可以旋转，表示正在处理请求。
图标：图标旋转可以表示加载状态或动画效果。
卡片：在卡片展开或折叠时，边框旋转可以增加视觉效果。

示例代码

以下是一个简单的CSS旋转边框特效示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS旋转边框特效</title>
    <style>
        .rotating-border {
            width: 100px;
            height: 100px;
            border: 5px solid #3498db;
            border-radius: 50%;
            animation: rotate-border 2s linear infinite;
        }

        @keyframes rotate-border {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="rotating-border"></div>
</body>
</html>