找回密码
当前位置：前端开发者 > CSS > 正文

前端开发CSS3巧用border做加载效果

2019-01-06 20:55:00 分类：CSS 阅读(926) 评论(0)
游戏前端开发是
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
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论