怎么CSS实现加载功能

这篇文章主要介绍“怎么CSS实现加载功能”，在日常操作中，相信很多人在怎么CSS实现加载功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么CSS实现加载功能”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

创新互联提供成都网站建设、网站制作、网页设计，成都品牌网站建设，一元广告等致力于企业网站建设与公司网站制作，10余年的网站开发和建站经验,助力企业信息化建设，成功案例突破近1000家,是您实现网站建设的好选择.

怎么CSS实现加载功能

为什么要做加载

只想说, 本文最重要的是对 CSS, 伪元素, keyframe的分享, 以及读者对这些东西的真正掌握, 我并不是怂恿大家在每一个页面的前面都去加一个酷炫的加载

我是如何做的

不同的页面, 对加载的设计也就可能不同. 本文设计的加载适合大多数页面.

并且, 本文假设读者已经非常熟悉伪元素, CSS 动画属性和keyframe, 如果读者想重温, 下面两篇文章可做参考

学会使用 CSS 中的 :after 和 :before
keyframe 动画直通车

开始入门

在开始一起构建它前, 我们先看看它***的效果

怎么CSS实现加载功能

正如你所看到的, 我们将经历 4 个步骤

边框一个接一个地出现
红/橙/白色方块向里滑入
方块向外划出
边框消失

我们只需要 animation-direction: alternate 来完成步骤 1 和 2, 步骤 3 和步骤 4 我们可以使用 reverse, 另外, 我们可以使用 animation-iteration-count: infinite 重复动画

首先, 我们先书写好基本的 HTML 结构

                          /*         *  All the CSS for the loader         *  Minified and vendor prefixed         */

构建 logo 本身

怎么CSS实现加载功能

一开始我们先实现 logo 本身, 而不是最终版本的效果

父级元素 logo, 不同颜色的方块都是它的子元素

.logo { position: relative; width: 100px; height: 100px; border: 4px solid black; box-sizing: border-box; background-color: white; & > div { position: absolute; } .red { top: 0; bottom: 0; left: 0; width: 27%; border-right: 4px solid black; background-color: #EA5664; } /* Similar code for div.orange and div.white */ }

.logo { position: relative; width: 100px; height: 100px; box-sizing: border-box; background-color: white; &::before, &::after { content: ''; position: absolute; width: 100%; height: 100%; box-sizing: border-box; border: 4px solid transparent; } &::before { top: 0; left: 0; border-top-color: black; border-right-color: black; } &::after { bottom: 0; right: 0; border-bottom-color: red; // Red for demo purposes only border-left-color: red; } }

div.logo { &::before, &::after { /* ... */ animation-timing-function: linear; } &::before { /* ... */ animation: border-before 1.5s infinite; animation-direction: alternate; } } @keyframes border-before { 0% { width: 0; height: 0; border-right-color: transparent; } 24.99% { border-right-color: transparent; } 25% { height: 0; width: 100%; border-right-color: black; } 50%, 100% { width: 100%; height: 100%; } }

@keyframes red { 0%, 50% { width: 0; opacity: 0; } 50.01% { opacity: 1; } 65%, 100% { width: 27%; opacity: 1; } }

重庆分公司，新征程启航

怎么CSS实现加载功能

其他资讯