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%), trans.........完整代码请登录后点击上方下载按钮下载查看