前端开发者| 游戏前端开发是 |
| web前端和游戏开发 |
| 游戏前端开发语言 |
该效果主要是用到了css3的动画animation以及transform中的角度变换rotate。
html的结构十分简单，用到一个div，也用到了css3中的属性 border-radius 。这边只测试了chrome的效果。
代码片段 1
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>Document</title>
<style>
@-webkit-keyframes load {
0% {
transform: rotate(0);
}
50% {
transform: rotate(160deg);
}
100% {
transform: rotate(360deg);
}
}
.loading {
width: 40px;
height: 40px;
border: 4px solid #aaa;
border-left-color: #ddd;
border-radius: 24px;
-webkit-animation: load 1s linear 1s infinite;
}
</style>
</head>
<body>
<div class=”loading”></div>
</body>
</html>
| 前端与游戏开发哪个好 |
| 游戏客户端开发前端 |
| 游戏开发的前端 |
» 本文来自：前端开发者 » 《前端开发CSS3巧用border做加载效果》
» 本文链接地址：https://www.rokub.com/7551.html
» 您也可以订阅本站：https://www.rokub.com
评论前必须登录！
注册