使用 CSS3 动画为 Bootstrap 轮播增添趣味

添加滑块或轮播以在网站上展示内容是开发人员的常见客户请求。可用的免费和高级轮播插件的数量是巨大的，其中很多都提供了大量有用的配置选项和动态效果。然而，有时您只需要一个具有最少选项的轻量级旋转木马。在这种情况下，如果您的项目使用Bootstrap （流行的开源前端框架），那么除了Bootstrap Carousel 组件之外，您不需要再进一步寻找。 Backward Skip 10s Play Video Forward Skip 10s 在本文中，我将展示如何向 Bootstrap Carousel 添加一些有趣的动画效果，同时仍然确保这个方便的 JavaScript 组件保持无膨胀且快速实现。 Animate.css 简介 与制作自己的动画效果一样，我将使用一个著名的开源 CSS3 动画库，最恰当的名称是Dan Eden 的Animate.css。 这样我就可以专注于手头的任务，而不是解释 CSS3 动画的代码。



然而，如果您想深入研究该主题，您会喜欢SitePoint 上由 Craig Buckler 编写的CSS3 动画系列。 使用 Animate.css 需要两个步骤： Learn to Code with JavaScript 包含animate.min.css在文档的部分中 将 的类添加animated yourchosenanimation到您想要在网页上设置 WhatsApp 号码数据 动画的元素。 在后一步中，您可以将您选择的动画替换为与您在 Animate.css 网站上看到的众多动画相对应的类名称。 Bootstrap 轮播简介 Bootstrap Carousel 组件包含三个主要部分： 轮播指示器跟踪幻灯片的总数，为用户提供当前正在查看的幻灯片所占据的位置的视觉线索，并为滑块提供替代导航。 Carousel item位于类为 的包装容器内.carousel-inner，代表每张单独的幻灯片。您可以在每个项目中放置图像。您还可以为幻灯片添加标题。



好处是，您可以将几乎任何 HTML 元素放入具有 类的容器中，carousel-captionBootstrap 将负责样式和格式设置。您要为这些字幕制作动画。 最后，轮播控件是导航箭头，使用户能够访问下一张和上一张幻灯片。 Bootstrap轮播结构 为了使这个演示简单，我不会将图像添加到轮播中。重点在于如何为轮播字幕制作动画。 构建 HTML 结构 如果您正在跟进，那么您需要在项目中包含以下内容： jQuery Bootstrap 的 CSS 和 JavaScript Font Awesome或任何其他品牌的图标，尽管您可以随意用简单文本替换图标 动画.css 您可以在其中添加自己的代码的样式表和 JavaScript 文档。 这是 Bootstrap Carousel 的代码在此代码中，您首先找到第一张幻灯片。data-animation从那里，使用以animated开头的属性值，选择要在标题中设置动画的内容。