纯css打造的加载效果，不一样的网页Loading效果----Epic Spinners

冯浩(grow up)

已于 2022-07-21 22:46:54 修改

阅读量739

点赞数

分类专栏： vue组件文章标签： css javascript 前端 vue.js

于 2022-07-21 22:44:40 首次发布

本文链接：https://blog.csdn.net/m0_50207524/article/details/125922435

版权

vue组件专栏收录该内容

20 篇文章 2 订阅

订阅专栏

css打造不一样的加载效果

前言
效果图
1、vue中使用
2、 js文件中使用
- 效果图
3、使用官方文档

前言

Epic Spinners官方文档
EpicSpinners是一组易于使用的纯css打造的网页Loading效果，并且同时整合了Vue组件可以方便的在Vue项目中进行使用，由于是纯css打造，你可以在任意网页项目中自行整合并使用！是一个非常不错的选择

效果图

在这里插入图片描述

1、vue中使用

安装

npm install --save epic-spinners

.vue文件

<template>
  <div id="app">
    <atom-spinner :animation-duration="1000" :color="'#ff1d5e'" :size="60" />
    <flower-spinner :animation-duration="2500" color="#ff1d5e" :size="70" />
  </div>
</template>
<script>
	/**创建不同的效果引用不同的类**/
  import { AtomSpinner, FlowerSpinner } from 'epic-spinners'
  export default {
    components: {
      AtomSpinner,
      FlowerSpinner,
    },
  }
</script>

效果图

在这里插入图片描述

2、 js文件中使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css实现加载效果</title>
  </head>
  <body>
    <div class="pixel-spinner">
      <div class="pixel-spinner-inner"></div>
    </div>
  </body>
  <style>
    .pixel-spinner,
    .pixel-spinner * {
      box-sizing: border-box;
    }

    .pixel-spinner {
      height: 70px;
      width: 70px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }

    .pixel-spinner .pixel-spinner-inner {
      width: calc(70px / 7);
      height: calc(70px / 7);
      background-color: #ff1d5e;
      color: #ff1d5e;
      box-shadow: 15px 15px 0 0, -15px -15px 0 0, 15px -15px 0 0, -15px 15px 0 0, 0 15px 0 0, 15px 0 0 0, -15px 0 0 0, 0 -15px 0 0;
      animation: pixel-spinner-animation 2000ms linear infinite;
    }

    @keyframes pixel-spinner-animation {
      50% {
        box-shadow: 20px 20px 0px 0px, -20px -20px 0px 0px, 20px -20px 0px 0px, -20px 20px 0px 0px, 0px 10px 0px 0px, 10px 0px 0px 0px, -10px 0px 0px 0px, 0px -10px 0px 0px;
      }
      75% {
        box-shadow: 20px 20px 0px 0px, -20px -20px 0px 0px, 20px -20px 0px 0px, -20px 20px 0px 0px, 0px 10px 0px 0px, 10px 0px 0px 0px, -10px 0px 0px 0px, 0px -10px 0px 0px;
      }
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</html>