div+css实现图片折叠轮换轮播代码-html代码-BFW代码库

div+css实现图片折叠轮换轮播代码

代码语言：html

所属分类：幻灯片

代码描述：div+css实现图片折叠轮换轮播代码，无js代码参与，纯css

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
.gallery  {
  
  display: grid;
  width: 220px;
}
.gallery > img {
  grid-area: 1/1;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 10px solid #f2f2f2;
  box-shadow: 0 0 4px #0007;
  animation: slide 6s infinite;
}
.gallery > img:last-child {
  animation-name: slide-last;
}

.gallery > img:nth-child(2) { animation-delay: -2s; } 
.gallery > img:nth-child(3) { animation-delay: -4s; }


@keyframes slide {
  0%     {transform: translateX(0%)  ;z-index: 2;}
  16.66% {transform: translateX(120%);z-index: 2;}
  16.67% {transform: translateX(120%);z-index: 1;} 
  33.34% {transform: translateX(0%)  ;z-index: 1;}
  66.33% {transform: translateX(0%)  ;z-index: 1;}
  66.34% {transform: translateX(0%)  ;z-index: 2;} 
  100%   {transform: translateX(0%)  ;z-index: 2;}  
}
@keyframes slide-last {
  0%     {transform: translateX(0%)  ;z-index: 2;}
  16.66% {transform: translateX(120%);z-index: 2;}
  16.67% {t.........完整代码请登录后点击上方下载按钮下载查看