下拉滚动自动加载飞入动画效果代码-html代码-BFW代码库

下拉滚动自动加载飞入动画效果代码

代码语言：html

代码描述：下拉滚动自动加载飞入动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
<style>
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

:root {
  --white: #fcfcfc;
  --black: #252525;
  
  --purple: #cf07fb;
  --purple-gradient:  linear-gradient(to top,  #9733EE, #cf07fb); 
  
  /*--green: #49e691; */
  --green: #36e77e;
  --green-gradient: linear-gradient(to top, #061700, #49e691); 
}

body {
  background-color: var(--black);
  color: var(--white);
  font-family: 'Muli', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  overflow-x: hidden;
}

h1 {
  margin-top: 2rem;
  margin-bottom: 4rem;
}

.box {
  background: var(--green);
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 200px;
  margin: 1rem;
  border-radius: 10px;
  box-shadow: inset 0px 0px 20px rgba(0,0,0,0.3);
  transform: translateX(400%);
  transition: transform 0.4s ease;
}

.box:nth-of-type(even) {
    transform: translateX(-400%);
}

.box.show {
  transform: translateX(0);
}

.box h2 {
  font-size: 36px;
}
</style>



</head>

<body  >
  <h1>Scroll to see the animation</h1>
<!-- a bunch of <div>'s to scroll through -->
<div class="box"><h2>Content</h2></div>
<div class="box"><h2>Content</h2></div>
<div class="box"><h2>Content</h2></div>
<div class="box"><h2>Content</h2></div>
<div class="box"><h2>Content</h2></div>
<div class="box"><h2>Content</h2></div>
<div class="box"><h2>Content</h2></div>
<div class="box"><h2>Content</h2></div>
<div class="box"><h2>Content</h2></div>
<div class="box"><h2>Content</h2></div>
<div class="box"><h2>Content</h2></div>
<div class="box"><h2>Content</h2></div>
<div class="box"><h2>Content</h2></div>
<div class="box"><h2>Content</h2></div>
<div class="box"><h2>Content</h2></div>
<div clas.........完整代码请登录后点击上方下载按钮下载查看