CSS实现beautiful按钮效果教程

实现教程

第一种效果是弹跳效果，所谓弹跳效果就是按钮在大小之间变换，其思想如下：

1. 创建一个静态的按钮；
2. 然后利用animation属性，创建动画，当变换到50%时，按钮变换到1.2倍，到动画100%时按钮又恢复原样。

<div class="button1">
    <span>立即下载</span>
</div>

 

.button1 {
    width: 200px;
    height: 46px;
    line-height: 46px;
    background: #2e82ff;
    color: #ffffff;
    font-size: 18px;
    border-radius: 27px;
    animation: zoomIn 1.5s infinite;
    text-align: center;
}
@keyframes zoomIn {
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}