游戏前端开发是 |
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
评论前必须登录!
注册