设为首页收藏本站
切换到窄版

爬行的蜗牛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
热搜: golang Linux PHP
爬行的蜗牛»论坛 › 个人专用 › 其他相关知识 › HTML+CSS › 纯CSS丝滑边框线条动画（附源码）
返回列表 发新帖
查看: 132|回复: 0

纯CSS丝滑边框线条动画（附源码）

[复制链接]
yycvip

152

主题

48

回帖

1137

积分

管理员

积分
1137
发表于 2024-11-23 16:59:35 | 显示全部楼层 |阅读模式
效果

111.gif

仅使用CSS实现一种丝滑的边框线条动画效果。关键的实现思路包括：

  • 透视效果：通过设置包含两个嵌套元素，父元素有1像素的padding，从而创建出边框效果。

  • 动画制作：创建一个绝对定位的子元素，使用animation属性让其沿着父元素的边框匀速移动。

  • 匀速动画：通过计算元素移动的路径和距离，调整关键帧百分比，确保动画匀速。

  • 圆角处理：为父元素和子元素添加圆角，并对动画元素进行位置调整，以适应圆角。

  • 动画优化：在圆角处调整动画轨迹，确保过渡自然流畅。

  • 模糊阴影：通过设置子元素的背景径向渐变和使用backdrop-filter属性添加模糊效果，实现阴影效果。


源码
  1. <!DOCTYPE html>
  2. <html lang="en">

  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <style>
  8.     body {
  9.       background: rgb(9, 9, 11);
  10.     }

  12.     .container {
  13.       position: relative;
  14.       width: 400px;
  15.       height: 200px;
  16.       margin: 50px;
  17.       /* 确保有足够空间显示动画 */
  18.       border-radius: 30px;
  19.       overflow: hidden;
  20.       padding: 1px;
  21.     }

  23.     .element {
  24.       background: rgba(9, 9, 11, 0.38);
  25.       border: 1px solid rgb(30, 41, 59);
  26.       width: 100%;
  27.       height: 100%;
  28.       border-radius: 30px;
  29.       -webkit-backdrop-filter: blur(24px);
  30.       backdrop-filter: blur(24px);
  31.       box-sizing: border-box;
  32.     }

  34.     .moving-element {
  35.       position: absolute;
  36.       top: 0;
  37.       left: 40px;
  38.       width: 80px;
  39.       height: 80px;
  40.       background-image: radial-gradient(#cbacf9 40%, transparent 80%);
  41.       border-radius: 40px;
  42.       animation: moveAround 8s linear infinite;
  43.       transform: translate(-40px, -40px);
  44.     }

  46.     @keyframes moveAround {
  47.       0% {
  48.         left: 40px;
  49.         top: 0px;
  50.       }

  52.       28.93% {
  53.         left: 360px;
  54.         top: 0px;
  55.       }

  57.       33.99% {
  58.         left: 400px;
  59.         top: 40px;
  60.       }

  62.       44.82% {
  63.         left: 400px;
  64.         top: 160px;
  65.       }

  67.       49.88% {
  68.         left: 360px;
  69.         top: 200px;
  70.       }

  72.       78.81% {
  73.         left: 40px;
  74.         top: 200px;
  75.       }

  77.       83.87% {
  78.         left: 0px;
  79.         top: 160px;
  80.       }

  82.       94.70% {
  83.         left: 0px;
  84.         top: 40px;
  85.       }

  87.       100% {
  88.         left: 40px;
  89.         top: 0px;
  90.       }
  91.     }
  92.   </style>
  93. </head>

  95. <body>
  96.   <div class="container">
  97.     <div class="moving-element"></div>
  98.     <div class="element"></div>
  99.   </div>
  100. </body>

  102. </html>
复制代码


回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表