<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>H5 文字loading动画</title> <style type="text/css"> button{ line-height: 30px; background: blue; color: #fff; border: 0; } dot{ font-family: Consolas, Monaco, monospace; height: 1em; display: inline-block; overflow: hidden; line-height: 1; text-align: left; vertical-align: -.25em; } dot::before{ content: '...\A..\A.\A'; display: block; white-space: pre; animation: loading 3s infinite step-start both; } @keyframes loading{ 33%{ transform: translateY(-2em); } 66%{ transform: translateY(-1em); } } </style> </head> <body> <button type="button">正在加载中<dot></dot></button> </body> </html>
效果图:
相关推荐
H5多种加载效果loading,H5页面加载中动画,炫酷的加载中动画
用法非常简单,基于原生 JS CSS 开箱即用 在head中引入css,在body第一行引入js 即可失效酷炫的页面加载特效 详细介绍参考 https://zzzmh.cn/single?id=53
H5非常炫酷的加载特效loading,简单实用
代码片段: <body>[removed][removed] <div class="loading"> <div></div> <div></div> <div></div> <div></div> </div>
h5页面js加载特效适用IOS,Android,等各种移动浏览器
移动端loading,直接使用gif图,部分低端机型会出现卡顿,采用Css3动画实现,可以避免这个问题
使用 纯h5 实现视频动画效果的代码 示例,减少浏览器的资源加载,适用于短片段的制作
纯CSS3花瓣样式的Loading加载动画DEMO演示
HTML5 动画 过场插件
一款HTML5 Canvas制作的逼真烟雾消散文字动画特效,除了文字烟雾动画,还有背景烟雾翻滚动画效果。
多种风格CSS3网站Loading加载动画特效,H5动画效果,炫酷加载动画
H5动画 实验代码
H5酷炫3D开场动画(酷炫又不会占太大内存)H5酷炫3D开场动画(酷炫又不会占太大内存)
html代码 <h1 class="mimic"> mimic.css 选择下面列表功能测试 <form> <option value="boomerang">boomerang <option value="swivelChair">swivel chair ... </div>
swiper实现h5移动端动画效果,上下滑动页面载入页面动画,快速实现类似易企秀动画效果前端H5动画页面效果。
H5动画 物理引擎
H5交互动画,做咖啡过程交互 开始做咖啡——》添加咖啡——》到牛奶——》雕花