Question

我有一个简单的布局：

分屏，一节是白色，另一节是黑色。
居中徽标，半黑半白
当你将黑色部分悬停时，它会从底部到顶部填充白色

现在，我尝试做什么：

当我将鼠标悬停在右边的部分时，用黑色从下到上填充徽标。
当我将部分悬停在左侧

我做了很多事......但我总是失败。

我认为最简单的解决方案是将一个带有线性渐变的矩形作为背景图像，添加一个遮罩然后移动背景位置。

这是一个片段：

＆＃13;

$( document ).ready(function() {
  $(".split-half").hover(function(){
    var elem = $(this);
    $(".split-half").each(function(){
      $(this).removeClass('active');
      setTimeout(function(){ 
        elem.addClass('active');
      }, 400);      
    });
  });
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

现在，正如你所看到的，我无法定位面具。

你知道我如何定位面具吗？

或者你认为有更好的方法来实现这种效果吗？

提前谢谢！

修改

好吧，我找到了一个带面具的解决方案......但它不是一个很好的解决方案，因为它不是跨浏览器。

＆＃13;

$( document ).ready(function() {
  $(".split-half").hover(function(){
    var elem = $(this);
    $(".split-half").each(function(){
      $(this).removeClass('active');
      setTimeout(function(){ 
        elem.addClass('active');
      }, 400);      
    });
  });
});

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

我可能不得不深入研究@RobertLongson提出的建议，即为线性渐变的停止设置动画。

编辑2：

由于 kute.js ，我尝试设置线性渐变位置的动画。它适用于firefox，chrome，但不适用于IE / Edge或网站，它们有exemple working on IE/Edge。

这是我的笔，我仍然想知道它为什么不起作用。 https://codepen.io/AmauryH/pen/brBgKo

Answer 1

我终于决定从空白页开始，采取不同的方法。

具有线性渐变背景（半白/半黑）且徽标为svg background-image的容器
内部另外两个容器，高度为0.一个背景为黑色，另一个背景为白色
在每个全屏跨度中，徽标作为背景图像。（一个标志全黑，另一个全白）

然后，我只需要将容器的高度设置为0到100％，以获得我想要的转换。

为了让白色背景从下到上填满屏幕，我不得不使用一个简单的技巧......我已经从180度的角度旋转了背景的容器，并且我已经旋转了它的孩子角度相同。

这是一个片段：

＆＃13;

var vHeight = $(window).height();
var vWidth = $(window).width();
var screen1 = $('#screen1');

var currentMousePos = { x: -1, y: -1 };
$(document).mousemove(function(event) {
    currentMousePos.x = event.pageX;
    currentMousePos.y = event.pageY;
  if ( currentMousePos.y <= vHeight ){
    if ( currentMousePos.x >= ((vWidth / 2) + (vWidth / 10)) ) {
      $('.svgb-wrapper').css('height', '0');   
      $('.svgw-wrapper').css('height', '100%');
    }
    else if ( currentMousePos.x <= ((vWidth / 2) - (vWidth / 10)) ) {
      $('.svgb-wrapper').css('height', '100%'); 
      $('.svgw-wrapper').css('height', '0'); 
    }
    else {
      $('.svgb-wrapper').css('height', '0'); 
      $('.svgw-wrapper').css('height', '0');     
    }
  };
});

＆＃13;

* {
margin:0; padding:0; border:0;
}
body *, *:after, *:before {
  box-sizing: border-box;
}
html, body {
  height: 100%;
  background: #000;
  color: #fff;
}
#screen1 {
  height: 100%;
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMTg3IDE3NCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW\a 5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2lu\aOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEuNDE0MjE7Ij48cmVjdCBpZD0iUGxhbi1kZS10cmF2YWlsMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjE4Ni4zNjgiIGhlaWdodD0iMTczLjc4MiIgc3R5bG\aU9ImZpbGw6bm9uZTsiLz48Y2xpcFBhdGggaWQ9Il9jbGlwMSI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjE4Ni4zNjgiIGhlaWdodD0iMTczLjc4MiIvPjwvY2xpcFBhdGg+PGcgY2xpcC1wYXRo\aPSJ1cmwoI19jbGlwMSkiPjxwYXRoIGlkPSJoU3ZnIiBkPSJNNzQuNjI0LDE3My43ODJsMTExLjYwOSwtNTUuODg2bC0yNC44MiwtMTIuNDFsLTI0LjgyLDEyLjQxbC0yNC44MiwtMTIuNDFsMjQuOD\aIsLTEyLjQxbC0yNC44MiwtMTIuNDFsLTExMS43NzMsNTUuODA0bDI0Ljk4NCwxMi40OTJsNjEuOTY5LC0zMS4wNjZsMjQuODIsMTIuNDFsLTYxLjk2OSwzMS4wNjYiIHN0eWxlPSJmaWxsOiNmZmY7\aIi8+PHBhdGggaWQ9ImFTdmciIGQ9Ik0wLjA4MiwwbDc0LjU0MiwzNy4yNzFsMCwxMzYuNTExbC0yNC44MiwtMTIuNDFsMCwtNjIuMDVsLTI0LjkwMiwtMTIuNDUxbDAsNjIuMDVsLTI0LjgyLC0xMi\a 40MWwwLC0xMzYuNTExbDAsMFptMjQuOTAyLDYyLjA5MWwwLC0yNC44MmwyNC44MiwxMi40MWwwLDI0LjgyMWwtMjQuODIsLTEyLjQxMWwwLDBaIi8+PC9nPjwvc3ZnPg==") no-repeat left 55% center, linear-gradient(to right, #ffffff 0%, #ffffff 50%, #000000 50%, #000000 100%);
  background-size: 33%, cover;
}
#screen1 .svgw-wrapper {
  height: 0;
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  -moz-transition: all 0.6s;
  -o-transition: all 0.6s;
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
  background: #000;
}
#screen1 .svgw-wrapper .svgw {
  position: absolute;
  top: 0;
  display: block;
  height: 100vh;
  width: 100%;
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCF\a ET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy\a 53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlI\aiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxODcgMTc0IiB2ZXJzaW9uPSIxLjEiIHhtbG5z\aPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzM\aub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJmaWxsLXJ1bGU6ZX\aZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pd\aGVybGltaXQ6MS40MTQyMTsiPjxyZWN0IGlkPSJQbGFuLWRlLXRyYXZhaWwxIiB4PSIwIiB5PSIw\aIiB3aWR0aD0iMTg2LjM2OCIgaGVpZ2h0PSIxNzMuNzgyIiBzdHlsZT0iZmlsbDpub25lOyIvPjx\ajbGlwUGF0aCBpZD0iX2NsaXAxIj48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTg2LjM2OCIgaG\aVpZ2h0PSIxNzMuNzgyIi8+PC9jbGlwUGF0aD48ZyBjbGlwLXBhdGg9InVybCgjX2NsaXAxKSI+P\aHBhdGggaWQ9ImhTdmciIGQ9Ik03NC42MjQsMTczLjc4MmwxMTEuNjA5LC01NS44ODZsLTI0Ljgy\aLC0xMi40MWwtMjQuODIsMTIuNDFsLTI0LjgyLC0xMi40MWwyNC44MiwtMTIuNDFsLTI0LjgyLC0\axMi40MWwtMTExLjc3Myw1NS44MDRsMjQuOTg0LDEyLjQ5Mmw2MS45NjksLTMxLjA2NmwyNC44Mi\awxMi40MWwtNjEuOTY5LDMxLjA2NiIgc3R5bGU9ImZpbGw6I2ZmZjsiLz48cGF0aCBpZD0iYVN2Z\ayIgZD0iTTAuMDgyLDBsNzQuNTQyLDM3LjI3MWwwLDEzNi41MTFsLTI0LjgyLC0xMi40MWwwLC02\aMi4wNWwtMjQuOTAyLC0xMi40NTFsMCw2Mi4wNWwtMjQuODIsLTEyLjQxbDAsLTEzNi41MTFsMCw\awWm0yNC45MDIsNjIuMDkxbDAsLTI0LjgybDI0LjgyLDEyLjQxbDAsMjQuODIxbC0yNC44MiwtMT\aIuNDExbDAsMFoiIHN0eWxlPSJmaWxsOiNmZmY7Ii8+PC9nPjwvc3ZnPg==") no-repeat left 55% center;
  background-size: 33%;
}
#screen1 .svgb-wrapper {
  height: 0;
  width: 100%;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  background: #fff;
  -moz-transition: all 0.6s;
  -o-transition: all 0.6s;
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
#screen1 .svgb-wrapper .svgb {
  position: absolute;
  top: 0;
  display: block;
  height: 100vh;
  width: 100%;
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMTg3IDE3NCIgdmV\ayc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW\a 5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzd\aHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2lu\aOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEuNDE0MjE7Ij48cmVjdCBpZD0iUGxhbi1kZS10cmF\a 2YWlsMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjE4Ni4zNjgiIGhlaWdodD0iMTczLjc4MiIgc3R5bG\aU9ImZpbGw6bm9uZTsiLz48Y2xpcFBhdGggaWQ9Il9jbGlwMSI+PHJlY3QgeD0iMCIgeT0iMCIgd\a 2lkdGg9IjE4Ni4zNjgiIGhlaWdodD0iMTczLjc4MiIvPjwvY2xpcFBhdGg+PGcgY2xpcC1wYXRo\aPSJ1cmwoI19jbGlwMSkiPjxwYXRoIGlkPSJoU3ZnIiBkPSJNNzQuNjI0LDE3My43ODJsMTExLjY\awOSwtNTUuODg2bC0yNC44MiwtMTIuNDFsLTI0LjgyLDEyLjQxbC0yNC44MiwtMTIuNDFsMjQuOD\aIsLTEyLjQxbC0yNC44MiwtMTIuNDFsLTExMS43NzMsNTUuODA0bDI0Ljk4NCwxMi40OTJsNjEuO\aTY5LC0zMS4wNjZsMjQuODIsMTIuNDFsLTYxLjk2OSwzMS4wNjYiLz48cGF0aCBpZD0iYVN2ZyIg\aZD0iTTAuMDgyLDBsNzQuNTQyLDM3LjI3MWwwLDEzNi41MTFsLTI0LjgyLC0xMi40MWwwLC02Mi4\awNWwtMjQuOTAyLC0xMi40NTFsMCw2Mi4wNWwtMjQuODIsLTEyLjQxbDAsLTEzNi41MTFsMCwwWm\a 0yNC45MDIsNjIuMDkxbDAsLTI0LjgybDI0LjgyLDEyLjQxbDAsMjQuODIxbC0yNC44MiwtMTIuN\a DExbDAsMFoiLz48L2c+PC9zdmc+") no-repeat left 55% center;
  background-size: 33%;
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
#screen2 {
  -moz-transition: all 0.6s;
  -o-transition: all 0.6s;
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
        <section id="screen1">
            <div class="svgw-wrapper">
                <span class="svgw"></span>
            </div>
            <div class="svgb-wrapper">
                <span class="svgb"></span>                
            </div>
        </section>

