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>

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

总结

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

您可能感兴趣的文章:

vue3结合hooks开发可以注册的二次确认弹框
这篇文章主要为大家介绍了vue3结合hooks开发可以注册的二次确认弹框，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
Vue.js系列之项目搭建(1)
今天要讲讲Vue2.0了。最近将公司App3.0用vue2.0构建了一个web版，因为是第一次使用vue，而且一开始使用的时候2.0出来一个月不到，很多坑都是自己去踩的，现在项目要上线了，所以记录一些过程
2017-01-01
vue获取验证码倒计时组件
这篇文章主要为大家详细介绍了vue获取验证码倒计时组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-08-08
vue遮罩层如何阻止滚动
这篇文章主要介绍了vue遮罩层如何阻止滚动，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
vue3中使用vuedraggable实现拖拽el-tree数据分组功能
这篇文章主要介绍了vue3中使用vuedraggable实现拖拽el-tree数据分组功能,可以实现单个拖拽、双击添加、按住ctrl键实现多个添加,或者按住shift键实现范围添加,添加到框中的数据,还能拖拽排序,需要的朋友可以参考下
2024-02-02
详解Vue生命周期和MVVM框架
MVVM是Model-View-ViewModel的缩写，MVVM是一种设计思想，这篇文章主要介绍了Vue生命周期和MVVM框架,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-07-07
vue-cli3.0 环境变量与模式配置方法
vue-cli3.0移除了配置文件目录： config和build文件夹。可以说是非常的精简了，那移除了配置文件目录后如何自定义配置环境变量和模式呢?这篇文章主要介绍了vue-cli3.0 环境变量与模式 ,需要的朋友可以参考下
2018-11-11
vue祖孙组件之间的数据传递案例
这篇文章主要介绍了vue祖孙组件之间的数据传递案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-12-12
浅析对Vue中keep-alive缓存组件的理解
<keep-alive> 是一个抽象组件,用于将其内部的组件保留在内存中,而不会重新渲染,这意味着当组件在<keep-alive> 内部切换时,其状态将被保留,而不是被销毁和重新创建,这篇文章主要介绍了Vue中的keep-alive缓存组件的理解,需要的朋友可以参考下
2024-01-01
前端不用跑项目vscode组件效果所见即所得
这篇文章主要为大家介绍了一款不用跑项目的vscode组件所见即所得效果的使用方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-04-04