卡卡网

今天在某网站上逛时被它的循环缩小放大的图标吸引住了，于是把它的CSS样式扒了下来。

先看效果图：

demo

把它的CSS样式代码扒下来之后，发现其实也挺简单的，只有两三行代码。

div的html代码：

<div class='div1'>
    <span class="span1">立即抢购</span>
</div>

div的css代码：

.div1{
  margin-left:100px;
  margin-top:100px; 
  width:200px;
  height:50px;
  border-radius: 9999px;
  color: #11084d;
  background: linear-gradient(90deg, #e7fc9a, #a7f39b);
  animation: _gze19f 1s ease-in-out infinite alternate; 
}

@keyframes _gze19f {
    to {
        transform: scale(1.08)
    }
}

文字用了span标签，其css代码为：

.span1 {
    font-size:18px;
    padding: inherit; 
    position: absolute;
    margin-left: 3.6rem; 
    margin-top: 0.8rem;
}

得到的效果就是这样了：

demodownload

代码解释：

div循环缩小放大的css主要是用了animation这个属性。

animation: _gze19f 1s ease-in-out infinite alternate; 

_gze19f 是运动方式的调用，它的定义如下：

@keyframes _gze19f {
    to {
        transform: scale(1.08)
    }
}

transform: scale(1.08) 表示放大1.08倍。

总结

本文介绍了div的循环缩小放大效果，主要是用了 animation 的css属性，并不复杂。

相关文章

• 一图理解animation属性ease-in-out等

标签: div  ease-in-out