纯CSS丝滑边框线条动画

作者：System 时间：2024年08月18日分类：所有,css 字数：841

这篇文章距离上次修改已过257天，其中的内容可能已经有所变动。

以下是一个简单的示例，展示了如何使用纯CSS创建一个简单的丝滑边框线条动画：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Silk-like Border Animation</title>
<style>
  .silk-border {
    width: 200px;
    height: 200px;
    background: #f7f7f7;
    border: 2px solid #dcdcdc;
    border-radius: 50%;
    position: relative;
    animation: silk-slide 2s infinite alternate ease-in-out;
  }

  @keyframes silk-slide {
    0% {
      border-color: #dcdcdc;
    }
    50% {
      border-color: #f7f7f7;
    }
    100% {
      border-color: #dcdcdc;
    }
  }
</style>
</head>
<body>
<div class="silk-border"></div>
</body>
</html>

这段代码定义了一个带有白色背景的圆形div，其边框初始为一灰色。通过@keyframes定义的silk-slide动画使得边框颜色在白色和灰色之间交替，产生丝滑的视觉效果。动画时长为2秒，无限循环，且在每次循环中交替变化。

纯CSS丝滑边框线条动画

评论已关闭

推荐阅读