时间戳

首页 > 解决方案 > 如何在我的滑块文本上添加过渡或淡入效果

html - 如何在我的滑块文本上添加过渡或淡入效果

问题描述

我希望当我向前点击时，必须有一个关于如何实现这一目标的过渡。请帮助解决这个问题。它只是引导程序的正常滑块。我已经看到了对图像的影响，但没有看到对文本的影响

.first1,.second,.first{
   background-color: teal;
}
<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
   <link rel="stylesheet" href="style.css">
   <title>Slider</title>
</head>
<body>
   <div class="container">
      <div class="carousel slider" data-ride="carousel" id="carouselExampleControls" >
         <div class="carousel-inner">
            <div class="carousel-item active first1">
               <div class="text-center">
                  <p>hello1</p>
               </div>
            </div>
            <div class="carousel-item first">
               <div class="text-center">
                  <p>hello2</p>
               </div>
            </div>
            <div class="carousel-item second">
               <div class="text-center">
                  <p>hello3</p>
               </div>
            </div>
         </div>
         <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
      </div>
   </div>
</body>
</html>

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

我刚刚向该类添加了一个简单的 css 动画，因此该类被添加到下一张幻灯片中，active文本从opacity:0opacity:1

.first1,.second,.first{
   background-color: teal;
}

.active p {
  opacity:0;
  animation-name:opacity;
  animation-duration:1s;
  animation-fill-mode:forwards;
}
@keyframes opacity {
  from {opacity:0;}
  to {opacity:1;}
}
<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
   <link rel="stylesheet" href="style.css">
   <title>Slider</title>
</head>
<body>
   <div class="container">
      <div class="carousel slider" data-ride="carousel" id="carouselExampleControls" >
         <div class="carousel-inner">
            <div class="carousel-item active first1">
               <div class="text-center">
                  <p>hello1</p>
               </div>
            </div>
            <div class="carousel-item first">
               <div class="text-center">
                  <p>hello2</p>
               </div>
            </div>
            <div class="carousel-item second">
               <div class="text-center">
                  <p>hello3</p>
               </div>
            </div>
         </div>
         <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
      </div>
   </div>
</body>
</html>

推荐阅读