2017/11/24

一个简单的CSS3特效

下面为大家介绍一个实用的点跳动特效

代码实现：

<style>

dot {

    display: inline-block; 

    height: 1em; line-height: 1;

    text-align: left;

    vertical-align: -.25em;

    overflow: hidden;

    font-family: "微软雅黑";

}

dot::before {

    display: block;

    content: '...\A..\A.';

    white-space: pre-wrap;

    animation: dot 3s infinite step-start both;

}

@keyframes dot {

    33% { transform: translateY(-2em); }

    66% { transform: translateY(-1em); }

}

</style>


<h1 style="font: 10rem/1.2 '楷体'; color: #e9ec09;">

<dot>...</dot>

</h1>