原生js+css实现电影层叠立体幻灯片效果代码-html代码-BFW代码库

原生js+css实现电影层叠立体幻灯片效果代码

代码语言：html

所属分类：幻灯片

代码描述：原生js+css实现电影层叠立体幻灯片效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link href="https://fonts.googleapis.com/css2?family=Creepster&family=Poppins:wght@400;600;800&display=swap" rel="stylesheet">
  
<style>
:root {
	--primary: #ff6b00;
	--primary-glow: rgba(255, 107, 0, 0.5);
	--secondary: #8b00ff;
	--secondary-glow: rgba(139, 0, 255, 0.3);
	--accent: #50fa7b;
	--accent-glow: rgba(80, 250, 123, 0.5);
	--bg: #13151a;

	/* Measurements */
	--card-width: 300px;
	--card-height: 450px;
	--card-border-radius: 20px;
	--transition-speed: 0.5s;

	/* Enhanced effects */
	--hover-scale: 1.05;
	--hover-brightness: 1.2;
	--glow-strength: 20px;
	--depth-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	min-height: 100vh;
	background: var(--bg);
	color: white;
	font-family: "Poppins", sans-serif;
	overflow-x: hidden;
	cursor: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2rem 1rem;
	perspective: 1000px; /* Added for 3D effects */
}

/*  Ambient Background */
.ambient-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(
		circle at center,
		rgba(255, 107, 0, 0.15),
		rgba(139, 0, 255, 0.15),
		rgba(80, 250, 123, 0.15)
	);
	z-index: -2;
	transition: transform 0.3s ease-out;
	animation: ambientShift 20s ease-in-out infinite;
	filter: blur(40px);
}

/*  Title Styles */
.title {
	font-family: "Creepster", cursive;
	font-size: 5rem;
	text-align: center;
	margin-bottom: 2rem;
	line-height: 1;
	position: relative;
	filter: drop-shadow(0 0 15px rgba(255, 107, 0, 0.3));
}

.spooky {
	color: var(--primary);
	text-shadow: 0 0 var(--glow-strength) var(--primary-glow),
		0 0 calc(var(--glow-strength) * 2) var(--primary-glow);
	display: inline-block;
	animation: floatText 3s ease-in-out infinite;
	transform-style: preserve-3d;
}

.classics {
	color: var(--accent);
	text-shadow: 0 0 var(--glow-strength) var(--accent-glow),
		0 0 calc(var(--glow-strength) * 2) var(--accent-glow);
	display: inline-block;
	animation: floatText 3s ease-in-out infinite 0.5s;
	transform-style: preserve-3d;
}

/*  Main Container */
main {
	width: 100%;
#	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	transform-style: preserve-3d;
}

/*  Carousel Styles */
.carousel-container {
	position: relative;
	width: 100%;
	height: var(--card-height);
	margin: 2rem 0;
	perspective: 2000px;
	display: flex;
	justify-content: center;
	align-items: center;
	transform-style: preserve-3d;
}

.carousel {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
}

/*  Movie Cards */
.movie-card {
	position: absolute;
	width: var(--card-width);
	height: var(--card-height);
	transform-origin: center;
	transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
	cursor: none;
	transform-style: preserve-3d;
	will-change: transform, .........完整代码请登录后点击上方下载按钮下载查看