css里面使用scale时出现的小问题,请问如何解决?

html-css010

css里面使用scale时出现的小问题,请问如何解决?,第1张

一、scale()方法

缩放,指的是“缩小”和“放大”。在CSS3中,我们可以使用scale()方法来将元素根据中心原点进行缩放。

跟translate()方法一样,缩放scale()方法也有3种情况:

(1)scaleX(x):元素仅水平方向缩放(X轴缩放);

(2)scaleY(y):元素仅垂直方向缩放(Y轴缩放);

(3)scale(x,y):元素水平方向和垂直方向同时缩放(X轴和Y轴同时缩放);

scale有2个参数。

css样式:

.dot_ac {

  animation: scale2 1.5s forwards

}

@keyframes scale2 {

  0% {

    background-color: #E5E5E5

    transform: scale(1)

    opacity: 0.9

  }

  100% {

    background-color: #E8B960

    transform: scale(1.5)

    opacity: 1

  }

}

.dot {

  display: inline-block

  width: 0.32rem

  height: 0.32rem

  background: #E5E5E5

  border-radius: 50%

  line-height: 0.8rem

  position: absolute

  left: 0.10666667rem

  top: 50%

  margin-top: -0.16rem

}

html:

<ul>

    <li class="active">

    <div class="ces_inner">

   <div class="dot"></div>

   <span class="font-bold">基本信息</span>

    </div>

    </li>

    <li>

    <div class="ces_inner">

   <div class="dot"></div>

   <span class="font-bold">商业模式评估</span>

    </div>

    </li>

    <li>

    <div class="ces_inner">

   <div class="dot"></div>

   <span class="font-bold">营销品牌评估</span>

    </div>

    </li>

    </ul>

 实现圆点由小变大,颜色变化功能