仿支付宝我的银行卡动态切换效果

最新推荐文章于 2024-02-16 21:12:21 发布

原创

最新推荐文章于 2024-02-16 21:12:21 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html

本文介绍了一种模仿支付宝银行卡动态切换效果的实现方法，使用HTML、CSS和Vue.js结合Sass，通过动态调整元素位置和状态，实现了流畅的卡片切换动画。

效果图：
在这里插入图片描述
HTML代码，css写的有点冗余，下面有vue版本的用到了sass

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿支付宝我的银行卡动态切换效果</title>
</head>
<style>
    * {
    
    
        margin: 0;
        padding: 0;
    }

    html,
    body {
    
    
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .card-box {
    
    
        position: relative;
        top: 0;
        margin-top: 50px;
        transition: all linear .2s;
    }

    .card-list {
    
    
        position: absolute;
        left: 0;
        width: 100%;
        border-radius: 12px;
        padding: 0 30px;
        box-sizing: border-box;
        transition: all linear .2s;

    }

    .title {
    
    
        height: 200px;
        border-radius: 12px;
        box-shadow: 1px 1px 12px #ccc;
    }

    .content {
    
    
        height: 280px;
        background: #cdcdcd;
    }

    .card-list:nth-child(1) .title {
    
    
        background: rgb(250, 56, 56);
    }

    .card-list:nth-child(2) .title {
    
    
        background: rgb(230, 230, 165);

    }

    .card-list:nth-child(3)