動畫實(shí)例

HTML

<div>正在加載中<span>...</span></div>

CSS

span {display: inline-block;height: 1em;line-height: 1;text-align: left;vertical-align: -0.25em;/* 屬性設(shè)置元素的垂直對齊方式。指定為負(fù)長度，可以使元素降低 */overflow: hidden;}span::before{display: block;content: '...\A..\A.';white-space: pre-wrap;/* 保留空白符序列 */animation: span 3s infinite step-start both;}@keyframes span{33%{ transform: translateY(-2em); }66%{ transform: translateY(-1em); }}

總結(jié)

以上是生活随笔為你收集整理的学习《css世界》笔记之loading三点动画效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。