Swiper Animate使用方法、Swiper 动画效果

蔡菜小奥比

已于 2024-01-25 13:48:32 修改

阅读量1.8k

点赞数 18

分类专栏： CSS3 文章标签：前端 css 动画

于 2024-01-25 13:46:41 首次发布

本文链接：https://blog.youkuaiyun.com/huang_99/article/details/135840733

版权

首先先放个官网地址（很通俗易懂）：https://www.swiper.com.cn/usage/animate/index.html

Swiper Animate也就是swiper轮播图的文字的动画效果，也可以是有轮播图大图作为背景，有个小的产品图绝对定位定到上面的一个动画效果。

在这里插入图片描述

我是想着参照这个网站做出来这个效果的，无意中发现了swiper有个animate插件。

在这里插入图片描述

下面是我做的练习：
在这里插入图片描述

放上代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animate.css测试</title>
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <style>
        .box {
     
            width: 100%;
            height: 100%;
        }

        .box p {
     
            text-align