web前端——CSS实现加载页面效果

最新推荐文章于 2024-08-20 02:18:10 发布

云开、见月明

最新推荐文章于 2024-08-20 02:18:10 发布

阅读量2.1k

点赞数 6

分类专栏： web前端文章标签： css html

本文链接：https://blog.csdn.net/qq_44036990/article/details/107662371

版权

本文介绍了如何使用HTML和CSS创建一个加载页面效果。通过设置CSS基本样式、旋转框样式和添加旋转动画，最终实现了一个动态的加载效果。提供完整的HTML和CSS代码示例。

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

先上图 :彩虹滑稽:
css加载动画

html代码

<div class="container">
  <div class="trans">
  	<span>加载中...</span>
  </div>
</div>

其中container是背景，trans是加载是旋转的正方形

CSS基本样式

* {
   
    margin: 0;
    padding: 0;
}

html, body {
   
    width: 100%;
    height: 100vh;
}

.container {
   
    position: relative;
    width: 100%;
    height: 100vh;
    /* 设置弹性盒模型 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #37474F;
}

.trans {
   
    position: absolute;
    width: 120px;
    height: 120px;
    /* 设置弹性盒模型 */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #37474F;
}

span {
   
    position: absolute;
    color: #fff;
    z-index: 1;
}