走动的南瓜

下载代码

html

css

js

分享到微信朋友圈

X

html

<script src="https://unpkg.com/pop.svg@0.1.14/dist/index.js"></script>

<svg id="container" viewBox="0 0 1000 400">
	<ellipse id="shadow" cx="141.23" cy="280.71" rx="118.93" ry="16.45" style="opacity: 0.5"/>
	
		<text class="plus" x="300" y="250">+</text>
		<text class="equals" x="580" y="250">=</text>
	
	
		<path id="line" d="M 0 0 L 400 400" transform="translate(-20 100) scale(0.6)"></path>
		<g id="pumpkin" transform="translate(50 170) scale(0.5)">
			<path data-detail="40" d="M181.24,43.35c39.53-4.84,73.16,20.16,88.5,51.88,36.3,75.13,26,124.52-14.75,167.42S115.14,300.7,91,295.86,1.91,271,9,156.11,141.71,48.19,141.71,48.19Z" transform="translate(-8.45 -8.56)" style="fill: #d88430"/>
			<path data-detail="20" d="M170.73,86.59c37.27.76,46.9,5.07,46.9,5.07s-3.14-15.43,6.21-26.18c3.65-4.21,9.4-6.15,15.06-7-16.09-11.48-36-17.8-57.66-15.15l-39.53,4.84S16.07,41.28,9,156.11c0,0,13.5-37.85,27.08-37.85s14.35,11.86,14.35,11.86S71.07,106,91,104.44s16.76,5.36,16.76,5.36S133.47,85.84,170.73,86.59Z" transform="translate(-8.45 -8.56)" style="fill: #d3a132"/>
			<path data-detail="0" d="M184.78,144.13" transform="translate(-8.45 -8.56)" style="fill: #fff;stroke: #231f20;stroke-miterlimit: 10;stroke-width: 1.1774864108597285px"/>
			<path data-detail="20" d="M222.82,243.06s-15.69,17.9-52.08,22.63c-34.13,4.44-54-5.15-54-5.15a28,28,0,0,1-21,9.59c-13.55,0-21-5.72-21-5.72s-12.39,14.78-30.49,2.95A156.15,156.15,0,0,1,29,255.86c19.45,29,47.75,37,62,39.79,24.18,4.75,123.32,9.49,164-32.58,34.4-35.55,47.12-75.65,28.32-131.69-3.83,17-8.8,36.76-15.18,58.86C257,228.88,222.82,243.06,222.82,243.06Z" transform="translate(-8.45 -8.56)" style="fill: #a85726"/>
			<path data-detail="20" d="M162.38,46.74c-2.29,1.83-4.53,3.74-6.65,5.76s-4.24,4-6.24,6.12a146.88,146.88,0,0,0-11.26,13.12,135.1,135.1,0,0,0-9.71,14.05,152.72,152.72,0,0,0-8.08,14.86,166.37,166.37,0,0,0-15.24,64.93,223.34,223.34,0,0,0,1.21,33.82,220.15,220.15,0,0,0,6.6,33.3c.37,1.37.76,2.74,1.21,4.09s.83,2.73,1.3,4.07q1.4,4,2.86,8.08c2,5.38,4.24,10.65,6.71,15.87A184.89,184.89,0,0,0,142.64,295l-.65.69a145.06,145.06,0,0,1-21.27-28.34A179.79,179.79,0,0,1,106,235.11a188.84,188.84,0,0,1-8.35-34.46,204.79,204.79,0,0,1-1.82-35.43c.84-23.65,6.68-47.29,18-68.14a141.47,141.47,0,0,1,20.64-28.82,137.67,137.67,0,0,1,12.93-12.17,102.36,102.36,0,0,1,14.56-10.18Z" transform="translate(-8.45 -8.56)" style="fill: #a85726;opacity: 0.49"/>
			<path data-detail="20" d="M167.21,294.9c2.55-1.71,5.06-3.5,7.47-5.39s4.81-3.78,7.12-5.77A165.42,165.42,0,0,0,195,271.28a146.76,146.76,0,0,0,11.69-13.56c1.77-2.39,3.55-4.74,5.22-7.17s3.26-4.91,4.76-7.43,2.91-5.1,4.22-7.7,2.64-5.2,3.81-7.86a123.42,123.42,0,0,0,5.92-16.36A134.74,134.74,0,0,0,236.12,177a160.53,160.53,0,0,0-.05-17.55c-.34-5.84-1.1-11.64-2-17.43a149.57,149.57,0,0,0-3.72-17.19c-.78-2.83-1.67-5.64-2.58-8.44s-1.86-5.61-2.93-8.37-2.19-5.51-3.41-8.22-2.52-5.39-3.81-8.09A174.38,174.38,0,0,0,208.85,76c-3.11-5.18-6.58-10.15-10.2-15.06-1.8-2.46-3.7-4.86-5.65-7.22s-3.91-4.76-6-7l.57-.75A129.26,129.26,0,0,1,201,58.72,171.74,171.74,0,0,1,212.85,73a170.5,170.5,0,0,1,18.76,32,160.52,160.52,0,0,1,13.91,72.38,138.91,138.91,0,0,1-6.47,36.55,132.61,132.61,0,0,1-16.23,33.35A144.53,144.53,0,0,1,198.28,275a152,152,0,0,1-14.66,11.38,120.24,120.24,0,0,1-16,9.36Z" transform="translate(-8.45 -8.56)" style="fill: #a85726;opacity: 0.49"/>
			<path data-detail="20" d="M122.26,49.11c-2.55,1.71-5.06,3.5-7.47,5.4s-4.82,3.77-7.12,5.76A167.37,167.37,0,0,0,94.5,72.74,145.46,145.46,0,0,0,82.81,86.3C81,88.68,79.26,91,77.59,93.47s-3.26,4.91-4.76,7.43-2.91,5.09-4.22,7.7-2.64,5.2-3.81,7.86a123.29,123.29,0,0,0-5.92,16.35,134.81,134.81,0,0,0-5.53,34.25,160.53,160.53,0,0,0,0,17.55c.34,5.84,1.1,11.65,2,17.43a149.73,149.73,0,0,0,3.72,17.2c.78,2.83,1.67,5.64,2.58,8.44s1.86,5.61,2.93,8.37,2.19,5.51,3.41,8.22,2.52,5.39,3.81,8.08a173.19,173.19,0,0,0,8.78,15.72c3.11,5.17,6.58,10.14,10.2,15.05,1.8,2.46,3.7,4.86,5.65,7.23s3.91,4.76,6,7l-.57.74a128.22,128.22,0,0,1-13.48-12.77,172.46,172.46,0,0,1-30.6-46.24A160.54,160.54,0,0,1,44,166.67a138.84,138.84,0,0,1,6.47-36.55A132.44,132.44,0,0,1,66.65,96.77,144.23,144.23,0,0,1,91.19,69a152,152,0,0,1,14.66-11.38,120.3,120.3,0,0,1,16-9.37Z" transform="translate(-8.45 -8.56)" style="fill: #a85726;opacity: 0.49"/>
			<path data-detail="0" d="M121.68,104.62c4.36-2.18,11.35,16.25,34,24.19,20.46,7.18,33.58-1.26,37.92,5.23,7.26,10.88-18.17,51.8-39.88,49.69C125.94,181,113.44,108.76,121.68,104.62Z" transform="translate(-8.45 -8.56)" style="fill: #1f110a"/>
			<path data-detail="0" d="M238.69,170c-13.62,4-35.48-30.81-32.31-41.42,1.89-6.32,11.45.11,23.58-8.39,13.43-9.4,15.41-26.85,18.5-25.28C254.3,97.93,256.12,164.92,238.69,170Z" transform="translate(-8.45 -8.56)" style="fill: #1f110a"/>


			<path data-detail="0" d="M91,183.81l22.23,23.79,39.88-8.5,26.15,19.62,26.86-20.92,33.55,11.29,28.5-30.25-27.45,60.8-28.12-13.08-33,23.54-30.16-29.42-45.28,6Z" transform="translate(-8.45 -8.56)" style="fill: #1f110a"/>
			<path data-detail="0" d="M138,9.42c2.8-1.26,8.63-.76,8.63-.76s23.68,38.22,15.77,45.46-25.93,2.91-25.77.68C137.84,37.43,132.28,12,138,9.42Z" transform="translate(-8.45 -8.56)" style="fill: #717c43"/>
		</g>	
	
