糯麦 NurMai

400-158-5662

糯麦科技

/

新闻资讯

/

技术讨论

/

纯CSS打造的流畅边框线条动画

纯CSS打造的流畅边框线条动画

原创 新闻资讯

于 2024-06-04 20:49:33 发布

15806 浏览

1.gif

在浏览minimal-portfolio-swart.vercel.app这个网站时,我注意到了一个引人注目的交互设计。这个交互不仅令人眼前一亮,而且极大地提升了用户体验。具体来说,如上图所展示,卡片上有一根优雅的白色线条在缓缓环绕,与此同时,线条所经之处还伴随着一块细腻的模糊阴影。特别值得一提的是,当线条经过卡片的圆角部分时,那种流畅的过渡和细腻的视觉效果,让人感受到了一种极致的丝滑感,仿佛是在欣赏一场精致的视觉盛宴。


今天的文章就来解析如何实现这种效果,文末附源码预览地址。根据示例图片分析需要实现的功能点如下:

● 线条跟随卡片边框匀速移动

● 线条内部对应有模糊阴影

● 圆角部分丝滑动画

这里为什么单独说明圆角部分是因为这块需要特殊处理,请看后面的文章。


深入思考

初见这个效果,我被其丝滑的动画呈现所吸引。如果这种沿着边框移动的动画元素是实时根据当前边框进行复杂计算得出的,那么无疑会大大增加实现的难度,并且可能会使许多开发者望而却步。


然而,我们可以采取一种更为简洁和巧妙的思路。实际上,移动的线条元素并不直接依赖于边框的形状或尺寸。它仅仅是一个元素,沿着预设的路径(即模拟的边框路径)进行移动。同时,线条与卡片内部的阴影共同构成了一个整体效果,通过透视或阴影投射的方式,使得这种效果看起来像是线条“贴合”在卡片边框上移动,并在内部产生了相应的阴影效果。


这样的实现方式不仅简化了算法和计算过程,而且能够使效果更加流畅和自然,同时也降低了开发者的实现难度。


通过透视实现边框效果

通过透视的方式实现一个边框效果,我们可以用2个盒子嵌套,父级设置1像素的padding,如下代码简单的实现一个边框效果。

.outer {
  width: 400px;
  height: 200px;
  margin: 100px;
  background: rgb(54, 224, 202);
  padding: 1px;
  position: relative;
}

.inner {
  background: rgb(99, 99, 99);
  width: 100%;
  height: 100%;
}

效果图:

2.jpg


然后增加一个子元素作为移动的元素,这个元素基于父级定位在边框位置,由于动画是沿着卡片内部四周移动,要确保在每一条边上的透出的长度保持一致,所有创建的这个子元素是一个正方形。

.moving-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    background: #fff;
    animation: moveAround 8s linear infinite;
}

并对这个元素增加简单的animation动画,沿着内边框移动。


这个动画需要注意的一个点是要使元素在移动的过程中保持匀速的动画,需要计算每个关键帧之间的距离,并根据这些距离来调整每个关键帧的百分比。这样可以确保元素在每个时间段内移动的距离与时间成正比,从而实现真正的匀速移动。


这里我们以上面的卡片举例,其宽度为400px,高度为200px,元素沿矩形的边框移动。


● 计算总路径长度:总长度 = 2 (宽度 + 高度) = 2 (400px + 200px) = 1200px

● 计算每段所占的时间比例:水平边所占比例 = 400px / 1200px = 1/3 ≈ 33.33%,垂直边所占比例 = 200px / 1200px = 1/6 ≈ 16.67%

动画代码如下:

@keyframes moveAround {
    0%, 100% {
        top: 0px;
        left: 0px;
    }
    33.33% {
        top: 0px;
        left: calc(100% - 80px);
    }
    50% {
        top: calc(100% - 80px);
        left: calc(100% - 80px);
    }
    83.33% {
        top: calc(100% - 80px);
        left: 0px;
    }
}

最终完成的简单版动画效果如下:

3.gif

这里为了方便大家看增加了透明度展示内部移动的元素,若去掉透明度则只有边框上的一根线。


边框效果处理

仔细看上面的图可以发现在边框尽头时的过渡效果不好,瞬间从一条边切换到另一条边。首先还原网站的效果,增加边框圆角,然后将内部移动的元素通过圆角变成一个圆形,这时候还需要同步调整内部元素的定位和动画移动时设置的定位,保证内部圆形的中心和边框的一致。

增加圆角处理:

.outer {
  border-radius: 20px;
}

.inner {
  border-radius: 20px;
}

.moving-element {
  border-radius: 40px;
  /* 圆心和边框一致 */
  transform: translate(-40px, -40px);
}

