模仿王者的炫酷前端页面

最新推荐文章于 2024-07-23 11:50:44 发布

满山猴子我腚最红#

最新推荐文章于 2024-07-23 11:50:44 发布

阅读量813

点赞数 1

文章标签：前端 javascript bootstrap jquery html

本文链接：https://blog.csdn.net/qq_61935150/article/details/122107724

版权

本页面使用了bootstrap和jquery技术，视频、音频和图片资源均来源于王者荣耀官网。

页面中的角色和视频背景会随着鼠标的移动而轻微移动 (有点3D的感觉)。

效果图如下:

点击右侧菜单即可切换角色，并会触发该角色的语音

比如“凯”的：无限接近死亡，更能醒悟生存的真谛。

团战可以输，卤蛋必须死

附上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="bootstrap5/css/bootstrap.min.css" rel="stylesheet">
		<script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
		<script src="jquery/jquery3.6.0.js"></script>
		<style type="text/css">
			* {
				color: #ffffff;
			}

			#kaivideo {
				min-width: 130%;
				min-height: 100%;
				height: auto;
				width: auto;
				position: fixed;
				z-index: -9;
				left: 0;
				top: 0;
				filter: brightness(50%);
			}

			a {
				text-decoration: none;
				color: #ffffff;
			}

			.bigpic {
				width: 120vw;
				height: 120vh;
				position: fixed;
				top: 0;
				left: -100px;
				z-index: -5;
			}

			.bigbg {
				width: auto;
				height: 140vh;
				position: fixed;
				top: -70px;
				left: 0px;
				z-index: -8;
			}

			.bigfont {
				margin-top: 20vh;
			}

			.smallfont {
				font-size: 0.8vw;
			}

			.namebigbox {
				width: 100vw;
				height: 40vh;
				overflow: hidden;
				position: relative;
			}

			.namebox {
				position: absolute;
				right: 0;
			}

			.namebox div {
				width: 10vw;
				height: 7vh;
				background: linear-gradient(to right, rgba(255, 113, 5, 0.3), rgba(226, 100, 0, 1));
				margin-bottom: 2px;
				transform: skew(-15deg);
				font-size: 1.2vw;
				line-height: 6vh;
				padding-left: 10px;
				border: 3px solid transparent;
				border-left: transparent;
				cursor: pointer;
				transition: all 0.3s;
			}
			
			.namebox div:hover {
				width: 15vw;
				background: transparent;
				border: 3px solid rgba(226, 100, 0, 1);
				padding-left: 15px;
				margin-left: -40px;
			}
		</style>
	</head>
	<body>
		<video src="src/凯.mp4" loop="" controls="" autoplay="" id="kaivideo"></video>
		<img src="src/凯.png" class="bigpic">
		<img src="src/凯背景.png" class="bigbg">
		<audio src="src/凯1.mp3" autoplay="" id="myaudio"></audio>
		<audio src="src/点击音效.mp3" autoplay="" id="onclickaudio"></audio>
		<div class="container-fluid">
			<div class="row">
				<div class="col-2">
					<img src="src/logo1.png" width="60%">
				</div>
				<div class="col-1 offset-9 mt-3">
					<a href="javascript:;">点击登录</a>
				</div>
			</div>
			<div class="row">
				<div class="col-1 offset-1">
					<img src="src/凯字.png" class="bigfont">
				</div>
			</div>
			<div class="row mt-3 namebigbox">
				<div class="col-3 offset-1 smallfont">
					背负血脉诅咒的剑士，以刀锋与魔铠的力量著称。为了适应
					暗心世界复杂多变的环境，他将灵活运用自己的武器，有效
					打击不同距离的对手。而在暗心的影响下，魔铠的力量也在
					他的身体中躁动不安——他又是否能够掌控这危险的力量？
				</div>
				<div class="col-1 offset-7 namebox">
					<div
						onclick="toggle('src/凯.png','src/凯.mp4','src/凯字.png','src/凯背景.png','src/凯2.mp3','背负血脉诅咒的剑士，以刀锋与魔铠的力量著称。为了适应暗心世界复杂多变的环境，他将灵活运用自己的武器，有效打击不同距离的对手。而在暗心的影响下，魔铠的力量也在他的身体中躁动不安——他又是否能够掌控这危险的力量？')">
						凯</div>
					<div
						onclick="toggle('src/大乔.png','src/大乔.mp4','src/大乔字.png','src/大乔背景.png','src/大乔3.mp3','她曾引动海潮游走战场。现在，她舞动法杖，利用不同形式的水流，有效打击较远距离的对手。水流的力量使她在暗心世界高低错落的地形中能够灵活移动，在陷入危险境地时也能设法返回安全地带。她将在蹁跹跃动间，寻找时机，优雅地击败对手。')">
						大乔</div>
					<div
						onclick="toggle('src/红爸爸.png','src/红爸爸.mp4','src/红爸爸字.png','src/红爸爸背景.png','src/.mp3','来到暗心世界的可不只有英雄，还有威猛的猩红守护者！它依靠自己结实的身体和有力的手臂，稳稳地占据战场中央位置，驱逐所有前来骚扰的对手。它这么做可能只是为了给小伙伴咕嗒制造一块安全的游戏区吧？')">
						猩红守护者</div>
					<div
						onclick="toggle('src/鲁班.png','src/鲁班.mp4','src/鲁班字.png','src/鲁班背景.png','src/鲁班1.mp3','借你们肉体试验下新招式的威力！来到暗心世界的鲁班七号充分利用鲁班大师的机关术，在场中灵活地布置和投掷爆炸物，让其他英雄上蹿下跳！如果打不过了怎么办？那就叫上鲁班家族的机关兄弟们一起上！')">
						鲁班七号</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var kaivideo = $("#kaivideo");
			$(document).on({
				mousemove: function(e) {
					var x = e.clientX;
					var y = e.clientY;
					$('.bigpic').css({
						'left': -x * 0.05 - 100,
						'top': -y * 0.05
					});
					$('.bigbg').css({
						'left': -x * 0.15 + 20,
						'top': -y * 0.15 - 70
					});
					$('#kaivideo').css({
						'left': -x * 0.3,
						'top': -y * 0.3
					});
				},
				click: function() {
					$('#onclickaudio').attr('src', 'src/点击音效.mp3');
				}
			});
			function toggle(pic, video, font, bg, audio, text) {
				$('.bigpic').attr('src', pic);
				$('#kaivideo').attr('src', video);
				$('.bigfont').attr('src', font);
				$('.bigbg').attr('src', bg);
				$('#myaudio').attr('src', audio);
				$('.smallfont').html(text);
				document.querySelector('.bigpic').animate([{
						transform: 'translate(66%)'
					},
					{
						transform: 'translate(0%)'
					},
				], {
					duration: 600,
					easing: 'ease-out',
					fill: 'forwards',
				});
				document.querySelector('.bigfont').animate([{
						transform: 'translate(-666%)'
					},
					{
						transform: 'translate(0%)'
					},
				], {
					duration: 600,
					easing: 'ease-out',
					fill: 'forwards',
				});
				document.querySelector('.bigbg').animate([{
						transform: 'translate(-666%)'
					},
					{
						transform: 'translate(0%)'
					},
				], {
					duration: 600,
					easing: 'ease-out',
					fill: 'forwards',
				});
				document.querySelector('.smallfont').animate([{
						transform: 'translate(-666%)'
					},
					{
						transform: 'translate(0%)'
					},
				], {
					duration: 700,
					easing: 'ease-out',
					fill: 'forwards',
				});
			}
			$('.namebox div').click(function() {
				kaivideo.animate({
					opacity: '0.5'
				}, 100);
				kaivideo.animate({
					opacity: '1'
				}, 600);

			});
		</script>
	</body>
</html>

动画效果的代码重复次数较多 {{{(>_<)}}}

如果想了解更多或想要图片和视频资源请联系我。