web前端入门到实战：纯CSS实现加载转圈样式

魔方编程

于 2019-09-23 21:59:50 发布

阅读量1.1k

点赞数

文章标签： css 前端 web前端前端开发前端教程

本文链接：https://blog.csdn.net/wewfdf/article/details/101227985

版权

本文介绍了如何使用CSS来创建一个等待加载时的转圈样式，避免使用可能破坏页面美感的gif图片或图标。通过实例展示了纯CSS实现的加载转圈效果，适合前端初学者实践。

摘要由CSDN通过智能技术生成

不同的项目中对于等待加载时转圈圈的样式是不同的，有的是传统的转圈的gif图片，见得比较多的是将转圈圈的换成了可爱的图标。有时候项目中加入等待加载的图片会很违和，不符合美观，所以需要用CSS做一个。下面是一个纯CSS实现转圈样式的例子。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .load-container {
        background-color: #F1F1EA;
        width: auto;
        height: 700px;
        position: relative;
        overflow: hidden;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .loader {
        font-size: 10px;
        margin: 100px auto;
        margin-top: 300px;
        width: 1