css3 loading特效

时间：2024-01-05 17:01:56浏览次数：32

标签：css3 特效 loading 0.2 1.8 0em rgba em 255

一个样式类，一个容器，无须额外元素：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Loading Animation</title>
  <style>
    #app {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #000;
    }

    .loader {
      font-size: 10px;
      width: 1em;
      height: 1em;
      border-radius: 50%;
      position: relative;
      text-indent: -9999em;
      animation: mulShdSpin 1.1s infinite ease;
      transform: translateZ(0);
    }
    @keyframes mulShdSpin {
      0%,
      100% {
        box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.5), -1.8em -1.8em 0 0em rgba(255,255,255, 0.7);
      }
      12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.5);
      }
      25% {
        box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.5), 1.8em -1.8em 0 0em rgba(255,255,255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
      }
      37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.5), 2.5em 0em 0 0em rgba(255,255,255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
      }
      50% {
        box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.5), 1.75em 1.75em 0 0em rgba(255,255,255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
      }
      62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.5), 0em 2.5em 0 0em rgba(255,255,255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
      }
      75% {
        box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.5), -1.8em 1.8em 0 0em rgba(255,255,255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
      }
      87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.5), -2.6em 0em 0 0em rgba(255,255,255, 0.7), -1.8em -1.8em 0 0em #ffffff;
      }
    }
  </style>
</head>
<body id="app">
    <div class="loader"></div> <!-- 在页面中添加一个元素作为加载动画 -->
</body>
</html>

效果：

标签：css3,特效,loading,0.2,1.8,0em,rgba,em,255
From： https://www.cnblogs.com/xtreme/p/17947635

CSS3入门
一．CSS3的概述 1.定义:层叠样式表;d2.意义:把内容与形式分开;html:内容;CSS:形式3.浏览器:chrome4.css样式规则e选择器(属性1:值，属性2:值;.......)选择器区分大小写，“5.css样式表的导入(1)行内式例:style="font-size:50px;font[amily:隶书;写在标记内;“ ......
软件构造实验二——图像增强与特效
项目结构具体代码BaseConvert.java--将base64编码解码成我们能看懂的东西（功能）packagecom.example.testDong;importjava.io.*;importjava.util.Base64;publicclassBaseConvert{/***图片转化成base64字符串*@paramimgPath*@return*......
css3
1、新增选择器是css技术的升级版本，在css2的基础上，新增了许多特性，弥补了css2的不足，使web页面的开发变得更加高效、便捷css3按模块化进行设计，比较重要的css3模块包含、选择器、框模型、背景和边框、文本效果、2D|3D转换、动画、多列布局、用户界面css3优点:CSS3是完全向后兼容，......
随机点名demo+文字特效
上代码：一、HTML部分<div><h2>随机点名</h2><spanid="name"></span></div><buttonid="button-text">点一下不要钱</button>二、CSS部分*{margin:0;padd......
vue中使用Vue.extend方法仿写一个loading加载中效果
需求描述本文我们使用vue的extend方法实现一个全屏loading加载效果，需求如下：通过命令就可以让弹框开启或关闭，比如this.$showDialog()开启，this.$hideDialog()关闭方法可以传参更改loading中的文字也可以传参更改loading背景色当然这里除了文字，背景色什么的，也可以传递更多的参......
Guava自加载缓存LoadingCache使用指南
第1章：引言大家好，我是小黑，今天我们来聊聊缓存。在Java世界里，高效的缓存机制对于提升应用性能、降低数据库负担至关重要。想象一下，如果每次数据请求都要跑到数据库里取，那服务器岂不是要累趴了？这时候，缓存就显得尤为重要了。那么，怎么实现一个既高效又好用的缓存呢？别急，咱们今天的主......
React 之使用 antd 实现全局 loading
使用antd的Spin实现Loading代码如下：fullLoading.tsximportReactDOMfrom"react-dom/client";import{Spin}from"antd";//全局加载loading//当前请求的个数//当同时有多个请求时，等所有请求完成后再关闭loadingletreqCount=0;//显示loadingfuncti......
纯css展示loading加载动画
https://uiverse.io/barisdogansutcu/light-rat-32<svgviewBox="25255050"><circler="20"cy="50"cx="50"></circle></svg>svg{width:3.25em;transform-origin:center;animation:rot......
《环太平洋》流浪者机甲3D模型特效还原
在线工具推荐：3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.jsAI自动纹理开发包 - YOLO虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎法线贴图在3D建模中扮演着重要的角色，它通过模拟表面的微小细节和凹凸不平的部分......
法线贴图实现衣服上皱褶特效
在线工具推荐：3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.jsAI自动纹理开发包 - YOLO虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎法线贴图在3D建模中扮演着重要的角色，它通过模拟表面的微小细节和凹凸不平的部分......

css3 loading特效

相关文章

赞助商

阅读排行