用纯css的content及字符\A布局加载动画

所属分类:加载类

 3408次|    6次   点击收藏(0)

用纯css的content及字符\A布局加载动画
这个案例思路很好,运用了css的content知识点,进行换行,然后用css动画
translateY(-2em)

进行上下移动!


例如我们写个加载的动画!



HTML代码如下:

加载中<dot>...</dot>

CSS代码如下:

dot {
    display: inline-block; 
    height: 1em; line-height: 1;
    text-align: left;
    vertical-align: -.25em;
    overflow: hidden;
}
dot::before {
    display: block;
    content: '...\A..\A.';
    white-space: pre-wrap; /* 也可以是white-space: pre */ animation: dot 3s infinite step-start both;
}
@keyframes dot {
    33% { transform: translateY(-2em); }
    66% { transform: translateY(-1em); }
}


实现动画如下:





关于前端资源库

前端资源库是haorooms博主平时积累的前端资源,大部分来源于互联网。但经过博主调试和加工,集聚了博主的心血。

因此,资源库所有资源,仅供学习和参考,切勿下载下来用于商业用途或者转卖。转载请注明来自haorooms博客资源库!

联系方式
关键词搜索