CSS样式-基本图形篇 + 步骤条实现

自定义组件篇 — 步骤条样式的实现

该方法使用的是微信小程序，并且数据是动态改变的

垂直布局：

• 难点:icon 的中间线和层级问题：使用伪类和绝对定位

1. 先完成基础布局
2. 看 icon 所在位置，给 icon 的外层加一个容器，这个容器主要是用来定位的
3. 给 icon 添加样式，固定宽高然后 overflow 设置为可见，并添加伪类，display 设置为 inline-block，给个宽高
4. 然后此时页面中可以看到该条线条，调整居中
5. 最后通过动态判断列表是不是最后一个元素来决定显示那一条 icon 或者通过:not(:last-child)::after 来设置中间线

• 示例：

  方案一：
  /*wxml*/
    <view class="plan-box-step" wx:for="{{servicePlanList}}" wx:key="index">
      <slot name="left"/>
      <view class="plan-box-step-icon">
        <image wx:if="{{!item.isLast}}" class="plan-box-step-image" src="{{item.icon}}" mode="aspectFit" />
        <image wx:else style="width: 40rpx; height: 40rpx;" src="{{item.icon}}" mode="aspectFit" />
      </view>
      <slot name="right"/>
    </view>
  /*wxss*/
  .plan-box-step {
    padding-right: 40rpx;
    display: flex;
    height: 120rpx;
    align-items: center;
  }
  .plan-box-step-icon {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
  }
  .plan-box-step-image {
    height: 40rpx;
    width: 40rpx;
    overflow: visible !important;
  }
  .plan-box-step-image::after {
    content: '';
    display: inline-block;
    width: 4rpx;
    height: 80rpx;
    background-color: #F5F5F5;
    position: absolute;
    left: 50%;
    transform: translateY(0%);
  }
  方案二：
  /*wxml*/
  <view wx:if="{{horizon}}" class="step-1" wx:for="{{list}}" wx:key="index">
    <view class="icon">
      <slot name="left"/>
      <image class="image" src="{{item.icon}}" mode="aspectFit" />
      <slot name="right"/>
    </view>
  </view>
  /*scss*/
  // 缺点：需要手动调整中间线与y轴的距离
    .step-1 {
      display: flex;
      height: 120rpx;
      align-items: center;
      .icon {
        display: flex;
        align-items: center;
        height: 100%;
        .image {
          height: 40rpx;
          width: 40rpx;
          margin:0 10rpx;
        }
      }
    }
    .step-1:not(:last-child)::after {
      content: '';
      width: 2rpx;
      background-color: rebeccapurple;
      height: 80rpx;
      transform: translate(-30rpx,60rpx); // 调整与X轴的距离
    }

横向布局

• 难点：元素的伪类层级太高会遮住子元素

1. 将文本和 icon 或中间的原点放在一个容器中，然后对这个公共的容器进行操作
2. 通过:first-child 和:last-child 对容器前后的元素进行对其操作
3. 设置公共容器的 position:relative;
4. 给 icon 添加一个::after 伪类，绝对定位，宽度 100%

/*wxml*/
<view class="step-2" wx:else>
  <block wx:for="{{list}}" wx:key="index">
    <view class="box">
      <slot name="top"/>
      <image class="dot" src="{{item.icon}}"/>
      <slot name="bottom" />
    </view>
  </block>
</view>
/*scss*/
.step-2 {
  display: flex;
  transform-style: preserve-3d;  // 使伪元素的层级在子元素下方的关键点一
  .box {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
    .dot {
      width: 40rpx;
      height: 40rpx;
      border-radius: 40rpx;
      background-color: rgb(207, 12, 12);
    }
  }
  .box:not(:last-child)::after { // 伪元素选择器：选择给除最后一个元素添加:after伪类
    content: '';
    border: 2rpx dotted rgb(43, 158, 8);
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateZ(-1px);  //  使伪元素的层级在子元素下方的关键点二
  }
}

checkbox 样式修改问题

微信小程序 checkbox 组件的样式

/*checkbox 选项框大小  */
checkbox .wx-checkbox-input {
  width: 0rpx;
  height: 0rpx;
  background:transparent;
  border:none;
}
/*checkbox选中后样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  background:transparent;
  border:none;
}
/*checkbox选中后图标样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  width: 0rpx;
  height: 0rpx;
  font-size: 0rpx;
  color: transparent;
  background: transparen
}

动画篇–字体图标

1. 首先在需要添加动画的地方添加一下属性

   • animation-duration // 动画持续时间
   • animation-name // 动画名称
   • animation-iteration-count // 动画次数

2. 使用@keyframes 添加动画效果

3. 字体图标如果想要缩放的话可以使用 transform: scale()来缩放大小

4. 字体图标无法使用弹性布局的居中问题–关键在于 diaply:inline-block;

• 可以考虑把 display 改为 block

图形篇–四分之一圆

1. 需要给定宽高
2. 使用 border-top-left-radius：250rpx;的方式来实现四分之一圆，可调整弧线位置
3. 位置可以通过定位实现

图形篇–箭头

以 React+微信小程序的案例为模板

1. 准备一个空的容器
2. 给这个容器一个宽高(一个线条)
3. 然后给这个容器添加伪元素::before
4. 伪元素中宽高为 0，border 可以按照线条给出合适的宽高，然后整体设置透明
5. 想要哪个方向的箭头就给哪个方向的 border 添加宽高和颜色即可
6. 示例：

/*wxml*/
<View className='arrow'/>
/*scss*/
.arrow {
  position: relative;
  width: 50rpx;
  height: 3rpx;
  background-color: black;
}

.arrow::before {
  content:'';
  width: 0;
  height: 0;
  position: absolute;
  left: 40rpx;
  top:-10rpx;
  border: 10rpx solid transparent;
  border-left: 10rpx solid black;
}

图形篇 — 等腰三角形

• 宽高为 0
• 正方形的哪条线占满，border 的哪边就填充颜色，并且它对应的左右两边设置透明
• 切忌一共只需要设置三边
• 如：正方形左边占满，则上下两边要设置透明，左边要有颜色，border 的长度保持一样，实体

图形篇 — 直角三角形

• 宽高为 0
• 观察想要的直角三角形在正方形的位置，垂直方向填充颜色，水平方向，相反位置设置透明
• 切忌一共只需要设置两边
• 如：直角三角形位于正方形的左下，则下边填充颜色，右边透明，border 长度一样，实体

图形篇 — 梯形

• 高为 0，宽固定
• border 的底边与宽度一样，填充颜色，左右长度为宽的一半，设置透明

图形篇 — 平行四边形

• 矩形 + 倾斜
• transform:skew(20deg)倾斜

图形篇 — 六角形

• 两个三角形叠加
• 用伪元素 + 定位实现

图形篇 — 五角星

• 三个一样大小的三角型旋转可得或者三个不一样的三角形叠加
• 用伪元素 + 定位实现 + transform:rotate()

图形篇 — 爱心

• 一个三角形+ 两个圆
• 用伪元素 + 定位实现