Как я могу сделать этот переход блока Div так же, как этот пример веб-сайта

Question

Я пытаюсь найти CSS, который делает блок Div под веб-сайтом запуска анимированным на этом сайте: 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 и анимирует его.

Я ожидал какого-то перехода, но, похоже, не смог его найти.

Я создаю свой первый веб-сайт и хотел попробовать использовать такую ​​анимацию блоков 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>

Ожидается, что при наведении курсора линия будет увеличиваться в ширину, затем при отключении мыши она должна расти из середины, а 2 другие линии должны уменьшиться до 0px в ширину

См. Запуск веб-сайтакнопка сайта для визуального представления

Answer 1

Они используют 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>

Answer 2

Вы должны использовать код 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;
}