实现切换效果的样式
2016-07-08 17:36
615 查看
<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; }
相关文章推荐
- div+CSS
- CSS--position属性
- CSS3属性之多栏布局column
- MVC @Html.TextBox 添加属性和样式
- 【转】手机web——自适应网页设计(html/css控制)
- css3-立方体3d旋转动画
- css3 Animation ,transform,keyframess属性以及实例
- CSS各个浏览器Hack的写法
- CSS的布局模型
- CSS3实践之路(六):CSS3的过渡效果(transition)与动画(animation)
- css3中transition属性详解
- css实现内部滚动
- 深入理解CSS3 Animation 帧动画
- CSS---Tips2背景
- css中visibility与display的区别
- CSS Secret——Transitions & Animations
- 在CSS中,html中的标签元素三种不同的类型
- CSS基本知识汇总
- Emmet:HTML/CSS代码快速编写神器
- CSS弹性盒模型 box-flex