gsap实现svg书法路径绘制遮罩显示图片动画效果代码
代码语言：html
所属分类：动画
代码描述：gsap实现svg书法路径绘制遮罩显示图片动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
font-family: "proxima-nova", sans-serif;
padding: 0;
margin: 0;
display: flex;
height: 100vh;
overflow: hidden;
flex-direction: column;
justify-content: center;
align-items: center;
background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 100%);
}
svg {
width: auto;
height: auto;
max-width: 800px;
}
#letters path {
fill: white;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 800">
<defs>
<mask id="m1" maskUnits="userSpaceOnUse">
<path id="mask1" class="strokeMask part1" d="M418.27,248.91c10.32,15.83,24,40.87,29.05,80.25,5.1,39.91-3.49,70.57-9.8,92.24-13.24,45.46-34.32,75.27-57,106.75C356.46,561.52,330.93,597,284.65,628c-28.61,19.19-63.81,42.8-112.21,41.76-17.71-.38-61.15-1.31-84.61-33.77-22.44-31-11.62-70.23-8.35-82.06,3-10.68,12.15-44,43.94-61.73A79,79,0,0,1,211.29,498" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="108.4" />
<path id="mask4" class="strokeMask part2" d="M860,95.15c-35.5,19.42-63.66,16.75-140,190.9C713.29,301.29,621,551.8,718,644.4c25.21,24.09,42.09,37.54,81.72,32.15,2.57-.35,63.51-9.65,92.43-63,7.24-13.35,22.81-42,10.72-71-11.28-27-38.18-54.25-90.43-34.16" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="150.04" />
</mask>
<mask id="m2" maskUnits="userSpaceOnUse">
<path id="mask2" class="strokeMask part2" d="M382.43,268.52S343.58,395.79,267.22,378.37,205.6,260.49,205.6,260.49,219,109.11,394.48,145.28,578,456.07,578,456.07" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="112.53" />
</mask>
<mask id="m3" maskUnits="userSpaceOnUse">
<path id="mask3" class="strokeMask part2" d="M577.56,453.6c1.78,49.26-8.54,110.91-14.79,138.63,0,0-6.37,35.5-41.79,81a51.78,51.78,0,0,1-16.56,15.4c-2.89,1.65-20.5,11.72-38.52,4.62-22.34-8.79-26.53-36.56-27.34-42a94.34,94.34,0,0,1-.73-18.65c2.23-65.73,13.77-93.06,23.45-117.31,12.32-30.86,26.53-50.94,42-72.79,8.78-12.42,35.53-49,90.9-98.21,45.64-40.55,86.11-67.78,117.85-89,38-25.38,72.15-56.74,112.08-79,0,0,25.17-15.83,47.38-47.37a41.48,41.48,0,0,0,5.77-18.1c.58-7.23-1.77-9.7-2.48-10.73-2.15-3.08-5.43-3.15-9.91-4.22-2.09-.5-2.35,0-5,1.38" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="10.72" />
</mask>
<mask id="imageMask" maskUnits="userSpaceOnUse">
<g id="showImage" fill="white" opacity="0">
<path d="M419.2,249.89h0a2.13,2.13,0,0,0-.92,2.92c17.3,32.32,25.07,64.59,25.07,95.08,0,144.28-199.63,284.83-306,284.83-37.31,0-57.83-17.42-57.83-53.49,0-47.26,34.82-93.9,84-93.9a85.67,85.67,0,0,1,37,8.51,2.13,2.13,0,0,0,3-2.38l0-.19a2.19,2.19,0,0,0-1.09-1.44c-13.37-7.12-26.15-10.1-38.93-10.1-50.37,0-92.66,49.75-92.66,107.59,0,85.2,49.13,126.86,111.94,126.86,102,0,269.29-138.68,269.29-352,0-39.16-9-77.12-30.06-111.51A2.15,2.15,0,0,0,419.2,249.89Z" />
<path d="M782.44,204.07c21.76-59.7,49.13-103.23,79-103.23l1.7,0-3.36-6.23c-39,2.49-109.44,70.85-163.77,168.51l-6.84,13.06C650.59,350.22,622,439.77,622,530.57c0,140.55,69.65,195.9,140.55,195.9,73.38,0,148.63-59.7,148.63-144.9,0-52.24-27.36-80.23-62.19-80.23a49.87,49.87,0,0,0-26.12,7.31,2.27,2.27,0,0,0-1.06,2.22h0a2.26,2.26,0,0,0,3.4,1.66A48.82,48.82,0,0,1,849,506.32c26.12,0,49.75,22.38,49.75,50.37,0,32.34-26.12,67.79-69.65,67.79-71.52,0-95.15-65.3-95.15-152.37,0-74.63,17.41-179.1,44.77-258.71Z" />
<path d="M574.57,361c-25.5-185.33-120-267.42-212.07-267.42-85.2,0-161.07,69-161.07,191.54,0,62.82,37.94,95.78,79.6,95.78,37.31,0,90.85-28.27,95.58-88.35a2.83,2.83,0,0,0-2.81-3.07h0A2.83,2.83,0,0,0,371,292c-4.94,50.76-47.09,83.24-86.85,83.24-37.31,0-77.11-26.74-77.11-92.66,0-65.3,48.51-97.64,115-97.64,93.28,0,202.12,63.43,239.43,188.43l1.87,6.22A326.89,326.89,0,0,1,575,455.71l6.38-.18a785.68,785.68,0,0,0-6.14-87.74Z" />
<path d="M862.39,100.87a6.09,6.09,0,0,1,.87,0c9.64.5,12.91,4.65,12.91,9.9,0,24.26-39.17,54.72-93.89,93.29l-86.45,59.08c-18.93,13.68-38.26,28.06-57.43,43.19v0c-.74.59-1.49,1.18-2.22,1.79-1.2.93-2.39,1.89-3.58,2.82l-6.66,5.36-2.6,2.1c-16.62,13.55-33,27.65-48.77,42.39L561.5,373.24a604.64,604.64,0,0,0-43.15,47.32l-1,1.29c-.82,1-1.63,2-2.44,3s-1.69,2.13-2.52,3.2-1.56,2-2.32,3-1.74,2.27-2.61,3.42l-2.13,2.81-2.95,4c-.56.76-1.12,1.51-1.67,2.28-1.5,2.09-3,4.16-4.44,6.27-.44.64-.87,1.28-1.31,1.91-1,1.52-2.08,3-3.09,4.57-.55.83-1.1,1.66-1.65,2.51-.89,1.34-1.78,2.69-2.65,4.06-.57.88-1.13,1.76-1.69,2.66-.83,1.33-1.68,2.67-2.49,4-.55.88-1.1,1.78-1.64,2.68-.83,1.36-1.63,2.73-2.45,4.11-.32.55-.66,1.1-1,1.65h0c-26.94,46.39-43.68,97.52-43.68,153.92,0,46,20.53,69,42.91,69,62.19,0,103.86-111.32,103.86-236.32,0-3.12-.08-8.12-.11-11.2l-6.41.25c.14,4.23.29,10.36.29,14.69,0,118.15-41.66,227-97,227-22.39,0-37.94-23-37.94-63.43,0-55.71,16.37-105.91,42.77-151.33.85-1.44,1.69-2.86,2.55-4.29.44-.72.87-1.46,1.31-2.2,1.22-2,2.47-4,3.73-6,.21-.35.44-.7.67-1,1.19-1.87,2.39-3.74,3.63-5.59l1.6-2.41c.87-1.29,1.73-2.57,2.62-3.85.61-.91,1.24-1.81,1.87-2.69.82-1.18,1.64-2.34,2.47-3.51.67-.92,1.34-1.86,2-2.79.81.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0