gpt4 book ai didi

html - CSS 和 SVG 动画

转载 作者:行者123 更新时间:2023-11-28 15:31:54 28 4
gpt4 key购买 nike

我正在研究按钮悬停效果。我已经设法让它在悬停时显示动画,但是我正在努力反转动画。

我尝试过更改笔画数组和偏移量,但似乎都没有效果。

这是我的标记:

    .btn {
background: #e02c26;
font-weight: 100;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 16px;
font-weight: 400;
line-height: 45px;
margin: 0 auto 2em;
max-width: 160px;
position: relative;
text-decoration: none;
text-transform: uppercase;
vertical-align: middle;
width: 100%;
}

.btn span {
position: absolute;
width: 100%;
text-align: center;
}

.btn svg {
height: 45px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

.btn rect {
fill: none;
stroke: #565656;
stroke-width: 2;
stroke-dasharray: 422, 0;
}

.btn:hover {
background: rgba(225, 51, 45, 0);
font-weight: 900;
letter-spacing: 1px;
}

.btn:hover rect {
stroke-width: 5;
stroke-dasharray: 15, 310;
stroke-dashoffset: 48;
-webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}
    <a href="#" class="btn">
<svg>
<rect x="0" y="0" fill="none" width="100%" height="100%"/>
</svg>
<span>Hover</span>
</a>

最佳答案

您需要在 .rect 上设置过渡,而不是在悬停时设置,因为如果您将其设置在悬停时,过渡仅适用于鼠标进入而不适用于鼠标离开,

但是如果您将它设置在 .rect 上,它会双向工作。

.btn rect {...} 中设置过渡,而不是 .btn:hover rect {...}

查看代码片段:

.btn {
background: #e02c26;
font-weight: 100;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 16px;
font-weight: 400;
line-height: 45px;
margin: 0 auto 2em;
max-width: 160px;
position: relative;
text-decoration: none;
text-transform: uppercase;
vertical-align: middle;
width: 100%;
}

.btn span {
position: absolute;
width: 100%;
text-align: center;
}

.btn svg {
height: 45px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

.btn rect {
fill: none;
stroke: #565656;
stroke-width: 2;
stroke-dasharray: 422, 0;
-webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn:hover {
background: rgba(225, 51, 45, 0);
font-weight: 900;
letter-spacing: 1px;
}

.btn:hover rect {
stroke-width: 5;
stroke-dasharray: 15, 310;
stroke-dashoffset: 48;
}
<a href="#" class="btn">
<svg>
<rect x="0" y="0" fill="none" width="100%" height="100%"/>
</svg>
<span>Hover</span>
</a>

关于html - CSS 和 SVG 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44540338/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com