脉冲3d

下载代码

html

css

js

分享到微信朋友圈

X

html

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js'></script>
<div class="container">
	
	<svg class="amp amp1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
		<filter id="dropshadow" height="130%">
		  <feGaussianBlur in="SourceAlpha" stdDeviation="16"/> 
		  <feOffset dx="4" dy="16" result="offsetblur"/> 
		  <feComponentTransfer>
			<feFuncA type="linear" slope="0.2"/> 
		  </feComponentTransfer>
		  <feMerge> 
			<feMergeNode/> 
			<feMergeNode in="SourceGraphic"/> 
		  </feMerge>
		</filter>
		<path class="path1" style="filter:url(#dropshadow)" d="M538.35,312.44l-.07-36.8c0-18.27-11.09-32.92-27.22-38a38.63,38.63,0,0,0-31.8-25.49,39.81,39.81,0,0,0,12.05-29.22l-.07-36.8a39,39,0,0,0-40-39.92h-.08l-72.4.13c-55.52.11-89.94,34.51-89.83,89.77l.13,69.6a60.21,60.21,0,0,0,7.34,28.79,60.23,60.23,0,0,0-7.24,28.81l.15,77.6c.07,34.3,13.37,54.6,24.51,65.59s31.33,23.84,65.4,23.84h.26l94.4-.18c22.8,0,40-17.27,39.92-40.08l-.19-100.35A38.3,38.3,0,0,0,527,341,40,40,0,0,0,538.35,312.44ZM406.19,223.09H407l-.22.22c-.21.21-.42.42-.62.64Z" fill="#008fce"/>
    </svg>
	<svg class="amp amp2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
		
		<path class="path2" style="filter:url(#dropshadow)" d="M530.35,312.46l-.07-36.8a32,32,0,0,0-9.12-22.91,31.13,31.13,0,0,0-16.51-8.47,30.93,30.93,0,0,0-8.34-15.48,32,32,0,0,0-22.86-9h-.07l-38,.08a32,32,0,0,0-22.9,9.12,30.89,30.89,0,0,0-8.15,14.93l-6.1,0-.06-28.8,53.2-.1A31.07,31.07,0,0,0,483.31,183l-.07-36.8a31,31,0,0,0-32-31.94h-.07l-72.4.13c-25.29,0-45.46,7.37-59.94,21.76s-21.95,34.67-21.9,60l.13,69.6a52,52,0,0,0,8.58,28.78,52,52,0,0,0-8.48,28.81l.15,77.6c.05,25.33,7.49,45.49,22.13,59.92s34.6,21.53,59.77,21.53h.25l94.4-.18a31,31,0,0,0,31.94-32.06l-.2-106.33a30.93,30.93,0,0,0,15.71-8.38A32,32,0,0,0,530.35,312.46Zm-126.67,69h-5.2l-.07-36.79,5.2,0Z" fill="#fff"/>
    </svg>
	<svg class="amp amp3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
		<path class="path3" style="filter:url(#dropshadow)" d="M522.28,275.67c0-14.11-9.88-24-24-24h-.85c0-14.11-9.89-24-24-24h-.06l-38,.08c-8.7,0-14.18,3.69-17.25,6.76s-6.72,8.58-6.7,17.28l-21.2,0-.08-44.8,61.19-.11c14.14,0,24-9.92,24-24l-.07-36.8c0-8.7-3.69-14.18-6.77-17.25s-8.55-6.7-17.22-6.7h-.05l-72.4.13c-23.11,0-41.39,6.58-54.32,19.43s-19.59,31.2-19.54,54.31l.13,69.6a43.74,43.74,0,0,0,10.64,28.78,43.76,43.76,0,0,0-10.54,28.82l.15,77.6c0,23.11,6.69,41.35,19.75,54.23s31.16,19.23,54.15,19.23h.24l94.4-.18c8.7,0,14.18-3.69,17.25-6.77s6.72-8.57,6.7-17.27l-.21-113.6h.8c8.7,0,14.18-3.69,17.25-6.77s6.72-8.58,6.7-17.28ZM411.7,389.48l-21.2,0h0l-.1-52.8,21.2,0Z" fill="#008fce"/>
    </svg>
	<svg class="amp amp4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">

