很常见的一直旋转的loading效果
2024-10-10 07:11:03
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Loading小动画</title>
<meta name="author" content="http://www.cnblogs.com/leafsummer?qq=11580563">
<style>
.wx_loading_icon{
position: absolute;
width: 24px;
height: 24px;
border: 2px solid #237FE5;
border-radius: 24px;
-webkit-animation:gif 1s linear infinite;
animation: gif 1s linear infinite;
clip: rect(0 0 12px 0);
}
/*Chorme,Safari必须加上*/
@-webkit-keyframes gif{
to{-webkit-transform: rotate(0deg);}
from{-webkit-transform: rotate(360deg);}
}
@keyframes gif{
0%{transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}
</style>
</head>
<body>
<div class="wx_loading_icon"></div>
<script>
</script>
</body>
</html>
DEMO代码
最新文章
- @autowired和@resource的区别
- 微信小程序开发初体验
- 前端构建工具gulp介绍
- NGUIJoysticK
- C# 替换文本文件中的某一行
- HDU 1142 A Walk Through the Forest (求最短路条数)
- Java的RandomAccessFile
- 理解Java(StringBuffer和StringBuilder)
- QML开源游戏
- 2 MySQL安装
- Excel 按模板格式导出
- JavaScript基础学习(五)&mdash;其他引用类型
- Algorithm -->; 最长回文子串
- Hibernate之深入Hibernate的配置文件
- 你不知道的JavaScript--Item26 异步的脚本加载
- 容器中的诊断与分析4——live diagnosis——LTTng
- MySql数据库连接池专题
- [转帖]SPU、SKU、ID,它们都是什么意思,三者又有什么区别和联系呢?
- 图片识别文字, OCR
- Android通过adb命令Debug调试