svg clip-path 裁剪动画

SVG动画心形路径教程
本文详细介绍如何使用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 
页面地址

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

 

CSS 中的 `clip-path` 属性是一种用于定义元素裁剪区域的强大工具,通过指定的剪切路径(clipping path),可以控制元素的哪些部分可见,哪些部分被隐藏。这种功能允许开发者创建非矩形的裁剪形状,从而实现独特的视觉效果和交互体验。 ### 基本语法 `clip-path` 的基本语法如下: ```css clip-path: <clip-source> || [ <basic-shape> ] || [ <geometry-box> ] || none; ``` 其中,`<clip-source>` 可以是 SVG 路径或外部图像;`<basic-shape>` 表示基本形状,如圆形、椭圆、多边形等;`<geometry-box>` 定义了形状的参考框。如果设置为 `none`,则不应用任何裁剪。 ### 常用函数及示例 1. **圆形 (circle)** 通过 `circle()` 函数可以定义一个圆形裁剪区域。语法为 `circle(<radius> at <position>)`,其中 `<radius>` 是圆的半径,`<position>` 是圆心的位置。 ```css img { width: 200px; height: auto; object-fit: cover; border-radius: 10px; transition: 0.5s; clip-path: circle(100%); /* 初始状态为完整的圆形 */ } img:hover { cursor: pointer; clip-path: circle(50%); /* 鼠标悬停时变为半圆 */ } ``` [^3] 2. **椭圆 (ellipse)** `ellipse()` 函数用于定义椭圆形裁剪区域。语法为 `ellipse(<rx> <ry> at <position>)`,其中 `<rx>` 和 `<ry>` 分别是椭圆的水平轴和垂直轴半径。 ```css div { width: 200px; height: 150px; background-color: lightblue; clip-path: ellipse(100px 75px at 50% 50%); } ``` 3. **多边形 (polygon)** `polygon()` 函数允许定义多边形裁剪区域。语法为 `polygon(<fill-rule>, <point>...)`,其中 `<fill-rule>` 是填充规则(如 `nonzero` 或 `evenodd`),`<point>` 是多边形顶点的坐标。 ```css div { width: 200px; height: 150px; background-color: lightgreen; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } ``` 4. **矩形 (inset)** `inset()` 函数用于定义矩形裁剪区域。语法为 `inset(<top> <right> <bottom> <left>)`,分别表示矩形的上、右、下、左边距。 ```css div { width: 200px; height: 150px; background-color: lightcoral; clip-path: inset(20px 30px 40px 50px); } ``` ### 应用场景 - **非矩形图像裁剪**:通过 `clip-path` 可以将图像裁剪成圆形、椭圆或多边形,提升网页的视觉吸引力。 - **动态交互效果**:结合 `transition` 或 `@keyframes`,可以实现鼠标悬停、点击等交互效果。 - **响应式设计**:根据屏幕尺寸动态调整裁剪区域,确保内容在不同设备上显示良好。 ### 注意事项 - **兼容性**:尽管 `clip-path` 在现代浏览器中得到了广泛支持,但在某些旧版本浏览器中可能无法正常工作。 - **性能影响**:复杂的裁剪路径可能会对页面性能产生一定影响,尤其是在大量元素或复杂动画中。 - **可访问性**:裁剪可能会导致部分内容不可见,因此需要确保关键信息仍然对用户可见且易于访问。 通过掌握 `clip-path` 的基本语法、常用函数及示例、应用场景和注意事项,开发者可以更好地应用该属性来创造出独特的视觉效果,提升网页的吸引力和用户体验[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值