<path class="path4" style="filter:url(#dropshadow)" d="M514.28,275.69c0-9.56-6.44-16-16-16h-8.84v-8c0-9.55-6.44-16-16-16h0l-38,.08c-6,0-9.6,2.4-11.6,4.41s-4.38,5.65-4.37,11.62v8l-29.2.05h0c-2.05,0-4.79-.3-6.26-1.75s-1.72-3.93-1.72-5.83l-.08-45.2c0-2.1.27-4.9,1.64-6.3s4.21-1.71,6.34-1.72l61.2-.11c9.57,0,16-6.46,16-16l-.07-36.8c0-6-2.41-9.6-4.41-11.6s-5.64-4.37-11.58-4.37h0l-72.4.13c-20.93,0-37.31,5.8-48.69,17.11s-17.22,27.72-17.18,48.62l.13,69.6a35.85,35.85,0,0,0,14.31,28.77,35.87,35.87,0,0,0-14.21,28.82l.15,77.6c0,20.9,5.88,37.23,17.36,48.56s27.72,16.92,48.55,16.92h.21l94.4-.18c6,0,9.6-2.41,11.6-4.41s4.38-5.66,4.37-11.62l-.23-121.6h8.8c6,0,9.6-2.41,11.6-4.42s4.38-5.65,4.37-11.61ZM419.71,397.46l-29.2.06h-.06c-6.15,0-7.94-1.8-7.95-8l-.1-52.8c0-6.2,1.78-8,8-8l29.2-.06Z" fill="#fff"/>
		
    </svg>
	<svg class="amp amp5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
        <filter id="dropshadow" height="130%">
		  <feGaussianBlur in="SourceAlpha" stdDeviation="16"/> 
		  <feOffset dx="4" dy="16" result="offsetblur"/> 
		  <feComponentTransfer>
			<feFuncA type="linear" slope="0.2"/> 
		  </feComponentTransfer>
		  <feMerge> 
			<feMergeNode/> 
			<feMergeNode in="SourceGraphic"/> 
		  </feMerge>
		</filter>

		
		<path class="path5" style="filter:url(#dropshadow)" d="M451.23,138.21c5.19,0,8,2.78,8,8l.07,36.8c0,5.2-2.79,8-8,8l-61.19.11c-10.8,0-16,5.63-16,16l.08,45.2c0,10,5.63,15.59,16,15.57l37.2-.07,0-16c0-5.2,2.78-8,8-8l38-.08c5.2,0,8,2.79,8,8l0,16,16.8,0c5.2,0,8,2.78,8,8l.07,36.8c0,5.2-2.78,8-8,8l-16.8,0,.24,129.6c0,5.2-2.78,8-8,8l-94.4.18c-37.6.07-58-19.89-58.11-57.49l-.15-77.6c0-14.8,10.76-26,25.15-28.45V294c-14.4-2.37-25.23-13.55-25.25-28.35l-.13-69.6c-.08-37.6,20.29-57.64,57.89-57.71ZM390.37,320.72c-10.8,0-16,5.63-16,16l.1,52.8c0,10.8,5.63,16,16,16l37.2-.07-.16-84.8Z" fill="#008fce"/>
    </svg>
	
	<div class="spot"></div>
	
</div>

css

html {
	box-sizing:border-box;
}
*,*:before,*:after {
	box-sizing:inherit;
}
body {
	background:#008fce;overflow: hidden
}
body,html {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}
body {
	display:flex;
	align-items:center;
	justify-content:center;
}
.container {
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	width:800px;
	height:600px;
	visibility:hidden;
}
.spot {
	width:300px;
	height:300px;
	background:rgba(0,0,0,0.05);
	border-radius:50%;
}
.amp {
	position:absolute;
	top:0;
	left:0;
}
.me {
	position:fixed;
	z-index:1000;
	top:24px;
	left:24px;
	display:flex;
	flex-direction:column;
}
.me__link {
	position:relative;
	margin-bottom:16px;
	color:white;
	font-family:Helvetica,sans-serif;
	text-decoration:none;
	font-size:16px;
}
.me__link span {
	display:block;
	position:absolute;
	bottom:-3px;
	left:0;
	height:1px;
	width:5%;
	background-color:white;
	content:"";
	transition:width 0.3s;
}
.me__link:hover span {
	width:100%;
}
.twitter-icon {
	position:fixed;
	top:16px;
	right:24px;
	display:block;
	width:40px;
	height:40px;
}

JavaScript

var $body = $('body'),
	$amp = $('.amp'),
	$amp1 = $('.amp1');

TweenMax.set('.container', {
	visibility: 'visible'
});

function initTilt() {
	TweenMax.set(".container", {perspective: 100, scale: 2});
	TweenMax.set('.amp', { transformStyle: "preserve-3d" });
	// thicker to thin
	TweenMax.set('.amp1', { z: -80, scale: 1.0 });
	TweenMax.set('.amp2', { z: -60, scale: .89 });
	TweenMax.set('.amp3', { z: -40, scale: .78 });
	TweenMax.set('.amp4', { z: -20, scale: .67 });
	TweenMax.set('.amp5', { z: 0, scale: .56 });
	
	TweenMax.staggerTo('.amp', 0.4, {
		// scale: '+=0.05',
		z: '+=10',
		yoyo: true, 
		repeat: -1,
		ease:Sine.easeInOut
	}, 0.07);
	
	$body.mousemove(function(e) {
		rotate(e.pageX, e.pageY)
	}); 
	
	window.addEventListener('touchstart', function(e) {
		clientX = e.touches[0].clientX;
		clientY = e.touches[0].clientY;
		// e.preventDefault();
		rotate(clientX, clientY);
	}, false);
};

function rotate(cx, cy) {
	var sxPos = (cx / $body.width()*100 - 50)*2 ;
	var syPos = (cy / $body.height()*100 - 50)*2;
	$amp.each(function() {
		TweenMax.to($(this), 3, {
			rotationY: -0.3 * sxPos,
			rotationX: 0.3 * syPos,
			transformOrigin: "center center -200",
			ease: Expo.easeOut
		});
	});
}

$body.mouseleave(function() {
	rotate($body.width()/2, $body.height()/2);
})

initTilt();

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

<!doctype html> <html> <head> <meta charset="utf-8"> <title>脉冲3d-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号