css3 scale怎么用

html-css011

css3 scale怎么用,第1张

1、scale(x,y) 对元素进行缩放

X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数

Y是一个可选参数，没有设置的话，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。

2、scaleX(<number>) 元素只在X轴（水平方向）缩放元素。

默认值是1，基点一样在元素的中心位置。可以通过transform-origin来改变基点

3、scaleY(<number>) 元素只在Y轴（垂直方向）缩放元素。

基点一样在元素的中心位置。可以通过transform-origin来改变基点。

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>

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