英文:
Create a CSS animated diagonal line
问题
以下是翻译好的部分:
"Can someone help me in replicating the animated red line on the Mahindra?"(有人可以帮我复制Mahindra上的动画红线吗?)
"I have tried using the CSS but it didn't work."(我尝试使用CSS但没有成功。)
"I have replicated the existing CSS but I'm having no luck, it seems such a simple thing but I can't make it work."(我复制了现有的CSS但没有成功,这似乎是一件很简单的事情,但我无法让它工作。)
"Edit: I have got it working, but only on hover, is there a way to do it automatically?"(编辑:我已经让它在悬停时工作,是否有办法让它自动工作?)
接下来是您提供的HTML和CSS代码,由于是代码部分,不需要翻译。
英文:
Can someone help me in replicating the animated red line on the Mahindra?
I have tried using the CSS but it didn't work.
I have replicated the existing CSS but I'm having no luck, it seems such a simple thing but I can't make it work.
Edit: I have got it working, but only on hover, is there a way to do it automatically?
Here's my code:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.content {
position: absolute;
width: 60%;
left: calc(5% + 0.75rem);
transform: translate(0, 0%);
top: 20%;
color: #000;
z-index: 2;
}
.content:before {
content: "";
display: block;
position: absolute;
width: 120px;
height: 8px;
background: #dd052b;
left: 0;
top: 50px;
transform: rotate(-20deg) skew(-20deg) translate(-120%, 0);
clip-path: inset(0 100% 0 0);
}
.content:after {
content: "";
display: block;
position: absolute;
width: 120px;
height: 8px;
background: #dd052b;
left: 0;
bottom: auto;
top: 50px;
transform: rotate(-20deg) skew(-20deg) translate(200%, 0%);
clip-path: inset(0 100% 0 0);
}
.content:hover:after {
clip-path: inset(0 0% 0 0);
transition: all 0.6s linear;
transition-delay: 1s;
}
.content:hover:before {
clip-path: inset(0 0% 0 0);
transition: all 0.6s linear;
transition-delay: 0s;
}
<!-- language: lang-html -->
<div class="content text-center text-lg-start active">
<small style="transform: translate3d(0px, 0px, 0px); opacity: 1; visibility: inherit;">ABOUT US</small>
<h1 class="heading font-medium font-size-tb" style="transform: translate3d(0px, 0px, 0px); opacity: 1; visibility: inherit;">Planet, People, Trust</h1>
<p style="transform: translate3d(0px, 0px, 0px); opacity: 1; visibility: inherit;">Committed to drive positive change across global markets and communities.</p>
</div>
<!-- end snippet -->
答案1
得分: 0
基本上,您使用了 ::after
和 ::before
并在 :hover
上覆盖了它们。由于您希望它是“自动的”,您应该使用 CSS 动画。
我已经创建了一个动画。还添加了 animation-delay: 750ms;
属性,以使 ::after
在开始之前等待 750ms
(因此 ::before
将工作 1000ms
,并在 750ms
后 ::after
将开始)。还将 ::after
的 opacity: 0;
添加为在显示 ::before
期间隐藏它,并在动画结束时将其更改为 1
,还添加了 animation-fill-mode: forwards;
以保持 ::after
的最后状态。
此外,我删除了许多不需要的内容(除非您以其他方式使用它们),因此以下是最终的代码:
.content {
position: absolute;
width: 60%;
left: calc(5% + 0.75rem);
transform: translate(0, 0%);
top: 20%;
}
@keyframes animation {
0% {
clip-path: inset(0 100% 0 0);
}
100% {
clip-path: inset(0 0% 0 0);
opacity: 1;
}
}
.content:before {
content: "";
position: absolute;
width: 120px;
height: 8px;
background: #dd052b;
top: 50px;
animation: animation 1s;
transform: rotate(-20deg) skew(-20deg) translate(-120%, 0);
}
.content:after {
opacity: 0;
content: "";
position: fixed;
width: 120px;
height: 8px;
background: #dd052b;
top: 50px;
animation: animation 1s;
animation-delay: 750ms;
animation-fill-mode: forwards;
transform: rotate(-20deg) skew(-20deg) translate(200%, 0%);
}
<div class="content">
<small>ABOUT US</small>
<h1>Planet, People, Trust</h1>
<p>Committed to drive positive change across global markets and communities.</p>
</div>
英文:
Basically, you had ::after
and ::before
and you overrode them on :hover
. Since you want it to be "automatic", you should use CSS animations.
I've created an animation. Also added animation-delay: 750ms;
property to make ::after
wait 750ms
before it starts (so ::before
will work for 1000ms
and after 750ms
::after
will start). Also added opacity: 0;
to ::after
to hide it during showing ::before
and changed it to 1
at the end of animation, as well as I added animation-fill-mode: forwards;
to keep the last state of ::after
.
Also, I removed a lot of not needed stuff (unless you were using them for some other purpose), so here's the final code:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.content {
position: absolute;
width: 60%;
left: calc(5% + 0.75rem);
transform: translate(0, 0%);
top: 20%;
}
@keyframes animation {
0% {
clip-path: inset(0 100% 0 0);
}
100% {
clip-path: inset(0 0% 0 0);
opacity: 1;
}
}
.content:before {
content: "";
position: absolute;
width: 120px;
height: 8px;
background: #dd052b;
top: 50px;
animation: animation 1s;
transform: rotate(-20deg) skew(-20deg) translate(-120%, 0);
}
.content:after {
opacity: 0;
content: "";
position: fixed;
width: 120px;
height: 8px;
background: #dd052b;
top: 50px;
animation: animation 1s;
animation-delay: 750ms;
animation-fill-mode: forwards;
transform: rotate(-20deg) skew(-20deg) translate(200%, 0%);
}
<!-- language: lang-html -->
<div class="content">
<small>ABOUT US</small>
<h1>Planet, People, Trust</h1>
<p>Committed to drive positive change across global markets and communities.</p>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论