如何用bootstrap文本旋转木马淡入和淡出背景

在这篇文章中，我们将向你展示如何用bootstrap文本旋转木马淡入和淡出背景。旋转木马是一种幻灯片，它用于循环播放图片或文字等组件。

方法：为了用bootstrap文本旋转木马创建一个淡入淡出的背景，我们遵循了一些基本步骤。

第1步：在你的HTML代码中加入bootstrap CDN。
第2步：为了制作一个bootstrap carousel，你必须在你的HTML div框中添加class = “carousel”。
第3步：为了创建旋转木马的淡入和淡出过渡，而不是一个滑块，你必须添加一个class=”carousel-fade”。
第4步：最后在你的div框中添加你想在旋转木马中播放的文本，并加上class=”carousel-item”。

示例:

<!DOCTYPE html>
<html>
    <head>
        <link href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
              rel="stylesheet" />
        <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
        </script>
        <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
        </script>
        <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
        </script>
  
        <style>
            h1 {
                color: green;
            }
            *,
            *::before,
            *::after {
                margin: 0;
                padding: 0;
            }
  
            html {
                box-sizing: border-box;
            }
            body {
                box-sizing: inherit;
                color: #fff !important;
            }
  
            h1 {
                margin-top: 0;
                text-align: center;
                font-weight: 600;
            }
            .carousel {
                margin-top: 10%;
                width: 100%;
                background-color: black;
            }
        </style>
    </head>
    <body>
        <h1>GeeksforGeeks</h1>
  
        <div id="carouselExampleFade" 
             class="carousel slide carousel-fade" 
             data-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <h1>Hii GeeksforGeeks</h1>
                </div>
                <div class="carousel-item">
                    <h1>Hello there</h1>
                </div>
                <div class="carousel-item">
                    <h1>GFG</h1>
                </div>
            </div>
            <a class="carousel-control-prev" 
               href="#carouselExampleFade" 
               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="#carouselExampleFade" 
               role="button" data-slide="next">
                <span class="carousel-control-next-icon" 
                      aria-hidden="true"> 
                </span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </body>
</html>

输出 :

如何用bootstrap文本旋转木马淡入和淡出背景？