背景位于带有剪辑路径的右侧：当宽度从 100% 动画到 0 时，路径向右移动

问题描述 投票：0回答：1

在我的 HTML 文档中，我有一个绝对定位的元素，其 

::before
伪元素上带有背景颜色和剪辑路径。该元素充当其后面元素的阴影。我想通过将其宽度从 100% 动画化为 0 来移除该阴影。由于我希望动画向右移动，因此我使用 
right: 0
将元素定位在右侧。

问题是，当我将元素的宽度设置为 0 时，剪切的路径似乎向右移动。

最好看看示例，因为我发现很难解释。

左边的例子是我现在得到的以及我遇到问题的地方。将鼠标悬停在矩形上时，会触发动画，剪辑路径应保持静止，但会移动到元素的右侧。看起来路径总是位于元素的左侧，因此通过将左侧移动到右侧，它只会将路径向右推。但我想要的是左侧移动到右侧，而背景的其余部分保持在原位，随着左侧的前进而消失（从左侧开始）。

右侧的示例是我正在寻找的示例，但从右到左。我想要从左到右相同的效果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style type="text/css">
    </head>
    <body>
        <div id="test-1" class="test"></div>
        <div id="test-2" class="test"></div>
        <div id="svg-container">
        <svg width="200" height="81" viewBox="0 0 200 81" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <path id="test-path" d="M144.5 16L181 1.00195H5L20.5 7.00022L23 19.5002L17.5 31.5L1 24.5V76.0007C1 80.0007 5 80.002 5 80.002H195C195 80.002 199 80.0007 199 76.0007L199 21.5019L189 38.5L168.5 43.5L150 31.5L144.5 16Z" stroke="#36B5A8" stroke-width="2" stroke-linejoin="round"/>
                <clipPath id="test-clip">
                    <use xlink:href="#test-path" />
                </clipPath>
            </defs>
        </svg>
    </body>
</html>

body {
    margin: 0;
    position: relative;
    min-height: 100vh;
}
.test {
  width: 200px;
  height: 80px;
    position: absolute;
    top: 100px;
}
.test:before {
    content: '';
    position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  transition: width 5s linear;
  background-color: rgba(236,71,228, 0.7);
  clip-path: url(#test-clip);
}
.test:hover:before {
    width: 0;
}
#test-1 {
  left: 50px;
}
#test-1:before {
  right: 0;
}
#test-2 {
  left: 300px;
}
#test-2:before {
  left: 0;
}

我尝试更改剪辑路径 

clipPathUnits
属性和 
background-position
属性，但没有成功。

我没有在这里或网上其他地方找到任何可以解决（或解释）我的问题的问题。

我认为这可能与路径的绘制方式、起点有关。

任何帮助将不胜感激。

css clip-path
1个回答
0
投票

您可以考虑将 

clip-path
应用于 
#test-1
元素，而不是其 
::before
伪元素：

body {
    margin: 0;
    position: relative;
    min-height: 100vh;
}
.test {
  width: 200px;
  height: 80px;
    position: absolute;
    top: 100px;
}
.test:before {
    content: '';
    position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  transition: width 5s linear;
  background-color: rgba(236,71,228, 0.7);
}
.test:hover:before {
    width: 0;
}
#test-1 {
  left: 50px;
  clip-path: url(#test-clip);
}
#test-1:before {
  right: 0;
}
<div id="test-1" class="test"></div>
<div id="svg-container">
<svg width="200" height="81" viewBox="0 0 200 81" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <path id="test-path" d="M144.5 16L181 1.00195H5L20.5 7.00022L23 19.5002L17.5 31.5L1 24.5V76.0007C1 80.0007 5 80.002 5 80.002H195C195 80.002 199 80.0007 199 76.0007L199 21.5019L189 38.5L168.5 43.5L150 31.5L144.5 16Z" stroke="#36B5A8" stroke-width="2" stroke-linejoin="round"/>
        <clipPath id="test-clip">
            <use xlink:href="#test-path" />
        </clipPath>
    </defs>
</svg>

否则，如果 

clip-path
必须位于 
::before
伪元素上，您可以通过背景渐变来绘制动画，对其 
background-size
进行动画处理以在视觉上达到相同的效果：

body {
    margin: 0;
    position: relative;
    min-height: 100vh;
}
.test {
  width: 200px;
  height: 80px;
    position: absolute;
    top: 100px;
}
.test:before {
    content: '';
    position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  transition: background-size 5s linear;
  background: linear-gradient(0deg, rgba(236,71,228, 0.7), rgba(236,71,228, 0.7)) no-repeat right / 100% 100%;
  clip-path: url(#test-clip);
}
.test:hover:before {
    background-size: 0% 100%;
}
#test-1 {
  left: 50px;
}
#test-1:before {
  right: 0;
}
<div id="test-1" class="test"></div>
<div id="svg-container">
<svg width="200" height="81" viewBox="0 0 200 81" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <path id="test-path" d="M144.5 16L181 1.00195H5L20.5 7.00022L23 19.5002L17.5 31.5L1 24.5V76.0007C1 80.0007 5 80.002 5 80.002H195C195 80.002 199 80.0007 199 76.0007L199 21.5019L189 38.5L168.5 43.5L150 31.5L144.5 16Z" stroke="#36B5A8" stroke-width="2" stroke-linejoin="round"/>
        <clipPath id="test-clip">
            <use xlink:href="#test-path" />
        </clipPath>
    </defs>
</svg>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.