中国火焰龙

下载代码

html

css

js

分享到微信朋友圈

X

html

<svg>
	<defs>
		<g id="Cabeza" transform="matrix(1, 0, 0, 1, 0, 0)">
			<path style="fill:#FFFF00;fill-opacity:1" d="M-11.45,-6.65Q-10.25 -6.4 -10.05 -5.7Q-9.9 -5.05 -10.8 -4.3Q-11.7 -3.5 -13.15 -3.05L-15.9 -2.9Q-17.05 -3.15 -17.2 -3.8Q-17.4 -4.5 -16.5 -5.3Q-15.6 -6.05 -14.1 -6.45L-11.45 -6.65M-10.55,4.25Q-9.65 5.05 -9.8 5.75Q-10 6.45 -11.15 6.65L-13.85 6.5Q-15.35 6.05 -16.25 5.25Q-17.15 4.5 -16.95 3.85Q-16.8 3.15 -15.6 2.9L-12.9 3.1Q-11.45 3.5 -10.55 4.25" />
			<radialGradient id="RadialGradID_2" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.0462036, 0, 0, 0.0462036, -18.7, -0.85)" spreadMethod="pad" cx="0" cy="0" r="819.2" fx="0" fy="0">
				<stop offset="0" style="stop-color:#F70000;stop-opacity:1" />
				<stop offset="1" style="stop-color:#0068A0;stop-opacity:1" />
			</radialGradient>
			<path style="fill:url(#RadialGradID_2) " d="M5.95,-11.6L2.45 -9.3Q-2.6 -5.7 2.6 -4.45L11.7 -2.65Q18.8 -1.1 18.8 -0.05Q18.8 1 11.7 2.6L2.6 4.4Q-2.6 5.6 2.45 9.25L5.95 11.5L17.75 17.6Q28.7 23.15 28.3 23.2Q27.4 23.15 13.35 16.9L-4.8 8.9Q-5.55 8.6 -4.8 12.05Q-4.25 14.75 -5.25 13.1Q-6.05 11.75 -9.9 9.9L-14.7 7.75Q-15.1 7.55 -16.45 6.9L-18.45 5.65L-25.4 4.25Q-31.8 3.3 -32.25 2.65L-32.95 1.25L-33.3 0L-33.15 -1.5L-32.8 -3.1Q-32.55 -3.55 -29.6 -4.35L-23.45 -5.45Q-19.75 -6 -18.7 -6.7L-17.05 -7.65L-15.4 -8.2Q-10.75 -9.7 -4.7 -14.2Q-3.7 -14.75 -5 -11.5Q-6.3 -8.2 -4.8 -8.95Q-0.65 -11 13.9 -16.3Q28.25 -21.55 29.45 -21.5Q29.8 -21.5 18.3 -16.8L5.95 -11.6M-14.1,-6.45Q-15.6 -6.05 -16.5 -5.3Q-17.4 -4.5 -17.2 -3.8Q-17.05 -3.15 -15.9 -2.9L-13.15 -3.05Q-11.7 -3.5 -10.8 -4.3Q-9.9 -5.05 -10.05 -5.7Q-10.25 -6.4 -11.45 -6.65L-14.1 -6.45M-12.9,3.1L-15.6 2.9Q-16.8 3.15 -16.95 3.85Q-17.15 4.5 -16.25 5.25Q-15.35 6.05 -13.85 6.5L-11.15 6.65Q-10 6.45 -9.8 5.75Q-9.65 5.05 -10.55 4.25Q-11.45 3.5 -12.9 3.1" />
		</g>
		<g id="Aletas" transform="matrix(1, 0, 0, 1, 0, 0)">
			<radialGradient id="RadialGradID_3" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.0462036, 0, 0, 0.0462036, -18.7, -0.85)" spreadMethod="pad" cx="0" cy="0" r="819.2" fx="0" fy="0">
				<stop offset="0" style="stop-color:#FFD71C;stop-opacity:1" />
				<stop offset="0.341176" style="stop-color:#F70000;stop-opacity:1" />
				<stop offset="1" style="stop-color:#0068A0;stop-opacity:1" />
			</radialGradient>
			<path style="fill:url(#RadialGradID_3) " d="M29.35,-60Q29.85 -60 18.25 -36.05Q6.7 -12.1 5.95 -11.6L2.45 -9.3L25.6 -22.65Q49.2 -36.25 44.5 -32.65Q18.55 -12.9 19.9 -10.6Q20.3 -9.9 23.6 -10.9L27.25 -12Q29.15 -11.65 19.9 -7.3Q10.6 -2.9 11.7 -2.65Q20 -0.8 20 0Q20 0.75 11.7 2.6L21.75 8.5Q30.15 13.5 20 10.5Q11.7 8.1 28.2 18.55L45.55 29.95Q43.5 30.4 21.45 19Q1.9 8.85 2.45 9.25L5.95 11.5Q6.7 12 17.95 36Q29.25 59.95 28.75 60L9.2 37.65Q-9.35 16.3 -9.75 20Q-10.3 24.5 -11.95 15.8Q-14.05 4.95 -15.1 4.4Q-18.8 2.55 -18.8 -0.05Q-18.8 -2.65 -15.1 -4.45Q-13.95 -5.05 -11.45 -14.5Q-9.35 -22.4 -9.1 -20Q-8.2 -11.9 10.1 -35L22.9 -51.9Q28.95 -60 29.35 -60" />
		</g>
		<g id="Espina" transform="matrix(1, 0, 0, 1, 0, 0)">
			<radialGradient id="RadialGradID_1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.0462036, 0, 0, 0.0462036, -18.7, -0.85)" spreadMethod="pad" cx="0" cy="0" r="819.2" fx="0" fy="0">
				<stop offset="0.00784314" style="stop-color:#F70000;stop-opacity:1" />
				<stop offset="0.521569" style="stop-color:#F99F09;stop-opacity:1" />
				<stop offset="1" style="stop-color:#FFD71C;stop-opacity:1" />
			</radialGradient>
			<path style="fill:url(#RadialGradID_1) " d="M11.7,-2.65Q18.8 -1.1 18.8 -0.05Q18.8 1 11.7 2.6L2.6 4.4Q-2.6 5.6 2.45 9.25L5.95 11.5Q7.35 12.45 6.3 12.5L-1.7 9Q-7.75 6.3 -4.8 8.9Q-2.45 10.95 -7.7 8.3L-15.1 4.4Q-18.8 2.55 -18.8 -0.05Q-18.8 -2.65 -15.1 -4.45L-7.75 -8.35Q-2.5 -11 -4.8 -8.95Q-7.25 -6.7 -1.4 -9.3L6.3 -12.55Q7.35 -12.55 5.95 -11.6L2.45 -9.3Q-2.6 -5.7 2.6 -4.45L11.7 -2.65" />
		</g>
	</defs>
	<g id="screen" />
