vue项目实现背景颜色以及下划线从左到右渐变动画效果

更新时间：2024年08月28日 10:58:21 作者：江一铭

这篇文章主要介绍了vue项目实现背景颜色以及下划线从左到右渐变动画效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue项目：背景颜色、下划线从左到右渐变动画效果

产品提了一个需求，让我写一个阿里云的切换动画效果。

本来我很不情愿的，但是他说ui妹子下班请我吃饭，我就勉为其难的答应了。

先来看看阿里云的效果

请添加图片描述

鼠标放上去的时候切换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>

背景颜色自己改改样式吧！

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue项目完成后如何实现项目优化的示例
本文主要介绍了vue项目完成后如何实现项目优化的示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-12-12
Vue前端路由hash与history差异深入了解
这篇文章主要为大家介绍了Vue前端路由hash与history差异的深入了解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
Vue在echarts tooltip中添加点击事件案例详解
本文主要介绍了Vue项目中在echarts tooltip添加点击事件的案例详解，代码具有一定的价值，感兴趣的小伙伴可以来学习一下
2021-11-11
详解Vue与VueComponent的关系
这篇文章主要为大家介绍了Vue与VueComponent的关系，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-12-12
利用angular、react和vue实现相同的面试题组件
eact 和angular，vue 这三个框架最近都比较火，下面这篇文章主要给大家介绍了关于利用angular、react和vue实现相同的面试题组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。
2018-02-02
Vue组件之非单文件组件的使用详解
Vue中常常会把组件分为非单文件组件和单文件组件，这篇文章主要为大家介绍了非单文件组件的具体使用方法，文中的示例代码讲解详细，需要的可以参考一下
2023-05-05
Vue3中嵌套路由和编程式路由的实现
Vue Router在Vue.js的核心库上提供了路由的功能,使得我们可以在单页应用中实现页面的切换、跳转和参数传递等功能,本文主要介绍了Vue3中嵌套路由和编程式路由的实现,感兴趣的可以了解一下
2023-12-12
一文带你搞懂Vue中i18n的使用方法
i18n是"国际化"的简称,它的主要目的是让应用程序能够适应不同的语言和地区的需求,下面就跟随小编一起来看看Vue中i18n的具体使用方法吧
2025-01-01
Vue中created与mounted的区别浅析
在使用vue框架的过程中,我们经常需要给一些数据做一些初始化处理,这时候我们常用的就是在created与mounted选项中作出处理,这篇文章主要给大家介绍了关于Vue中created与mounted区别的相关资料,其中部分知识点可能是我们日常工作会见到或用到的,需要的朋友可以参考下
2022-06-06
Vue在项目中如何引入本地Json数据
这篇文章主要介绍了Vue在项目中如何引入本地Json数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11