【发布时间】：2018-01-10 21:02:30
【问题描述】：
我有一个简单的布局：
- 分屏，一段为白色，一段为黑色。
- 居中徽标，半黑半白
- 当您将鼠标悬停在黑色部分时，它会从下到上用白色填充
现在，我想做什么：
- 当我将鼠标悬停在右侧时，从下到上用黑色填充徽标。
- 当我将鼠标悬停在左侧部分时，用白色从上到下填充徽标
我尝试了很多事情......但我总是失败。
我认为最简单的解决方案是将具有线性渐变的矩形作为背景图像，添加蒙版，然后移动背景位置。
这是一个sn-p：
$( document ).ready(function() {
$(".split-half").hover(function(){
var elem = $(this);
$(".split-half").each(function(){
$(this).removeClass('active');
setTimeout(function(){
elem.addClass('active');
}, 400);
});
});
});body *, *:after, *:before {
box-sizing: border-box;
margin:0;
padding:0;
}
html, body {
height: 100%;
}
.split-half {
display: block;
width: 50%;
height: 100%;
position: absolute;
z-index: 1;
padding: 5%;
}
.split-half:nth-child(1) {
background: #fff;
left: 0;
}
.split-half:nth-child(1):after {
content: '';
width: 100%;
height: 0;
position: absolute;
top: 0;
left: 0;
background: #000;
transition: height .3s;
}
.split-half:nth-child(1).active:hover:after {
height: 100%;
z-index: -1;
}
.split-half:nth-child(2) {
background: #000;
right: 0;
}
.split-half:nth-child(2):after {
content: '';
width: 100%;
height: 0;
position: absolute;
bottom: 0;
left: 0;
background: #fff;
transition: height .3s;
}
.split-half:nth-child(2).active:hover:after {
height: 100%;
z-index: -1;
}
.split-half:nth-child(2).active:hover + #logo #rect {
background-position: 0% 100%;
}
#logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-39.8%, -50%);
max-width: 420px;
min-width: 120px;
width: 10%;
height: auto;
z-index: 10;
}
#logo #rect {
background-image: linear-gradient(to bottom, white 0%, white 50%, black 50%, black 100%);
background-position: 0% 0%;
background-size: 100% 200%;
height: 100%;
width: 100%;
transition: all .3s;
mask: url(#mhSvg);
position: absolute;
top: 0;
right: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="split-half"></div>
<div class="split-half">
</div>
<div id="logo">
<svg width="100%" height="100%" viewBox="0 0 187 174" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<defs>
<g id="hSvg">
<path d="M74.624,173.782l111.609,-55.886l-24.82,-12.41l-24.82,12.41l-24.82,-12.41l24.82,-12.41l-24.82,-12.41l-111.773,55.804l24.984,12.492l61.969,-31.066l24.82,12.41l-61.969,31.066" style="fill:#fff;"/>
</g>
<mask id="mhSvg" x="0" y="0" width="100%" height="100%">
<g id="hSvg">
<path d="M74.624,173.782l111.609,-55.886l-24.82,-12.41l-24.82,12.41l-24.82,-12.41l24.82,-12.41l-24.82,-12.41l-111.773,55.804l24.984,12.492l61.969,-31.066l24.82,12.41l-61.969,31.066" style="fill:#fff;"/>
</g>
</mask>
<g id="aSvg">
<path d="M0.082,0l74.542,37.271l0,136.511l-24.82,-12.41l0,-62.05l-24.902,-12.451l0,62.05l-24.82,-12.41l0,-136.511Zm24.902,62.091l0,-24.82l24.82,12.41l0,24.821l-24.82,-12.411Z"/>
</g>
</defs>
<g>
<use xlink:href="#hSvg" x="0" y="0" />
<use xlink:href="#aSvg" x="0" y="0" />
</g>
</svg>
<div id="rect">
</div>
</div>
</section>目前，如您所见，我无法定位面具。
你知道我可以如何定位面具吗？
或者你有没有想到更好的方法来达到这个效果？
提前谢谢你！
编辑：
嗯，我找到了一个带掩码的解决方案……但这不是一个好的解决方案，因为它不是跨浏览器。
$( document ).ready(function() {
$(".split-half").hover(function(){
var elem = $(this);
$(".split-half").each(function(){
$(this).removeClass('active');
setTimeout(function(){
elem.addClass('active');
}, 400);
});
});
});/* line 3, ../sass/style.scss */
body *, *:after, *:before {
box-sizing: border-box;
}
html, body {
height: 100%;
margin:0;
padding: 0;
}
.split-half {
display: block;
width: 50%;
height: 100%;
position: absolute;
z-index: 1;
padding: 5%;
}
.split-half:nth-child(1) {
background: #fff;
left: 0;
}
.split-half:nth-child(1):after {
content: '';
width: 100%;
height: 0;
position: absolute;
top: 0;
left: 0;
background: #000;
transition: height .3s;
}
.split-half:nth-child(1).active:hover:after {
height: 100%;
z-index: -1;
}
.split-half:nth-child(1).active:hover ~ #logo #A {
background-position: 0% 0%;
}
.split-half:nth-child(2) {
background: #000;
right: 0;
}
.split-half:nth-child(2):after {
content: '';
width: 100%;
height: 0;
position: absolute;
bottom: 0;
left: 0;
background: #fff;
transition: height .3s;
}
.split-half:nth-child(2).active:hover:after {
height: 100%;
z-index: -1;
}
/* line 58, ../sass/style.scss */
.split-half:nth-child(2).active:hover + #logo #H {
background-position: 0% 100%;
}
#logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-38.5%, -50%);
z-index: 10;
}
#logo #H {
background-image: linear-gradient(to bottom, white 0%, white 50%, black 50%, black 100%);
background-position: 0% 0%;
background-size: 100% 200%;
height: 100%;
width: 100%;
transition: all .3s;
mask: url(#mhSvg);
position: absolute;
top: 0;
right: 0;
}
#logo #A {
background-image: linear-gradient(to bottom, white 0%, white 50%, black 50%, black 100%);
background-position: 0% 100%;
background-size: 100% 200%;
height: 100%;
width: 100%;
transition: all .3s;
mask: url(#maSvg);
position: absolute;
top: 0;
right: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="split-half"></div>
<div class="split-half">
</div>
<div id="logo">
<svg width="194" height="181" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<defs>
<g id="hSvg">
<path d="M74.624,173.782l111.609,-55.886l-24.82,-12.41l-24.82,12.41l-24.82,-12.41l24.82,-12.41l-24.82,-12.41l-111.773,55.804l24.984,12.492l61.969,-31.066l24.82,12.41l-61.969,31.066" style="fill:#fff;"/>
</g>
<mask id="mhSvg" x="0" y="0" width="120" height="114">
<g id="hSvg">
<path d="M74.624,173.782l111.609,-55.886l-24.82,-12.41l-24.82,12.41l-24.82,-12.41l24.82,-12.41l-24.82,-12.41l-111.773,55.804l24.984,12.492l61.969,-31.066l24.82,12.41l-61.969,31.066" style="fill:#fff;"/>
</g>
</mask>
<mask id="maSvg" x="0" y="0" width="120" height="114">
<g id="aSvg">
<path d="M0.082,0l74.542,37.271l0,136.511l-24.82,-12.41l0,-62.05l-24.902,-12.451l0,62.05l-24.82,-12.41l0,-136.511Zm24.902,62.091l0,-24.82l24.82,12.41l0,24.821l-24.82,-12.411Z" style="fill:#fff"/>
</g>
</mask>
</defs>
<g>
</svg>
<div id="H">
</div>
<div id="A">
</div>
</div>
</section>我可能不得不深入研究@RobertLongson 提出的建议，即为线性渐变的停靠点设置动画。
编辑 2：
感谢 kute.js，我尝试为线性渐变位置设置动画。 它可以在 Firefox、chrome 中运行，但不能在 IE/Edge 或网站上运行，它们确实有 exemple working on IE/Edge。
这是我的笔，我还在想为什么它不工作。 https://codepen.io/AmauryH/pen/brBgKo
【问题讨论】：
-
用线性渐变填充形状并为停靠点设置动画。
-
@RobertLongson，我试过了，但未能在悬停时为其设置动画。
-
@Lars 感谢您的编辑！
标签： css svg css-animations