gsap+lenis实现滚动式扇形背景跟随卡片翻转轮换代码-html代码-BFW代码库

gsap+lenis实现滚动式扇形背景跟随卡片翻转轮换代码

代码语言：html

所属分类：幻灯片

代码描述：gsap+lenis实现滚动式扇形背景跟随卡片翻转轮换代码

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

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

<head>
  <meta charset="UTF-8">
  


  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.cdnfonts.com/css/grids-personal-use');
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html {
	font-size: 62.5%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body {
	font-family: 'Arial', sans-serif;
	color: #fff;
	overflow-x: hidden;
}
section {
	width: 100%;
	height: 100svh;
	background: var(--bg);
	display: flex;
	flex-direction: column;
}
.cards {
	display: flex;
	width: 100%;
	max-width: 70rem;
	margin: auto;
	aspect-ratio: 1;
	transform-style: preserve-3d;
	perspective: 1000px;
	isolation: isolate;
}
.background {
	position: absolute;
	inset: 0;
	width: 100%;
	aspect-ratio: 1;
	background: conic-gradient(from 0deg, #ff6b6b var(--conic-t, 0%), transparent var(--conic-b, 0%));
	border-radius: 50%;
	z-index: -1;
	filter: drop-shadow(0 0 20px rgba(255, 107, 107, 0.3));
}
.card {
	margin: auto;
	width: 40rem;
	height: 70%;
	background: #16213e;
	transform-style: preserve-3d;
	transform: rotateY(var(--rotate-y));
	transition: transform .6s linear;
	font-size: 5rem;
	font-weight: 700;
	color: #ffffff;
	text-align: center;
	will-change: transform;
	border-radius: 2rem;
	box-shadow: 
		0 20px 40px rgba(0, 0, 0, 0.3),
		0 0 0 1px rgba(255, 255, 255, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
	> div {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding: 2rem;
	.........完整代码请登录后点击上方下载按钮下载查看