首页 > 学习笔记 > CSS > 正文

css跳动文字强调性文字抖动弹动

发布时间:2018-08-08 15:36:56 点击量:

<p class="shake">待认领</p>
<style>
@-webkit-keyframes shake {
    0%{
        -webkit-transform:translate(1px, 1px);
    }
    25%{
        -webkit-transform:translate(-0.5px, -0.5px);
    }
    50%{
        -webkit-transform:translate(0px, 0px);
    }
    75%{
        -webkit-transform:translate(1px, -0.5px);
    }
    100%{
        -webkit-transform:translate(-0.5px, 1px);
    }
}
@keyframes shake {
    0%{
        transform:translate(1px, 1px);
    }
    25%{
        transform:translate(-0.5px, -0.5px);
    }
    50%{
        transform:translate(0px, 0px);
    }
    75%{
        transform:translate(1px, -0.5px);
    }
    100%{
        transform:translate(-0.5px, 1px);
    }
}
.shake{
    position: relative;
border:1px solid #f00;
border-radius:5px;
width:40px;
    color: #f00;
font-size:12px;
}
.shake{
    -webkit-animation:shake 0.5s infinite;
    animation:shake 0.5s infinite;
}
</style>

上一篇:解决苹果手机上input按钮button按钮颜色样式问题

下一篇:最新去除畅言评论广告,右下角弹窗广告横幅广告