</svg>

css

JavaScript

"use strict";

// Ported from flash
// Chinese Flame Dragon by aetherfang

const screen = document.getElementById("screen");
const xmlns = "http://www.w3.org/2000/svg";
const xlinkns = "http://www.w3.org/1999/xlink";

window.addEventListener(
	"pointermove",
	(e) => {
		pointer.x = e.clientX;
		pointer.y = e.clientY;
		rad = 0;
	},
	false
);

const resize = () => {
	width = window.innerWidth;
	height = window.innerHeight;
};

let width, height;
window.addEventListener("resize", () => resize(), false);
resize();

const prepend = (use, i) => {
	const elem = document.createElementNS(xmlns, "use");
	elems[i].use = elem;
	elem.setAttributeNS(xlinkns, "xlink:href", "#" + use);
	elem.setAttributeNS(null, "opacity", 1 - 1 / N * i);
	screen.prepend(elem);
};

const N = 60;

const elems = [];
for (let i = 0; i < N; i++) elems[i] = { use: null, x: width / 2, y: 0 };
const pointer = { x: width / 2, y: height / 2 };
const radm = Math.min(pointer.x, pointer.y) - 20;
let frm = 1 + Math.random();
let rad = 0;
let a = 0;
let b = 0;

for (let i = 1; i < N; i++) {
	if (i === 1) prepend("Cabeza", i);
	else if (i === 4 || i === 14 || i === 26) prepend("Aletas", i);
	else prepend("Espina", i);
}

const run = () => {
	requestAnimationFrame(run);
	let e = elems[0];
	const ax = Math.cos(3 * frm) * rad * width / height;
	const ay = Math.sin(4 * frm) * rad * height / width;
	e.x += (ax + pointer.x - e.x) / 10;
	e.y += (ay + pointer.y - e.y) / 10;
	for (let i = 1; i < N; i++) {
		let e = elems[i];
		let ep = elems[i - 1];
		const a = Math.atan2(e.y - ep.y, e.x - ep.x);
		e.x += (ep.x - e.x) / 4;
		e.y += (ep.y - e.y) / 4;
		const s = (102 - 6 * (1 - i)) / (10000 / radm);
		e.use.setAttributeNS(
			null,
			"transform",
			`translate(${(ep.x + e.x) / 2},${(ep.y + e.y) / 2}) rotate(${
				(180 / Math.PI) * a
			}) translate(${0},${0}) scale(${s},${s})`
		);
	}
	if (rad < radm) rad++;
	frm += 0.003;
	if (rad > 60) {
		pointer.x += (width / 2 - pointer.x) * 0.05;
		pointer.y += (height / 2 - pointer.y) * 0.05;
	}
};

run();

粒子时间文字 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号