按钮左右切换且颜色跟随动画_左右切换跟随动画-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_48478236/article/details/132567573

本文介绍了如何使用Vue.js结合CSS3动画，实现在点击事件下，按钮颜色动态切换并伴随3D旋转效果。代码展示了HTML结构、Vue实例配置和CSS样式关键部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
    <title>按钮左右切换且颜色跟随动画</title>
    <script src="./js/vue2.6.11.js?v=1.0"></script>
    <style>
        .ceshi1 {
            width: 200px;
            height: 50px;
            position: relative;
        }

        .ceshi2 {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            z-index: 2;
        }
        .ceshi2 p{
            width: 50%;
            height: 100%;
            color: #000;
        }

        .buy1 {
            position: absolute;
            top: 0;
            left: 0px;
            background: #00BAC7;
            height: 100%;
            border-radius: 4px;
            border-top-right-radius: 0px;
            width:100px;
            -webkit-transform: perspective(100px) rotateX(-15deg) translateZ(4px);
            -webkit-transform-origin: left center;
            -moz-transform: perspective(100px) rotateX(-15deg);
            -moz-transform: left center;
            transition: 0.5s all;
        }
        .buy2{
            position: absolute;
            top: 0;

            left:100px;
            background: #ED3267;
            height: 100%;
            border-radius: 4px;
            border-top-left-radius: 0px;
            width:100px;
            -webkit-transform: perspective(100px) rotateX(-15deg) translateZ(4px);
            -webkit-transform-origin: right center;
            -moz-transform: perspective(100px) rotateX(-15deg);

            -moz-transform: left center;
            transition: 0.5s all;
        }
    </style>
</head>

<body>
    <div class="ceshi1" id="app">
        <div class="ceshi2">
            <p @click="hahah(1)">我是谁1</p>
            <p @click="hahah(2)">我是谁2</p>
        </div>
        <div :class="chhtrue==1?'buy1':'buy2'">

        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                chhtrue: 1
            },
            created() {
                this.ceshi = '2'
                console.log("我是created")
            },
            mounted() {
                console.log("我是mounted")

            },
            methods:{
                hahah(e){
                    this.chhtrue = e;
                    console.log(e)
                }
            },
            filters: {
                guolv(item) {
                    console.log('我是filters')
                    return '3'
                }
            },
        })
    </script>
</body>

</html>

颜色动态切换跟随