gsap实现温暖的北极冬天景色滚动视觉差异效果代码-html代码-BFW代码库

gsap实现温暖的北极冬天景色滚动视觉差异效果代码

代码语言：html

代码描述：gsap实现温暖的北极冬天景色滚动视觉差异效果代码

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

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

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

  
  
<style>
:root {
    
    --auroraColor0: rgb(255 0 0);
    --auroraColor1: rgb(0 255 0);
    --auroraColor2: rgb(0 0 255);
/* 
   - --bg0: #FFFFFF;
    --bg: color-mix(in srgb, var(--auroraColor1) 40%, var(--bg0) );
    --bgColor: color-mix(in srgb, #000000 70%, var(--bg) );

    -bgColor90: color-mix(in srgb, #000000 10%, var(--bgColor) );
    --bgColor80: color-mix(in srgb, #000000 20%, var(--bgColor) );
    --bgColor70: color-mix(in srgb, #000000 30%, var(--bgColor) );
    --bgColor60: color-mix(in srgb, #000000 40%, var(--bgColor) );
    --bgColor50: color-mix(in srgb, #000000 50%, var(--bgColor) );

    --bgColor110: color-mix(in srgb, #FFFFFF 10%, var(--bgColor) );
    --bgColor120: color-mix(in srgb, #FFFFFF 20%, var(--bgColor) );
    --bgColor130: color-mix(in srgb, #FFFFFF 30%, var(--bgColor) );
    --bgColor140: color-mix(in srgb, #FFFFFF 40%, var(--bgColor) );
    --bgColor150: color-mix(in srgb, #FFFFFF 50%, var(--bgColor) ); */

}

.bgColor { fill: var(--bgColor); }

.bgColor90 { fill: var(--bgColor90); }
.bgColor80 { fill: var(--bgColor80); }
.bgColor70 { fill: var(--bgColor70); }
.bgColor60 { fill: var(--bgColor60); }
.bgColor50 { fill: var(--bgColor50); }

.bgColor110 { fill: var(--bgColor110); }
.bgColor120 { fill: var(--bgColor120); }
.bgColor130 { fill: var(--bgColor130); }
.bgColor140 { fill: var(--bgColor140); }
.bgColor150 { fill: var(--bgColor150); }

*,
*::before,
*::after {
	box-sizing: border-box !important;
	outline: none;
	border: 0;
}

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0px;
}

body {
	padding: 0px;
	height: 100vh;
    overflow-x: clip;
	background: var(--bgColor130);
}

#gsapWrapper {
	
	position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    width: 100vw;
    height: 100vh;
	visibility: hidden;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.9) 50%, var(--bgColor130) 50%, var(--bgColor130) 100%),
	linear-gradient(60deg, var(--auroraColor0), transparent 50%),
	linear-gradient(127deg, var(--auroraColor1), transparent 80%),
	linear-gradient(280deg, var(--auroraColor2), transparent 50%);

	#gsapBody {
		
		display: block;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100v.........完整代码请登录后点击上方下载按钮下载查看