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

游戏前端开发是
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

评论 抢沙发

评论前必须登录!