# 抖音自动进入直播间的动画挺有意思的，看看有多少种方式可以实现

站点：答源（https://www.dandroid.cn/）
原文：https://www.dandroid.cn/archives/22396
Canonical：https://www.dandroid.cn/archives/22396
作者：技术信源组
发布日期：2024-10-06
最后更新：2026-11-06 18:51
分类：科技热榜
内容类型：post
说明：本页是原文的纯文本镜像，供大模型与检索器完整读取；不含导航、广告、付费框。引用请以上方「原文」链接为准。

## 正文

在刷抖音的时候，发现有一个直播的专属导航页签，切换到这个页签之后，刷出来的内容全都是直播，不过都是在“门外”观看，没有进入直播间；

短暂的停留之后，会出现一个自动进入直播间的提示，并且有一个描边动画，动画结束之后，就会进入直播间，今天我就尝试通过多种方式来实现这个动画效果。

1. 渐变实现

效果如上图所示，渐变需要使用到的是conic-gradient锥形渐变，文档地址：conic-gradient

代码如下：

 
 Title
 
 html,
 body {
 height: 100%;
 margin: 0;
 }

 body {
 display: flex;
 justify-content: center;
 align-items: center;
 background: linear-gradient(90deg, #1F1C2C 0%, #928DAB 100%);
 color: #fff;
 }

 .wrap {
 position: relative;
 background-color: rgba(255, 255, 255, 0.2);
 width: fit-content;
 padding: 10px 20px;
 border-radius: calc(1em + 10px);
 }

 
 @property --offset {
 syntax: "";
 inherits: false;
 initial-value: 0;
 }

 .wrap.gradient-animation {
 overflow: hidden;
 
 background-image:
 conic-gradient(
 #fff 0%,
 #fff var(--offset),
 transparent var(--offset) 100%
 );
 }

 
 .wrap.gradient-animation::before {
 content: ' ';
 position: absolute;
 top: 2px;
 left: 2px;
 right: 2px;
 bottom: 2px;
 background: #1F1C2C;
 border-radius: inherit;
 z-index: 0;
 }

 .wrap.gradient-animation:hover {
 animation: gradient 5s linear 1 forwards;
 }
 
 @keyframes gradient {
 0% {
 --offset: 0;
 }
 100% {
 --offset: 100%;
 }
 }

 

 
 自动进入直播间

conic-gradient的技术细节就不展开了，感兴趣的可以自行查阅文档，这里主要的技术点在于--offset这个自定义属性，因为渐变本身是不支持动画的，所以需要借助这个自定义属性来实现动画效果，文档地址：@property

这里的效果其并不是很理想，因为conic-gradient的渐变是一个圆形的渐变，而实际效果是边框的一个描边，所以需要使用一个遮罩来挡住多余的部分，只保留描边部分。

由于使用了伪元素来实现遮罩，所以还需要控制层级显示，避免遮罩挡住了文字，并且原效果是透明的背景，这里使用遮罩层之后背景就不能是透明的了，而且动画在每一个部分执行的时间都不连贯。

可以说这种方式有很多的局限性，所以我们来看看下一种方式。

2. 渐变加 mask 实现

渐变加mask的实现思路和上面的类似，主要是解决了上面的背景半透明的问题，文档地址：mask

代码如下：

 自动进入直播间

.wrap.gradient-mask::before {
 content: ' ';
 position: absolute;
 inset: 0;
 background-color: rgba(255, 255, 255, 0.1);
 background-image: conic-gradient(
 #fff 0%,
 #fff var(--offset),
 transparent var(--offset) 100%
 );
 border-radius: inherit;

 mask-image: url("data:image/svg+xml;utf8,");
 mask-size: 100% 100%;
 mask-repeat: no-repeat;
}

.wrap.gradient-mask:hover::before {
 animation: gradient 5s linear 1 forwards;
}

这里把效果整体迁移到了::before伪元素上，使用mask-image里面加了一个svg来处理描边的问题，这样就不需要使用遮罩来挡住多余的部分，只保留描边部分。

但是这里的问题也很明显，那就是svg并不能很好的响应式，而且因为svg的其他原因，导致描边的边宽有点被裁剪，这里也只是提供一个思路，并不是最佳实践。

3. 使用 svg 实现

上面都已经使用到了svg作为遮罩，那么直接使用svg更简单直接，这种情况个人也比较推荐，代码如下：

 
 
 
 
 自动进入直播间

.wrap.svg svg {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
}

.wrap.svg svg > rect {
 width: calc(100% - 2px);
 height: calc(100% - 2px);
 fill: transparent;
 stroke-width: 2;
}

.wrap.svg svg > .rect {
 stroke-dasharray: 350;
 stroke-dashoffset: 350;
 stroke: white;
 stroke-width: 2;
}

.wrap.svg:hover svg > .rect {
 transition: stroke-dashoffset 5s linear;
 stroke-dashoffset: 0;
}

svg的描边效果主要是通过stroke-dasharray和stroke-dashoffset来实现的，svg描边效果也是一个非常有趣的实现。

stroke-dasharray是用来控制虚线的，这个值越大，虚线之间的间隔也越大，大到一定程度这个虚线就正好将整个形状包裹住。

stroke-dashoffset是用来控制虚线的偏移量，当这个值等于stroke-dasharray的时候，虚线就会完全消失，等于0的时候，虚线就会完全显示。

根据svg的特性，描边是在形状的外部，所以最外层有一个半透明的边框路径显示的并不完全，需要通过一些技巧来处理。

所以上面的代码会有两个rect，一个是用来描边的，一个是用来做半透明的边框的，这样就可以实现一个比较完美的描边动画效果。

但是上面的描边起点和终点都是在左上角，如果需要在中间的话，可以通过path来实现，感兴趣的可以自行尝试，这里提供path的代码：

 

path需要微调，因为没有贴边，可以使用一些在线网站来进行调整，比如：svg-path-editor，可自行探索。

总结

这一篇文章通过多种方式来实现一个描边动画效果，主要技术有：

conic-gradient锥形渐变，本身渐变是不支持动画的，但是我们可以通过自定义属性来实现动画效果；

mask遮罩，mask本身其实和背景图的使用方式差不多，但是mask主要用来遮挡多余的部分，在这里我们使用mask来遮挡主要部分，只保留描边部分来实现动画效果；

svg描边，svg描边是一个非常有趣的技术，通过stroke-dasharray和stroke-dashoffset来实现描边动画效果，这种方式是最推荐的。

当然肯定还有其他的方式来实现这个效果，这里只是提供了一些思路，希望对大家有所帮助。

---
由 答源 DAN 底座 1.4.1 生成 · 2026-11-15T17:31:47+00:00