svg clip-path 裁剪动画

SVG动画心形路径教程

最新推荐文章于 2025-06-30 15:45:21 发布

M18771556987

最新推荐文章于 2025-06-30 15:45:21 发布

阅读量998

点赞数

CC 4.0 BY-SA版权

分类专栏： FE svg 文章标签： svg 剪影动画

本文链接：https://blog.youkuaiyun.com/weixin_36878452/article/details/90236820

FE 同时被 2 个专栏收录

19 篇文章

订阅专栏

svg

4 篇文章

订阅专栏

本文详细介绍如何使用SVG和CSS创建动态心形路径动画，包括关键帧动画、路径动画及背景图片的应用，适合前端开发者学习。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .love-heart path {
            fill: none;
            stroke-width: 5
        }
        .love-heart #heart { stroke: rgb(255, 70, 152); }
        .wave-line {
            background: url("../../img/lovepb/wave_line.png") no-repeat center center;
            background-size: 100%;
        }

        .path-g {
            transform: translate(-35%, -10%);
        }

        @keyframes waveLineLeft {
          from {
            -webkit-transform: translate(-50%, 10%);
            transform: translate(-50%, 10%);
          }

          to {
            -webkit-transform: translate(-70%, -30%);
            transform: translate(-70%, -30%);
          }
        }

        @keyframes waveLineRight {
          from {
            -webkit-transform: translate(-70%, 10%);
            transform: translate(-70%, 10%);
          }
           

          to {
             -webkit-transform: translate(-50%, -30%);
            transform: translate(-50%, -30%);
          }
        }
        .waveLineLeft {
          -webkit-animation-name: waveLineLeft;
          animation-name: waveLineLeft;
        }

        .waveLineRight {
          -webkit-animation-name: waveLineRight;
          animation-name: waveLineRight;
        }
        .animated-svg{
          -webkit-animation-duration: 5s;
          animation-duration: 5s;
          -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
        }
    </style>
</head>
<body>
    <svg class="love-heart" viewBox="-500 -500 1000 1000">
        <defs>
            <clipPath id="clipPath">
                <path id="heart" d="M354,177C0,531 0,531 -354,177C-452,79 -452,-79 -354,-177C-256,-275 -98,-275 0,-177C98,-275 256,-275 354,-177C452,-79 452,79 354,177"></path>
            </clipPath>
        </defs>
        <g style="clip-path:url(#clipPath);">
            <g class="path-g animated-svg">
                <path fill="none" stroke="#75A6D2" stroke-width="2" stroke-miterlimit="10" d="M-72,217c24.957,0,40.632,21.872,55.242,24.791
                    c20.583,4.112,39.078-9.693,59.662-5.581C57.513,239.129,73.188,261,98.14,261c24.957,0,40.632-21.872,55.241-24.791
                    c20.583-4.112,39.078,9.693,59.662,5.581c14.608-2.918,30.282-24.79,55.235-24.79c24.957,0,40.632,21.872,55.242,24.791
                    c20.583,4.112,39.078-9.693,59.662-5.581c14.608,2.918,30.283,24.79,55.236,24.79c24.957,0,40.633-21.872,55.243-24.791
                    c20.583-4.113,39.079,9.692,59.664,5.58c14.608-2.918,30.283-24.79,55.236-24.79c24.957,0,40.633,21.872,55.243,24.791
                    c20.582,4.112,39.077-9.693,59.661-5.581c14.608,2.918,30.283,24.79,55.236,24.79c24.958,0,40.635-21.872,55.245-24.791
                    c20.584-4.113,39.08,9.692,59.665,5.58c14.609-2.918,30.285-24.79,55.239-24.79c24.958,0,40.635,21.872,55.245,24.791
                    c20.584,4.112,39.08-9.693,59.665-5.581C1078.37,239.129,1094.046,261,1119,261"/>
            </g>
            <g class="path-g animated-svg">
                <path fill="none" stroke="#75A6D2" stroke-width="2" stroke-miterlimit="10" d="M-33,279c24.957,0,40.632,21.872,55.242,24.791
                    c20.583,4.112,39.078-9.693,59.662-5.581C96.513,301.129,112.188,323,137.14,323c24.957,0,40.632-21.872,55.241-24.791
                    c20.583-4.112,39.078,9.693,59.662,5.581c14.608-2.918,30.282-24.79,55.235-24.79c24.957,0,40.632,21.872,55.242,24.791
                    c20.583,4.112,39.078-9.693,59.662-5.581c14.608,2.918,30.283,24.79,55.236,24.79c24.957,0,40.633-21.872,55.244-24.791
                    c20.582-4.113,39.078,9.692,59.663,5.58c14.608-2.918,30.283-24.79,55.236-24.79c24.957,0,40.633,21.872,55.243,24.791
                    c20.582,4.112,39.077-9.693,59.661-5.581c14.608,2.918,30.283,24.79,55.236,24.79c24.958,0,40.635-21.872,55.245-24.791
                    c20.584-4.113,39.08,9.692,59.665,5.58c14.609-2.918,30.285-24.79,55.239-24.79c24.958,0,40.635,21.872,55.245,24.791
                    c20.584,4.112,39.08-9.693,59.665-5.581C1117.37,301.129,1133.046,323,1158,323"/>
            </g>
            <path id="heart"  d="M354,177C0,531 0,531 -354,177C-452,79 -452,-79 -354,-177C-256,-275 -98,-275 0,-177C98,-275 256,-275 354,-177C452,-79 452,79 354,177"></path>
        </g>
    </svg>
    <script type="text/javascript">
        setTimeout(function() {
            var amimatePath = document.getElementsByClassName("animated-svg");
            amimatePath[0].className.baseVal+=" waveLineLeft";
            amimatePath[1].className.baseVal+=" waveLineRight";
        }, 1000)
    </script>
</body>
</html>

http://h5.highsensor.cn/case/svgClipPathAnimation.html
页面地址

如果你觉得对你有帮助，可否打个赏