＆＃13;

这是一个跨浏览器的解决方案。唯一的问题是background-position和background-size在IE中没有按预期工作，但我可能会接受它！

Answer 2

这是一种方法。我正在为linear-gradient split-half元素使用动画CSS <div>。并使用mix-blend-mode: difference确保徽标与动画背景形成鲜明对比。

这适用于除IE / Edge之外的所有浏览器。

＆＃13;

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: linear-gradient(to top, #ffffff 50%,#000000 50%);
  background-size: 100% 200%;
  background-position: 0 100%;
  left: 0;
  transition: background-position 0.5s;
}
.split-half:nth-child(1):hover {
  background-position: 0 0;
}

.split-half:nth-child(2) {
  background: linear-gradient(to top, #ffffff 50%,#000000 50%);
  background-size: 100% 200%;
  right: 0;
  transition: background-position 0.5s;
}
.split-half:nth-child(2):hover {
  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;
  mix-blend-mode: difference;
}

＆＃13;

<section>
  <div class="split-half"></div>
  <div class="split-half"></div>

  <div id="logo">
    <svg width="100%" height="100%" viewBox="0 0 187 174" style="fill-rule:evenodd;">   
      <defs>
        <linearGradient x1="0" y1="100%" x2="0" y2="0">
          <stop offset="0" stop-color="white"/>
          <stop offset="0" stop-color="black"/>
        </linearGradient>
      </defs>

      <g>
        <path id="hSvg" 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;"/>
        <path id="aSvg" 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>    
    </svg>

  </div>
</section>

＆＃13;

从下到上动画svg填充

2 个答案: