[英]CSS hover for after and before background images
when you hover over the image blue arrow moves slowly.当您将鼠标悬停在图像上时,蓝色箭头会缓慢移动。 When you remove the cursor from the image white arrow comes back sharply.
当您从图像中移除光标时,白色箭头会急剧返回。 How to make a white arrow return slowly?
如何让白色箭头慢慢返回?
@keyframes left_to_right { from {margin-left: -15px;} to {margin-left: 0; } } div .footer-text{ position: absolute; top: 10%; left: 3%; height: 20px; width: 85%; } div .footer-text:after{ content: ''; background: url('https://www.nsartmuseum.ru/images/test/arrow-after-3.png') no-repeat; width: 130px; height: 15px; display: inline-block; margin-left: 10px; position: relative; } div:hover .footer-text:before{ content: ''; background: url('https://www.nsartmuseum.ru/images/test/arrow-before-3.png') no-repeat; width: 130px; height: 15px; margin-right: 5px; display: inline-block; animation: left_to_right 0.4s ease; } div:hover .footer-text:after{ content: ''; background: none; } div .footer-text span{ position: relative; top:-5px; font-size: 12px; color: #313B78; display: inline-block; }
<div> <a href="" class='footer-text'> <span>13 September</span> </a> </div>
Obviously, there are ways to do this by CSS animation, but I've never used this in my development.显然,有一些方法可以通过 CSS 动画来做到这一点,但我从未在我的开发中使用过它。
It's not required to use animation
for that.不需要为此使用
animation
。 transition
is enough just add transition: width .4s ease;
transition
就足够了,只需添加transition: width .4s ease;
to :after
for unhovered element and play with width
attribute to
:after
对于未悬停的元素并使用width
属性
div .footer-text{ position: absolute; top: 10%; left: 3%; height: 20px; width: 85%; } div .footer-text span{ position: relative; top:-5px; font-size: 12px; color: #313B78; display: inline-block; } div .footer-text:after{ content: ''; background: url('https://www.nsartmuseum.ru/images/test/arrow-after-3.png') no-repeat right; width: 130px; height: 15px; display: inline-block; margin-left: 10px; position: relative; transition: width .4s ease; } div:hover .footer-text:after{ width: 0; } div .footer-text:before{ content: ''; background: url('https://www.nsartmuseum.ru/images/test/arrow-before-3.png') no-repeat right; width: 0; height: 15px; margin-right: 5px; display: inline-block; transition: width .4s ease; } div:hover .footer-text:before{ width: 130px; }
<div> <a href="" class='footer-text'> <span>13 September</span> </a> </div>
@keyframes left_to_right { from { margin-left: -15px; } to { margin-left: 0; } } div .footer-text { position: absolute; top: 10%; left: 3%; height: 20px; width: 85%; } div .footer-text:after { content: ''; background: url('https://www.nsartmuseum.ru/images/test/arrow-after-3.png') no-repeat; width: 130px; height: 15px; display: inline-block; margin-left: 10px; position: relative; animation: left_to_right 0.4s ease; } div:hover .footer-text:before { content: ''; background: url('https://www.nsartmuseum.ru/images/test/arrow-before-3.png') no-repeat; width: 130px; height: 15px; margin-right: 5px; display: inline-block; animation: left_to_right 0.4s ease; } div:hover .footer-text:after { display: none; } div .footer-text span { position: relative; top: -5px; font-size: 12px; color: #313B78; display: inline-block; }
<div> <a href="" class='footer-text'> <span>13 September</span> </a> </div>
I do it:)我这样做:)
div { width:50%; position: relative; height: 20px; } div .footer-text{ position: absolute; top: 0; left: 0; line-height: 20px; width: 100%; height: 100%; font-family: sans-serif; overflow: hidden; } div .footer-text:before { content: ''; background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%228%22%20height%3D%2215%22%20viewBox%3D%220%200%208%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%201.5l6%206-6%206%22%20stroke%3D%22%23C5C8D0%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E') no-repeat right center; background-size: 8px; width: 8px; height: 15px; position: absolute; right: 0; top: 50%; transform: translate(0,-7px); z-index: 2; transition: .4s ease-in-out; } div .footer-text span { position: absolute; top: 0; left: 0; font-size: 12px; color: #313B78; display: block; white-space: nowrap; z-index: 1; transition: .4s ease-in-out; } div .footer-text span:before { content: ''; display: block; width: 100vw; height: 15px; position: absolute; top: 50%; right: 100%; margin: -7px 20px 0 0; background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221110%22%20height%3D%2214%22%20viewBox%3D%220%200%201110%2014%22%3E%3Cpath%20fill%3D%22%23313B78%22%20d%3D%22M1109.424%206.076l-6-6a.599.599%200%2010-.848.848l4.975%204.976H1a.6.6%200%20100%201.2h1106.551l-4.975%204.976a.599.599%200%2010.848.848l6-6a.6.6%200%20000-.848z%22%2F%3E%3C%2Fsvg%3E') no-repeat right top; background-size: auto 14px; } div .footer-text span:after { content: ''; display: block; width: 100vw; height: 1px; position: absolute; top: 50%; background: #C5C8D0; left: calc(100% + 20px); } div .footer-text:hover:before { transform: translate(20px,-7px); } div .footer-text:hover span { left: 100%; transform: translateX(-100%); }
<div> <a href="" class='footer-text'> <span>13 September</span> </a> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.