时间戳

首页 > 解决方案 > 如何以与本网站示例相同的方式进行此 div 块转换

html - 如何以与本网站示例相同的方式进行此 div 块转换

问题描述

我正在尝试在此网站上找到使启动网站下方的 Div 块动画的 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 块相关的任何其他内容并为其设置动画。

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

我正在建立我的第一个网站，并想尝试使用这种 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

请参阅网站启动网站按钮以获取视觉表示

标签： htmlcssanimation

解决方案

你应该使用 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;
}

推荐阅读