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>

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

总结

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

您可能感兴趣的文章:

Vue2.0父子组件传递函数的教程详解
这篇文章主要介绍了Vue2.0父子组件传递函数的教程详解,需要的朋友可以参考下
2017-10-10
vue组件属性(props)及私有数据data解析
这篇文章主要介绍了vue组件属性(props)及私有数据data解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
Vue导出页面为PDF格式的实现思路
这篇文章主要介绍了Vue导出页面为PDF格式的实现思路，其实思路也很简单，就是将页面转换成图片格式.然后通过图片的base64码.生成PDF..感兴趣的朋友跟随脚本之家小编一起看看吧
2018-07-07
Vue动态组件和keep-alive组件实例详解
动态组件指的是动态切换组件的显示与隐藏,下面这篇文章主要给大家介绍了关于Vue动态组件和keep-alive组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-05-05
详解vue-element Tree树形控件填坑路
这篇文章主要介绍了vue-element Tree树形控件填坑路，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
Vue中使用vue-i18插件实现多语言切换功能
在基于vue-cli项目开发过程中，多语言切换功能可使用vue-i18插件，这篇文章分步骤给大家介绍了Vue中使用vue-i18插件实现多语言切换功能，感兴趣的朋友一起看看吧
2018-04-04
vue3 HighCharts自定义封装之径向条形图的实战过程
highcharts是国外知名基于javascript的图表库,下面这篇文章主要给大家介绍了关于vue3 HighCharts自定义封装之径向条形图的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-09-09
vue.js diff算法原理详细解析
这篇文章主要介绍了vue.js diff算法原理详细解析，diff算法可以看作是一种对比算法，对比的对象是新旧虚拟Dom。顾名思义，diff算法可以找到新旧虚拟Dom之间的差异，但diff算法中其实并不是只有对比虚拟Dom，还有根据对比后的结果更新真实Dom
2022-06-06
常见的5种Vue组件通信方式总结
在 Vue.js 中,组件通信是开发过程中非常重要的一部分,它涉及到不同组件之间的数据传递和交互,本文将介绍如何实现父子组件之间的有效通信,并盘点了常见的5种Vue组件通信方式总结,需要的朋友可以参考下
2024-03-03
vue-cli配置环境变量的方法
本篇文章主要介绍了vue-cli配置环境变量的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07