css 边框重合加边框双向展开实现
CSS 实现 双向 展开 边框
2023-06-13 09:12:33 时间
结构如下
<view class="car-tab d-flex j-sb a-center position-relative">
<view class="car-tab-itm position-relative {{index == bottomBar ? 'active' : ''}}" bindtap="changeBottomBar"
wx:for="{{types}}" data-index="{{index}}">
<text class="font-md text-light-dark-more">{{item.title}}</text>
</view>
</view>
样式
.car-tab {
box-sizing: border-box;
width: 692rpx;
height: 54rpx;
border-bottom: 2rpx solid #eee;
margin: 0 auto;
}
.car-tab-itm {
box-sizing: border-box;
width: 100%;
text-align: center;
height: 54rpx;
padding-bottom: 6rpx;
}
.car-tab-itm.active {
border-bottom:4rpx solid #ff7a1c;
}
以这种思路去实现的,与设计图差距很大
设计图的效果是边框圆角 且 高亮边框有种相对于长边框的垂直居中效果
如果要实现这种效果,高亮边框就不能使用border
属性来实现了。 这里我的思路是将高亮边框用div实现代码如下
结构
<view class="car-tab d-flex j-sb a-center position-relative">
<view class="car-tab-itm position-relative {{index == bottomBar ? 'active' : ''}}" bindtap="changeBottomBar"
wx:for="{{types}}" data-index="{{index}}">
<text class="font-md text-light-dark-more">{{item.title}}</text>
<view class="car-tab-itm-border" wx:if="{{index == bottomBar}}">
</view>
</view>
</view>
样式
.car-tab {
box-sizing: border-box;
width: 692rpx;
height: 54rpx;
border-bottom: 2rpx solid #eee;
margin: 0 auto;
}
.car-tab-itm {
box-sizing: border-box;
width: 100%;
text-align: center;
height: 54rpx;
padding-bottom: 6rpx;
}
.car-tab-itm-border {
position: absolute;
bottom: -2rpx;
left: 0;
display: inline-block;
width: inherit;
height: 4rpx;
background: #ff7a1c;
border-radius: 2rpx;
}
ui的基本效果已经实现 接下来我们给元素加点效果,现在切换太生硬了。。。 添加宽度双向变化效果
结构
<view class="car-tab d-flex j-sb a-center position-relative">
<view class="car-tab-itm position-relative {{index == bottomBar ? 'active' : ''}}" bindtap="changeBottomBar"
wx:for="{{types}}" data-index="{{index}}">
<text class="font-md text-light-dark-more">{{item.title}}</text>
<view class="car-tab-itm-border" wx:if="{{index == bottomBar}}">
<view class="real-border"></view>
</view>
</view>
</view>
样式
.car-tab {
box-sizing: border-box;
width: 692rpx;
height: 54rpx;
border-bottom: 2rpx solid #eee;
margin: 0 auto;
}
.car-tab-itm {
box-sizing: border-box;
width: 100%;
text-align: center;
height: 54rpx;
padding-bottom: 6rpx;
}
.car-tab-itm-border {
position: absolute;
bottom: -2rpx;
left: 0;
display: inline-block;
width: inherit;
height: 4rpx;
/* background: #ff7a1c; */
/* border-radius: 2rpx; */
text-align: center;
}
.real-border {
display: inline-block;
width: inherit;
height: 4rpx;
background: #ff7a1c;
border-radius: 2rpx;
margin-bottom:30rpx;
animation: widthSlide .3s linear;
}
@keyframes widthSlide {
from {
width: 0;
}
to {
width: inherit;
}
}
实现效果
机子上跑很流畅,gif录制的很卡。。。。
相关文章
- CSS设置背景颜色透明
- html下划线 下移,css如何实现下划线滑动效果
- CSS继承特性之行高继承
- CSS魔法|MagicDesign - CSS实现3D拐角轮播图
- 【CSS动效实战(纯CSS与JS动效)】03 精美手风琴侧边栏完整示例教程 示例1
- 使用CSS变量实现主题定制真的很简单
- 利用CSS,如何把宝姐居中显示?
- html中相对定位怎么写,css相对定位
- CSS 优化、提高性能的方法有哪些
- 实现CSS动画(animation)的无限播放和暂停
- CSS 实现水平和垂直居中的三种方法
- css定义浏览器滚动条样式-实现客服访客聊天界面滚动样式【唯一客服】
- 前端必备的 CSS 库,normalize.css
- css样式小记详解编程语言
- css实现div悬浮层,始终停留在浏览器的最下方,不随页面的滚动条滚动改变位置或消失详解编程语言
- CSS 选择器
- CSS连接MySQL构建可视化Web应用(css连接mysql)
- CSS中box(盒模式)的分析
- 单纯使用CSS实现动态提示信息
- Lesson03_01什么是CSS和CSS的设置方式
- CSS教程之css选择器、属性、值
- js和css写一个可以自动隐藏的悬浮框
- javascript实现动态加载CSS