html - 我怎样才能使这个 div block 转换方式与这个网站示例相同

Question

我试图在这个网站上找到使启动网站下方的 Div block 具有动画效果的 CSS:https://district2.studio/project/dafi/ - 但似乎无法复制动画

我在样式表中找到

<div class="text__mask-wrap" style="transform: matrix(1, 0, 0, 1, 0, 0);"<a class="post__title-launch d-inline-block" target="_blank" href="https://www.dafi.vn/">
                        <p class="mb-0">Launch Website</p>
                        <div class="launch__icon">
                            <span id="line-primary" class="line d-inline-block" style="width: 30px;"></span>
                            <span id="line-left" class="line d-block" style="opacity: 1; width: 0px;"></span>
                            <span id="line-right" class="line d-block" style="opacity: 1; width: 0px;"></span>
                        </div>
                    </a>
                </div>

但是在 html 或 css 中找不到任何其他与此 div block 相关并对其进行动画处理的内容。

我期待某种过渡，但似乎找不到。

我正在建立我的第一个网站，想尝试使用这种 div block 动画。

<div class="text__mask-wrap" style="transform: matrix(1, 0, 0, 1, 0, 0);"><a class="post__title-launch d-inline-block" target="_blank" href="https://www.dafi.vn/">
                        <p class="mb-0">Launch Website</p>
                        <div class="launch__icon">
                            <span id="line-primary" class="line d-inline-block" style="width: 30px;"></span>
                            <span id="line-left" class="line d-block" style="opacity: 1; width: 0px;"></span>
                            <span id="line-right" class="line d-block" style="opacity: 1; width: 0px;"></span>
                        </div>
                    </a>
                </div>

预期的是线在鼠标悬停时宽度增加，然后鼠标离开它应该从中间开始增长，另外 2 条线的宽度应该缩小到 0px

查看网站启动网站按钮以进行可视化表示

Answer 1

您应该使用 javascript 代码来实现此效果。如果您在元素中添加了 jquery 库，请使用此代码:

$(".mb-0").hover(
function() {
    var elWidth = $(this).width();
    $(".launch__icon .line.d-inline-block").css({"width" : elWidth, "transition": "width 0.4s ease-out"});
    $(".launch__icon .line.d-block").css({"width" : (elWidth/2), "opacity":"0"});
}, function() {
    $(".launch__icon .line.d-inline-block").css({"width" : "30px", "transition": "width 0.4s ease-out", "transition-delay": "0.01s"});
    $(".launch__icon .line.d-block").css({"width" : "0", "opacity":"1", "transition": "width 0.45s ease-out"});
});

并使用下面的 CSS:

.launch__icon {
width: 100%;
position: relative;
height: 2px;
text-align: center;
font-size: 0;
}

.launch__icon #line-primary {
display: inline-block;
width: 30px;
height: 2px;
background: #fff;
}

.launch__icon #line-left {
left: 0;
}

.launch__icon #line-left,
.launch__icon #line-right {
position: absolute;
width: 50%;
background: #fff;
height: 2px;
top: 0;
opacity: 0;
}


.launch__icon #line-right {
right: 0;
}

.mb-0,
.my-0 {
 margin-bottom: 0!important
}

.d-inline-block {
display: inline-block!important;
}