js+css实现图片切换过渡动画效果代码-html代码-BFW代码库

js+css实现图片切换过渡动画效果代码

代码语言：html

所属分类：其他

代码描述：js+css实现图片切换过渡动画效果代码

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

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

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

  
  
<style>
*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  box-sizing: content-box;
}
html,
body {
  width: 100%;
  height: 100%;
}
.container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.active + img {
  transform: translatex(100%);
}
img:has(* + .active) {
  transform: translatex(-150%);
}
img {
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  bottom: 0;
  width: 100vw;
  /* height: calc(100vw * 2 / 3); */  height: 100%;
  filter: blur(0px);
  /* 
  object-fit: cover; 
  object-position: bottom; 
  */
}
img.transition-start.right {
  animation: transition-right-start 0.5s linear forwards;
}
@keyframes transition-right-start {
  0% {
    width: 100vw;
    filter: blur(0px);
    /* height: calc(100vw * 2 / 3); */  height: 100%;
    transform: translatex(-50%);
  }
  3% {
    width: 300vw;
    filter: blur(3px);
    /* height: calc(100vw * 2 / 3); */  height: 100%;
    transform: translatex(-50%);
  }
  5% {
    width: 600vw;
    filter: blur(3px);
    /* height: calc(100vw * 2 / 3); */  height: 100%;
    transform: translatex(-50%);
  }
  95% {
    width: 6000vw;
    filter: blur(3px);
    /* height: calc(100vw * 2 / 3); */  height: 100%;
    transform: translatex(-100%);
  }
  100% {
    width: 100vw;
    filter: blur(0px);
    /* height: calc(100vw * 2 / 3); */  height: 100%;
    transform: translatex(-150%);
  }
}
img.transition-end.right {
  animation: transition-right-end 0.5s linear forwards;
}
@keyframes transition-right-end {
  0% {
    width: 100vw;
    filter: blur(0px);
    /* height: calc(100vw * 2 / 3); */  height: 100%;
    transform: translatex(100%);
  }
  3% {
    width: 300vw;
    filter: blur(3px);
    /* height: calc(100vw * 2 / 3); */  height: 100%;
    transform: translatex(100%);
  }
  5% {
    width: 600vw;
    filter: blur(3px);
 .........完整代码请登录后点击上方下载按钮下载查看