vue項目實現(xiàn)背景顏色以及下劃線從左到右漸變動畫效果

更新時間：2024年08月28日 10:58:21 作者：江一銘

這篇文章主要介紹了vue項目實現(xiàn)背景顏色以及下劃線從左到右漸變動畫效果,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue項目：背景顏色、下劃線從左到右漸變動畫效果

產品提了一個需求，讓我寫一個阿里云的切換動畫效果。

本來我很不情愿的，但是他說ui妹子下班請我吃飯，我就勉為其難的答應了。

先來看看阿里云的效果

請?zhí)砑訄D片描述

鼠標放上去的時候切換table，下面的線條有過渡效果。這個莎x產品還非說改成點擊效果。ctm的。

再來看看我的demo效果

在這里插入圖片描述

話不多說上代碼

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
    #bottom {
        width: 63px;
        margin-top: 5px;
        margin-left: 17px;
        position: absolute;
        background: linear-gradient(to right, #f3edea, #f5b587, #ff6a00);
        padding-bottom: 3px;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .15s ease-in-out;
    }

    .cnm {
        transform: scaleX(1) !important;
    }

    .text {
        background-image: -webkit-linear-gradient(left, #f8e9de, #f5b587, #ff6a00);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 800;
    }



    /* ------------------以上為主要代碼控制動畫--------------------------- */


    p {
        margin: 0;
        padding: 0;
    }

    .box1 {
        width: 100px;
        margin: 20px 0;
        text-align: center;
    }

    section {
        width: 400px;
        display: flex;
        justify-content: center;
        border: 1px dashed #ff6a00;
    }

    .box2 {
        width: 95%;
        text-align: center;
        font-size: 30px;
        font-weight: 800;
        line-height: 266px;
    }
</style>

<body>

    <div id='app'>
        <section>
            <div>
                <div class="box1" v-for="(item,index) in list" :key="index" @click="handleClick(index)">
                    <p :class="{'text':actived==index}">{{item.name}}</p>
                    <div :class="{'cnm':actived==index}" id="bottom"></div>
                </div>
            </div>
            <div class="box2" v-show="actived==index?true:false" v-for="(item,index) in 6" :key="index">{{index+1}}
            </div>
        </section>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                list: [
                    {
                        name: '移動云 >',
                        id: 0
                    },
                    {
                        name: '華為云 >',
                        id: 1
                    },
                    {
                        name: '阿里云 >',
                        id: 2
                    },
                    {
                        name: '騰訊云 >',
                        id: 3
                    },
                    {
                        name: '百度云 >',
                        id: 4
                    }, {
                        name: '京東云 >',
                        id: 5
                    }
                ],
                actived: 0
            },
            methods: {
                handleClick(index) {
                    this.actived = index
                }
            }
        })
    </script>
</body>

</html>

背景顏色自己改改樣式吧！