gsap+svg实现卷纸开关切换效果代码
代码语言：html
所属分类：其他
代码描述：gsap+svg实现卷纸开关切换效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
background-color: #ff608e;
overflow: hidden;
text-align:center;
display: flex;
align-items: center;
justify-content: center;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
svg {
width: 100%;
height: 100%;
visibility: hidden;
}
#bogRoll {
cursor: pointer;
}
</style>
</head>
<body>
<svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
<defs>
<linearGradient id="bogRollGrad" x1="360.24" y1="228.88" x2="360.24" y2="400.21" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#bfbbbc"/>
<stop offset=".13" stop-color="#c3bfc0"/>
<stop offset=".29" stop-color="#cfcdce"/>
<stop offset=".45" stop-color="#e3e3e4"/>
<stop offset=".59" stop-color="#fcffff"/>
</linearGradient>
<linearGradient id="bogRollGrad-2" x1="291.41" y1="222.67" x2="370.94" y2="222.67" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#e6eae9"/>
<stop offset="1" stop-color="#e8e8e8"/>
</linearGradient>
<linearGradient id="bogRollGrad-3" x1="419.88" y1="300.06" x2="419.88" y2="148.58" gradientUnits="userSpaceOnUse">
<stop offset=".02" stop-color="#c1c1c1"/>
<stop offset=".26" stop-color="#dee0e0"/>
<stop offset=".48" stop-color="#f4f6f6"/>
<stop offset=".62" stop-color="#fcffff"/>
</linearGradient>
<linearGradient id="bogRollGrad-4" x1="291.41" y1="222.67" x2="370.94" y2="222.67" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#e6eae9"/>
<stop offset="1" stop-color="#f2f2f2"/>
</linearGradient>
<linearGradient id="bogRollGrad-5" x1="331.17" y1="188.81" x2="331.17" y2="254.59" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#7d7875"/>
<stop offset="1" stop-color="#bbb1b0"/>
</linearGradient>
<clipPath id="yesSheetMask">
<rect x="370.94" y="222.67" width="137.65" height="243.29" fill="#f7fafa"/>
</clipPath>
</defs>
<g id="bogRoll">
<g>
<rect id="noSheet" x="291.41" y="222.67" width="137.65" height="243.29" fill="url(#bogRollGrad)"/>
<g id="NoText">
<g>
<path d="m368.53,314.54l.12-1.3-.27-1.2.11-1.2v-1.19s.14-1.19.14-1.19l-.08-1.19-.07-1.2-.08-1.2.06-1.2-.11-1.2.27-1.2-.19-1.2.06-1.2v-1.19s.1-1.2.1-1.2l-.1-1.19.03-1.19.11-1.2-.03-1.2-.07-1.2-.15-1.2.09-1.2v-1.2s.17-1.2.17-1.2l-.09-1.17,1.12-.12,1.16.09,1.16-.08,1.16.22,1.16-.21,1.17-.08,1.16.19,1.16-.19,1.17.24,1.16-.21,1.17.26h1.17s1.16-.13,1.16-.13l.12,1.18-.03,1.19.05,1.19-.22,1.19.16,1.19.04,1.19-.05,1.19.06,1.19-.04,1.19-.18,1.19-.02,1.19v1.19s.15,1.19.15,1.19l-.07,1.19-.05,1.18.14,1.18-.08,1.19v1.19s-.03,1.19-.03,1.19l.16,1.19-.13,1.19.18,1.19-.28,1.19.16,1.19.06,1.19-.02,1.19-.19,1.19.07,1.19.2,1.19-.12,1.19-.11,1.19.18,1.19-.1,1.19.05,1.19-.13,1.19.17,1.19-.12,1.19v1.19s.11,1.19.11,1.19l-.02,1.19.07,1.19-.15,1.19.16,1.19.02,1.19.02,1.19-.04,1.2-.05,1.19-.13,1.2-.05,1.2.22,1.29-1.26-.03-1.17-.13-1.17-.07-1.17.15-1.17.09-1.17-.14-1.17-.09h-1.17s-1.18.23-1.18.23l-1.15-.15-.8-.89-.52-1.12-.86-.88-.61-1.06-.79-.93-.6-1.06-.64-1.04-.72-.98-.71-.98-.74-.97-.77-.95-.62-1.05-.81-.92-.6-1.07-.81-.92-.61-1.06-.81-.92-.54-1.11-.71-.99-.74-.97-.8-.93-.62-1.06-.62-1.06-.87-.88-.65-1.04-.65-1.03-.71-1-.6-1.08-.76-.97-.71-.85.03,1.07-.21,1.2.13,1.2v1.19s-.07,1.19-.07,1.19l.02,1.19.13,1.2-.13,1.2-.03,1.2.1,1.2v1.2s.11,1.2.11,1.2v1.2s-.09,1.19-.09,1.19l-.08,1.2.17,1.19v1.19s-.14,1.2-.14,1.2l-.12,1.2.27,1.2-.19,1.2.09,1.2v1.2s-.12,1.2-.12,1.2v1.12s-1.08-.05-1.08-.05l-1.16.11-1.17.06-1.17-.06-1.17.14-1.17-.11-1.17.12-1.17-.03h-1.17s-1.17.04-1.17.04l-1.17-.2-1.18.04-1.23.1-.02-1.25.2-1.19-.13-1.19.04-1.19v-1.19s-.03-1.19-.03-1.19v-1.19s-.1-1.19-.1-1.19l.12-1.19-.03-1.19.1-1.19-.15-1.19.05-1.19-.05-1.19v-1.18s0-1.18,0-1.18l.18-1.19.02-1.19-.07-1.19-.08-1.19.09-1.19-.06-1.19-.12-1.19.06-1.19-.04-1.19-.03-1.19.03-1.19.1-1.19-.17-1.19.05-1.19-.02-1.19v-1.19s.11-1.19.11-1.19v-1.19s-.09-1.19-.09-1.19l.02-1.19.04-1.19.02-1.19-.14-1.19.13-1.19.02-1.19.05-1.19-.14-1.19-.03-1.19.05-1.19.13-1.2-.21-1.19.04-1.2.02-1.2.08-1.19,1.17.11,1.18-.12,1.18-.1,1.18.23,1.18-.03,1.18-.04,1.18-.11,1.18-.07,1.19.04,1.13.2.7.93.69,1,.81.92.73.97.51,1.13.85.89.62,1.05.65,1.03.89.86.51,1.13.89.86.54,1.11.71.99.76.96.63,1.04.63,1.04.87.87.56,1.09.79.93.63,1.05.75.96.67,1.02.86.89.46,1.16.75.96.85.89.57,1.09.67,1.03.78.96.74,1.11Z"/>
<path d="m381.76,423.45l-.92.81-.94.78-.93.8-.94.78-.99.71-1.04.64-1.05.62-1.01.71-1.1.55-1.18.36-1.1.57-1.18.34-1.21.22-1.2.25-1.17.4h-1.24s-1.19.32-1.19.32l-1.22.11-1.23-.11-1.22.15h-1.23s-1.22-.24-1.22-.24l-1.22-.12-1.23-.05-1.22-.14-1.2-.28-1.22-.17-1.18-.37-1.12-.53-1.14-.43-1.2-.3-1.07-.62-1.14-.47-.95-.81-1.1-.56-.99-.73-.95-.77-1-.72-.99-.74-.85-.89-.74-.99-.86-.87-.81-.92-.88-.87-.48-1.16-.75-.97-.61-1.06-.54-1.1-.53-1.1-.65-1.06-.46-1.14-.29-1.2-.31-1.19-.44-1.16-.04-1.24-.41-1.18.08-1.25-.3-1.21.12-1.24.04-1.23-.16-1.23.21-1.21.1-1.22-.03-1.24.42-1.17.23-1.2.21-1.21.17-1.23.62-1.08.36-1.17.45-1.14.45-1.14.75-.99.56-1.08.55-1.1.87-.88.68-1.02.79-.94.83-.9.89-.84.89-.76.77-.89.94-.71.95-.69.98-.64.95-.68.97-.66.98-.65,1.01-.61,1.15-.31,1.08-.46,1.11-.37,1.1-.42,1.17-.15,1.12-.32,1.16-.14,1.15-.21,1.17-.09,1.16-.12,1.16-.28,1.18.19,1.22.06h1.23s1.22.07,1.22.07l1.23.04,1.19.34,1.24.05,1.19.33,1.18.36,1.12.53,1.12.48,1.23.23,1.06.63,1.06.62,1,.72,1.13.51,1.06.64.92.83.97.76.77.98.92.81.96.77.87.87.73,1,.63,1.06.7,1,.7,1,.57,1.08.83.95.34,1.2.65,1.05.4,1.16.34,1.18.31,1.18.27,1.19.33,1.18.03,1.23.44,1.18-.14,1.24.22,1.22-.18,1.23.11,1.23-.02,1.23-.24,1.21-.19,1.21.02,1.25-.25,1.21-.23,1.21-.61,1.1-.29,1.2-.43,1.15-.59,1.08-.49,1.12-.56,1.09-.63,1.05-.53,1.12-.78.96-.79.94-.78.95-.77.96-.94.8Zm-33.58-10.39l.83.81.89.75.98.62,1.03.53,1.05.48,1.07.43,1.11.33,1.15.11,1.13.16,1.13.23,1.15-.11h1.15s1.16.03,1.16.03l1.15-.14,1.08-.42,1.16-.14,1.01-.58,1.03-.5,1.09-.42.88-.75.88-.73.98-.64.82-.85.66-.98.62-.99.62-.99.39-1.1.45-1.07.49-1.08.26-1.15v-1.18s.19-1.16.19-1.16l-.09-1.17.2-1.17-.22-1.16-.14-1.16-.21-1.15-.41-1.1-.51-1.05-.45-1.07-.46-1.08-.72-.92-.77-.88-.92-.72-.66-.99-.97-.65-.94-.67-.98-.62-1.04-.51-1.14-.26-1.1-.31-1.1-.36-1.14-.2-1.16.05-1.15-.24-1.15.25-1.17-.13-1.11.37-1.16.08-1.13.29-1.01.59-1.1.37-1,.59-.85.8-1.04.55-.84.8-.75.9-.6,1.01-.87.81-.52,1.05-.47,1.06-.32,1.12-.51,1.06-.18,1.16-.04,1.17-.3,1.14.05,1.17.03,1.17.09,1.17.12,1.17.18,1.16.48,1.08.36,1.12.47,1.08.54,1.05.7.95.79.87.79.87Z"/>
</g>
</g>
<ellipse cx="331.17" cy="222.67" rx="39.76" ry="79.14" fill="url(#bogRollGrad-2)"/>
<g id="rollGroup">
<path id="rollFace" d="m468.83,143.52h-138.65c21.96,0,39.76,35.43,39.76,79.14s-17.8,79.1.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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