</svg>

css

JavaScript

console.clear();
var path = document.getElementById('line');
var svg = document.getElementById('container');
var pumpkinContainer = document.getElementById('pumpkin');
var pumpkinElements = pumpkinContainer.getElementsByTagName('path');
var shadow = document.getElementById('shadow');
var ground = 380;
var points = {
    start: { x: 0, y: 0 },
    bezier: { x: 0, y: 0 },
    end: { x: 0, y: 0 }
};
var pumpkinRefs = [];
var t = 0;
var translator = new POP.TranslationPath(path, 150, 200);
for (var i = 0; i < pumpkinElements.length; i++) {
    var element = document.createElementNS("http://www.w3.org/2000/svg", 'path');
    ;
    element.setAttribute('style', pumpkinElements[i].getAttribute('style'));
    var detail = Number(pumpkinElements[i].getAttribute('data-detail'));
    var ref = new POP.ReferencePath(pumpkinElements[i], detail, { x: 0, y: 0 }, { x: 284, y: 299 });
    pumpkinRefs.push({ ref: ref, element: element });
    svg.appendChild(element);
}
shadow.setAttribute('cy', ground);
if (path && svg)
    tick();
function floorY(y) { return y > ground ? ground : y; }
function tick() {
    t += 0.09;
    points.start.x = 820 + Math.cos(t) * 75;
    points.start.y = 80 + Math.sin(t) * 120;
    points.bezier.x = 800 + Math.cos(t) / 150;
    points.bezier.y = 220 + Math.sin(t) * 100;
    points.end.x = 800 + Math.cos(t) * 120;
    points.end.y = floorY(320 + Math.sin(t) * 100);
    shadow.setAttribute('cx', points.start.x);
    path.setAttribute('d', "M " + points.start.x + " " + points.start.y + " S " + points.bezier.x + " " + points.bezier.y + " " + points.end.x + " " + points.end.y + " ");
    translator.updatePath();
    pumpkinRefs.map(function (p) {
        p.element.setAttribute("d", translator.getPath(p.ref));
    });
    requestAnimationFrame(function () { return tick(); });
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg

<!doctype html> <html> <head> <meta charset="utf-8"> <title>走动的南瓜 -jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号