<!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
页面地址
如果你觉得对你有帮助,可否打个赏