gsap实现变形拼图谜题效果代码
代码语言:html
所属分类:其他
代码描述:gsap实现变形拼图谜题效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700"> <style> body { background-color: hsl(28, 42%, 91%); text-align: center; font-size: 18px; font-family: Montserrat, sans-serif; } svg { margin: 0 auto; display: block; } path { stroke: none; opacity:0.8; } #puzzle1, #puzzle3, #puzzle5, #puzzle7, #puzzle9 { fill: hsl(16, 54%, 67%); } #puzzle2, #puzzle4, #puzzle6, #puzzle8 { fill: hsl(11, 37%, 47%); } .checkbox { text-align: center; appearance: none; height: 1rem; width: 1rem; border: 3px solid hsl(28, 42%, 81%); border-radius: 50%; cursor: pointer; background: radial-gradient( circle at center, hsl(28, 42%, 91%) 50%, transparent 50% ); background-repeat: no-repeat; background-position: center; background-size: 0.8rem 0.8rem; vertical-align: middle; } .checkbox:checked { background: radial-gradient( circle at center, hsl(16, 54%, 67%) 50%, transparent 50% ); background-repeat: no-repeat; background-position: center; background-size: 0.7rem; } label { font-size: 0.7rem; font-weight:bold; letter-spacing: 0.0625em; vertical-align: middle; } h1 { font-size: 1.4rem; letter-spacing: 0.0625em; text-transform: uppercase; margin-top:0px; } button { display: inline-block; padding: 10px 20px; background-color: hsl(16, 54%, 67%); color: #fff; border: none; text-transform: uppercase; letter-spacing: 0.0625em; border-radius: 34px; text-decoration: none; cursor: pointer; font-size: 1rem; font-weight:bold; transition: background-color 0.4s ease; } button:hover { background-color: hsl(11, 37%, 47%); } </style> </head> <body translate="no"> <svg height="500px" width="500px" viewBox="0 0 500 500" class="area" id="svg"> <path id="puzzle5" class="drag-no" d="M 200,200 L 300,200 L 300,300 L 200,300 Z" /> <path id="puzzle1" class="drag" d="M 100,100 L 200,100 L 200,200 L 100,200 Z" /> <path id="puzzle2" class="drag" d="M 200,100 L 300,100 L 300,200 L 200,200 Z" /> <path id="puzzle3" class="drag" d="M 300,100 L 400,100 L 400,200 L 300,200 Z" /> <path id="puzzle4" class="drag" d="M 100,200 L 200,200 L 200,300 L 100,300 Z" /> <path id="puzzle6" class="drag" d="M 300,200 L 400,200 L 400,300 L 300,300 Z" /> <path id="puzzle7" class="drag" d="M 100,300 L 200,300 L 200,400 L 100,400 Z" /> <path id="puzzle8" class="drag" d="M 200,300 L 300,300 L 300,400 L 200,400 Z" /> <path id="puzzle9" class="drag" d="M 300,300 L 400,300 L 400,400 L 300,400 Z" /> </svg> <h1>Shapeshifting puzzle</h1> <button onclick="shuffle()">Shuffle</button> <p><input type="checkbox" id="toggleButton" class="checkbox" /> <label for="toggleButton">PRO LEVEL 😱</label> </p> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.10.1.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/MorphSVGPlugin3.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Draggable3.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/InertiaPlugin.min.js"></script> <script > // Setup Toggle, GSAP: Animation, Draggable and Snap let i = 0; const toggleButton = document.getElementById('toggleButton'); let proLevel = false; var tl = gsap.timeline({defaults: { duration: 1.5, ease: "power3.inOut"} , onComplete: animate}); gsap.registerPlugin(Draggable, InertiaPlugin); var listHeight = 20; Draggable.create(".drag", { bounds: ".area", inertia: true, type: "x,y", liveSnap: { points: [ { x: -120, y: -120 }, { x: -100, y: -100 }, { x: -80, y: -80 }, { x: -60, y: -60 }, { x: -40, y: -40 }, { x: -20, y: -20 }, { x: 0, y: 0 }, { x: 20, y: 20 }, { x: 40, y: 40 }, { x: 60, y: 60 }, { x: 80, y: 80 }, { x: 100, y: 100 }, { x: 120, y: 120 }, { x: 140, y: 140 }, { x: 160, y: 160 }, { x: 180, y: 180 }, { x: 200, y: 200 }, { x: 210, y: 210 }, { x: 220, y: 220 }, { x: 230, y: 230 }, { x: 240, y: 240 }, { x: 260, y: 260 }, { x: 280, y: 280 }, { x: 300, y: 300 }, { x: 320, y: 320 }, { x: 340, y: 340 }, { x: 340, y: 340 }, { x: 360, y: 360 }, { x: 380, y: 380 }, { x: 400, y: 400 }, { x: 420, y: 420 }, { x: 440, y: 440 }, { x: 460, y: 460 }, { x: 480, y: 480 }, { x: 500, y: 500 }, ], radius: 10, }, }); //Switch level toggleButton.addEventListener('change', function() { proLevel = toggleButton.checked; if (proLevel === true) { maxCorners = 100; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0