2022年 6 月 28日- (星期二) / Published in css 设计, html 设计, javascript 设计, JS 特效, 前端设计, 未分类

html css js 实现滑动相框特效cid1043-网页前端设计

html and css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>swiper effect</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css">
    <style>
     [class^="swiper-button-"] {
   transition: all 0.3s ease;
}
 .swiper-slide {
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
}
 *, *:before, *:after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}
 .swiper-container {
   width: 80%;
   height: 100vh;
   float: left;
   transition: opacity 0.6s ease, transform 0.3s ease;
}
 .swiper-container.nav-slider {
   width: 20%;
   padding-left: 5px;
}
 .swiper-container.nav-slider .swiper-slide {
   cursor: pointer;
   opacity: 0.4;
   transition: opacity 0.3s ease;
}
 .swiper-container.nav-slider .swiper-slide.swiper-slide-active {
   opacity: 1;
}
 .swiper-container.nav-slider .swiper-slide .content {
   width: 100%;
}
 .swiper-container.nav-slider .swiper-slide .content .title {
   font-size: 20px;
}
 .swiper-container:hover .swiper-button-prev, .swiper-container:hover .swiper-button-next {
   transform: translateX(0);
   opacity: 1;
   visibility: visible;
}
 .swiper-container.loading {
   opacity: 0;
   visibility: hidden;
}
 .swiper-slide {
   overflow: hidden;
}
 .swiper-slide .slide-bgimg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-position: center;
   background-size: cover;
}
 .swiper-slide .entity-img {
   display: none;
}
 .swiper-slide .content {
   position: absolute;
   top: 40%;
   left: 0;
   width: 50%;
   padding-left: 5%;
   color: #fff;
}
 .swiper-slide .content .title {
   font-size: 2.6em;
   font-weight: bold;
   margin-bottom: 30px;
}
 .swiper-slide .content .caption {
   display: block;
   font-size: 13px;
   line-height: 1.4;
   transform: translateX(50px);
   opacity: 0;
   transition: opacity 0.3s ease, transform 0.7s ease;
}
 .swiper-slide .content .caption.show {
   transform: translateX(0);
   opacity: 1;
}
 [class^="swiper-button-"] {
   width: 44px;
   opacity: 0;
   visibility: hidden;
}
 .swiper-button-prev {
   transform: translateX(50px);
}
 .swiper-button-next {
   transform: translateX(-50px);
}
 
    </style>
</head>
<body>
    <div class="swiper-container main-slider loading">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <figure class="slide-bgimg" style="background-image:url(pretty-woman-1509956_960_720.jpg)">        
      </figure>
      <div class="content">      
        <span class="caption"></span>
      </div>
    </div>
    
    
    
    
    
    <div class="swiper-slide">
      <figure class="slide-bgimg" style="background-image:url(281111184_d.jpg);">       
      </figure>
     
    </div>
    
    
    <div class="swiper-slide">
      <figure class="slide-bgimg" style="background-image:url(auto.webp)">
        <img src="auto.webp" class="entity-img" />
      </figure>      
    </div>
    <div class="swiper-slide">
      <figure class="slide-bgimg" style="background-image:url(no.png)">        
      </figure>
      
    </div>
    <div class="swiper-slide">
      <figure class="slide-bgimg" style="background-image:url(goth.webp)">        
      </figure>
       
    </div>
  </div>
  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev swiper-button-white"></div>
  <div class="swiper-button-next swiper-button-white"></div>
</div>

<!-- Thumbnail navigation -->
<div class="swiper-container nav-slider loading">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <figure class="slide-bgimg" style="background-image:url(pretty-woman-1509956_960_720.jpg)">
        <img src="" class="entity-img" />
      </figure>
       
    </div>
    <div class="swiper-slide">
      <figure class="slide-bgimg" style="background-image:url(281111184_d.jpg)">
        
      </figure>
     
    </div>
    <div class="swiper-slide">
      <figure class="slide-bgimg" style="background-image:url(auto.webp)">
         
      </figure>
     
    </div>
    <div class="swiper-slide">
      <figure class="slide-bgimg" style="background-image:url(no.png)">
         
      </figure>
       
    </div>
    
    <div class="swiper-slide">
      <figure class="slide-bgimg" style="background-image:url(goth.webp)">    
      </figure>
       
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>
<script src="customswiper.js">
     
</script>
</body>
</html>

在线演示?? 让链接同时具备两种打开方式