调整动画过程中的定位:

@keyframes moveAround {
    0%, 100% {
        top: 0px;
        left: 0px;
    }
    33.33% {
        top: 0px;
        left: 100%;
    }
    50% {
        top: 100%;
        left: 100%;
    }
    83.33% {
        top: 100%;
        left: 0px;
    }
}

此时的动画效果:

4.gif


此时的边框位置动画已经很接近网站的效果,进一步观察在图中的效果可以发现在边框角落的位置有一点卡顿的感觉,这是因为边框位置我们设置了圆角,但是元素移动的轨迹是直角,导致视觉上停顿了一下。这里我们需要进一步优化animation。设置圆角后内部动画元素移动的点应该从4个变成8个,且对应的位置需要和圆角的大小一一对应才能保障流畅的动画效果。


如下所示黑色圆点是到四个顶点的动画坐标,新的绿色圆点是基于圆角后的动画移动坐标。

5.jpg

基于上面的动画百分比算法计算出最新的比例及坐标代码如下:

@keyframes moveAround {
  0% { left: 40px; top: 0px; }
  28.93% { left: 360px; top: 0px; } 
  33.99% { left: 400px; top: 40px; } 
  44.82% { left: 400px; top: 160px; }
  49.88% { left: 360px; top: 200px; } 
  78.81% { left: 40px; top: 200px; }
  83.87% { left: 0px; top: 160px; } 
  94.70% { left: 0px; top: 40px; } 
  100% { left: 40px; top: 0px; } 
}

这里的动画需要注意的是圆角部分绿色按钮之间的动画距离需要使用使用勾股定理计算。比如右上角的两个点之间的计算方式是:

从 (360, 0) 到 (400, 40) = √((400-360)² + (40-0)²) = √(1600 + 1600) = √3200 ≈ 56.57px

此时的动画效果:

6.gif

模糊阴影

现在就差最后的阴影部分还未实现,仔细观察移动的线条并不是全实心纯色,而是有渐变的效果,目前移动的元素是一个正方形,设置背景色为径向渐变即可,修改背景色的代码如下:

background-image: radial-gradient(#fff 40%,transparent 80%);

7.jpg

现在还需要将内部的渐变进一步模糊,注意这里仅仅是模糊元素背后的背景,不能影响卡片上面其他的元素内容展示。这里我们使用backdrop-filter设置blur模糊效果。

CSS属性 backdrop-filter 用于在元素后面的区域上应用图形效果(如模糊或颜色偏移)。这个属性可以让你对元素背后的背景进行处理,而不影响元素本身的前景内容。

8.jpg

最后进一步调整颜色还原网站的效果如下:

9.gif

这个效果不仅可以做卡片展示,作为按钮的背景效果也很不错:

10.gif


最后

到此整体的代码实现过程就结束了,完整还原的网站的动画效果。这是一个对用户体验很不错的卡片效果,原网站实现的部分细节不一样,整体实现原理差不多,基于两个元素的1像素间距透出移动的线条,配合使用backdrop-filter设置纯背景模糊效果,有兴趣的可以尝试看看。

CSS

肥城网站开发

肥城网站建设

阅读排行

  • 1. 几行代码就能实现Html大转盘抽奖

    大转盘抽奖是网络互动营销的一种常见形式,其通过简单易懂的界面设计,让用户在游戏中体验到乐趣,同时也能增加商家与用户之间的互动。本文将详细介绍如何使用HTML,CSS和JavaScript来实现大转盘抽奖的功能。

    查看详情
  • 2. 微信支付商户申请接入流程

    微信支付,是微信向有出售物品/提供服务需求的商家提供推广销售、支付收款、经营分析的整套解决方案,包括多种支付方式,如JSAPI支付、小程序支付、APP支付H5支付等支付方式接入。

    查看详情
  • 3. 浙江省同区域公司地址变更详细流程

    提前准备好所有需要的资料,包含:房屋租赁合同、房产证、营业执照正副本、代理人身份证正反面、承诺书(由于我们公司其中一区域已有注册另外一公司,所以必须需要承诺书)

    查看详情
  • 4. 阿里云域名ICP网络备案流程

    根据《互联网信息服务管理办法》以及《非经营性互联网信息服务备案管理办法》,国家对非经营性互联网信息服务实行备案制度,对经营性互联网信息服务实行许可制度。

    查看详情
  • 5. 微信小程序申请注册流程

    微信小程序注册流程与微信公众号较为相似,同时微信小程序支持通过已认证的微信公众号进行注册申请,无需进行单独认证即可使用,同一个已认证微信公众号可同时绑定注册多个小程序。

    查看详情