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

我希望当我点击后退时，必须有一个转换关于如何实现这一点。请对此提供帮助。它只是引导程序的普通滑块。我看到了图像上的效果，但没有看到文本

.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>

我刚刚向active类添加了一个简单的css动画，因此该类将添加到下一张幻灯片，文本从opacity:0开始到opacity: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>

p{
opacity: 0; 
animation: fadeInUp 500ms ease-in-out 0s both;
animation-delay: 100ms;
}
@keyframes fadeInUp {
from { 
opacity: 0;
transform: translate3d(0, 50%, 0);
}

to {
opacity: 1;
transform: none;
}
}

相关内容

最新更新

热门标签：