前端实例练习 - 加载旋转

加载旋转

代码储存在Github
效果预览

初衷:很多人在初学前端的时候都会问,“如何入门前端?”
同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的 “入门级” 的教材并不太满意。学习一门新知识,实例是尤其重要的。在这里本人整理了目前页面上常见功能实现的具体实例。愿能为大家提供一些帮助。
希望能够与大家互相分享,共同进步。

HTML 部分

<div class="loader"></div>

CSS 部分

.loader {
    border: 16px solid #f3f3f3;
    border-top: 16px solid #3498db;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    from {transform: rotate(0deg)}
    to {transform: rotate(360deg)}
}

好啦,现在所有的代码都写完啦!

赶快打开浏览器,看看效果吧!

在这里,只是给大家提供一种思路,参考。
具体的实现,每个人都可以有不同的方法。
请大家赶快发挥想象,把你最想实现的功能,在电脑敲出来吧!

参考自w3cschools

    原文作者:Garrik_刘翔
    原文地址: https://segmentfault.com/a/1190000008739109
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