如何使这个 div 块的过渡效果与该网站示例相同

Question

如何使这个 div 块的过渡效果与该网站示例相同

3

我正在尝试找到使得https://district2.studio/project/dafi/网站上的下方Div块动画效果的CSS，但是无法复制该动画。

在样式表中我没有找到。

<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块相关联并使其动画化的其他内容。

我原本期望有一些过渡效果，但似乎找不到它。

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

<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>

预期的效果是鼠标悬停时该行会变宽，然后鼠标离开时它应从中间增长，而其他两条线应缩小为0像素宽度。

请查看网站上的“启动网站”按钮以获得视觉表示。

- Evan Thomas-Broughton

你好Evan，请告诉我更多信息，这样我才能帮助你。是指一开始的slideUp还是其他什么？ - Gildas.Tambo

嗨，@Gildas.Tambo，这是启动网站按钮。我正在寻找它下面的那行。如果你将鼠标悬停在上面，它会产生动画效果，这就是我想要解决的问题。 - Evan Thomas-Broughton

2个回答

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;
}

- pegah

非常感谢，我会尝试一下这个。这是网站上正在使用的吗？ - Evan Thomas-Broughton

由于某些原因，仍然无法使其正常工作:(可能需要更多了解JavaScript。 - Evan Thomas-Broughton

我在这里尝试复制它：https://jsfiddle.net/#&togetherjs=VAnQVV7xz5 我做错了什么？@Pegah - Evan Thomas-Broughton

1

我无法打开您的链接，该链接重定向到新页面。您可以在此处找到答案：https://jsfiddle.net/pegahkhf/0Lfa4zbw/3/ - pegah

太好了！非常感谢你 :D - Evan Thomas-Broughton

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gildas.Tambo · Accepted Answer

他们正在使用JavaScript，但你也可以使用CSS来实现，这里有一个示例：

*{box-sizing: border-box}
/*
Since we want it to be centered i will use text-align center on the header which is just a wrapper
*/
header{
  text-align: center
}

/*because the children will be absolute, we need to set the anchor's position to relative*/
a{
  display: inline-block;
  position: relative;
  cursor: pointer;
}
 
.underline{
  position: absolute;
  bottom: 0;
  height: 2px;
  left: 50%;
  width: 100%;
  max-width: 32px;
  margin-left: -16px;
  background-color: black;
  will-change: left,width;
  /*We need an elastic ease here*/
  transition: all .2s cubic-bezier(0.64, 0.57, 0.67, 1.53);
}
a:hover .underline{
  left: 0;
  margin-left: 0;
  max-width: 100%; 
  transition: all .2s ease;
}
a:before,
a:after{
  content: "";
  position: absolute;
  bottom: 0;
  height: 2px;
  width: 0;
  background-color: black;
  will-change: width;
  transition: all .2s ease;
}
a:before{
  left: 0; 
}
a:after{
  right: 0;
}
a:hover:before,
a:hover:after{
  width: 50%;
  transition: all .2s .2s ease;
}

<header>
  <a>
    <p>Launch Website</p> 
    <span class="underline"> </span>
  </a>
<header>