div+css实现横向拖动堆叠立体幻灯片效果代码-html代码-BFW代码库

div+css实现横向拖动堆叠立体幻灯片效果代码

代码语言：html

所属分类：幻灯片

代码描述：div+css实现横向拖动堆叠立体幻灯片效果代码

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

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

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

  
  
  
<style>
body, html {
  margin: 0;
  height: 100%;
  min-height: 100%;
  font-family: "Helvetica Neue", "Arial", sans-serif;
}

body {
  display: flex;
  justify-content: center;
  background: black;
  color: navy;
  overflow: hidden;
}

* {
  box-sizing: border-box;
}

.scrollsnap-carousel {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  height: 100%;
  max-width: 100%;
  scroll-snap-type: x mandatory;
  white-space: nowrap;
  padding: 100px 0 0 0;
}
.scrollsnap-carousel .slide {
  display: inline-block;
  height: 15%;
  width: 15%;
  flex: 0 0 15%;
  scroll-snap-align: center;
  view-timeline-name: --li-in-and-out-of-view;
  view-timeline-axis: inline;
  animation: linear move-to-top both;
  animation-timeline: --li-in-and-out-of-view;
  perspective: 40em;
  position: relative;
  color: navy;
  transform-origin: bottom;
}
.scrollsnap-carousel .slide:first-of-type {
  margin-left: 50%;
}
.scrollsnap-carousel .slide:last-of-type {
  margin-right: 50%;
}
.scrollsnap-carousel .slide .content {
  border-radius: 10px;
  width: 100%;
  padding-bottom: 100%;
  background: lightblue;
  animation: linear rotateSlide both;
  animation-timeline: --li-in-and-out-of-view;
  position: relative;
}
.scrollsnap-carousel .slide .content .content-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: linear fadeContent both;
  animation-timeline: --li-in-and-out-of-view;
}
.scrollsnap-carousel .slide .content .content-wrapper:after {
  content: "";
  display: block;
  width: 100%;
  height: 50%;
  position: absolute;
  background: linear-gradient(#112d37, black);
  top: 100%;
  left: 0;
  border-radius: 10px 10px 0 0;
}

@keyframes rotateSlide {
  0% {
    transform: translateX(-150%) rotateY(-45deg) translateZ(4em) scale(0.5);
    background: black;
  }
  50% {
    transform: rotateY(0deg) t.........完整代码请登录后点击上方下载按钮下载查看