利用CSS content内容生成技术以及CSS3 animation实现的字符打点动画
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); } }
Html代码如下:
订单提交中...
效果如下:
上一篇:css3制作的按钮效果
下一篇:css编写下拉二级菜单
© hanhaisha.com. All Rights Reserved 湘ICP备15009704号-1
梦里不知岁月匆、梦醒不知韶华过