实现切换效果的样式

最新推荐文章于 2021-11-15 16:45:29 发布

chyykk

最新推荐文章于 2021-11-15 16:45:29 发布

阅读量324

点赞数

分类专栏：小功能实现方式

本文链接：https://blog.csdn.net/baidu_34157788/article/details/51862817

版权

小功能实现方式专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这里写图片描述

<div class="card_mes">
                        <div class="clearfloat">
                            <p> 金币</p><p>油量</p>
                        </div>
                        <div class="drop">
                            <div class="current"></div>
                            <span id="money1" style="color:#e15517 ;font-size: 20px;font-weight: 900">0</span>
                            <span id="fuel1" style="color: #ff0000;font-size: 20px;font-weight: 900">0</span>
                        </div>
                    </div>

.card_mes{
    position: relative;
}
.card_mes p{
    width: 50%;
    float: left;
    font-size: 24px;
    line-height: 1.5;
    cursor: pointer;
    margin-bottom: 0%;
}
.current{
    width: 0;
    height: 0;
    border: 5px solid #ffffff;
    border-top-color:transparent ;
    border-left-color:transparent ;
    border-right-color:transparent ;
    transform: translate(50px,-10px);
}
.card_mes p:first-child{
    background: #78BA00;
}
.sel_metion{
    background: #DDDDDD;
    width: 95%;
    line-height: 1.5;
    padding: 10px 0;
    margin: 10px auto;
}
.card_mes p:nth-child(2){
    background: #FF8000;
}
.card_mes .drop{
    color:#e15517 ;
    font-size: 20px;font-weight: 900;
    height: 60px;
    background: #ffffff;
}