酷炫的loading

时间:2022-09-21 11:24:10

今天分享一下,怎么通过用css写出一个酷炫的loading。

meta:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

html:

    <div class="fontSty" id="fontSty0" onclick="clickFunc(1)">你好吖</div>
<div class="loader">
<div class="face">
<div class="circle"></div>
</div>
<div class="face">
<div class="circle"></div>
</div>
</div>

css:

     html,
body,
.loader {
height: %;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
} .loader {
width: 200px;
height: 200px;
position: relative;
} .loader .face {
position: absolute;
border: 2px solid transparent;
border-radius: %;
border-top-color: var(--color);
border-left-color: var(--color);
animation: animate 3s linear infinite;
} .loader .face:nth-child() {
width: %;
height: %;
--color: gold;
--deg: 0deg;
} .loader .face:nth-child() {
width: %;
height: %;
--color: lime;
--deg: 180deg;
animation-direction: reverse;
} .loader .face .circle {
position: absolute;
width: %;
height: 1px;
top: %;
left: %;
background-color: transparent;
transform: rotate(calc(var(--deg) - 45deg));
transform-origin: left;
} .loader .face .circle::before {
position: absolute;
top: -5px;
right: -5px;
content: '';
width: 10px;
height: 10px;
background-color: var(--color);
border-radius: %;
box-shadow: 20px var(--color),
40px var(--color),
60px var(--color),
80px var(--color),
100px var(--color),
5px rgba(, , , 0.1);
}
.fontSty{
position: absolute;
color: #ffffff;
z-index: ;
}
@keyframes animate {
from {
transform: rotate(0deg);
} to {
transform: rotate(360deg);
}
}

酷炫的loading的更多相关文章

  1. 【老孟Flutter】41个酷炫的 Loading 组件库

    老孟导读:目前 loading 库中包含41个动画组件,还会继续添加,同时也欢迎大家提交自己的 loading 动画组件或者直接微信发给我也可以. Github 地址:https://github.c ...

  2. 开源分享三(炫酷的Android Loading动画)

    开源分享三(炫酷的Android Loading动画) 分享GitHub上的一些Loading,为了提升产品用户体验,一个好的Loading必然是不可缺少的,对于一些耗时需要用户等待的页面来说会转移用 ...

  3. HTML5 Canvas玩转酷炫大波浪进度图

    如上图所见,本文就是要实现上面那种效果. 由于最近AlloyTouch要写一个下拉刷新的酷炫loading效果.所以首选大波浪进度图. 首先要封装一下大波浪图片进度组件.基本的原理是利用Canvas绘 ...

  4. &lbrack;Asp&period;net 开发系列之SignalR篇&rsqb;专题二:使用SignalR实现酷炫端对端聊天功能

    一.引言 在前一篇文章已经详细介绍了SignalR了,并且简单介绍它在Asp.net MVC 和WPF中的应用.在上篇博文介绍的都是群发消息的实现,然而,对于SignalR是为了实时聊天而生的,自然少 ...

  5. 赞!15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  6. Android酷炫加载进度动画

    概述 本自定义动画进度酷炫View,是加载进度动画的自定义View,继承于ImageView来实现,主要实现蒙层加载进度的加载进度效果. 支持水平左右加载和垂直上下加载四个方向,同时也支持自定义蒙层进 ...

  7. Android常用酷炫控件&lpar;开源项目&rpar;github地址汇总

    转载一个很牛逼的控件收集帖... 第一部分 个性化控件(View) 主要介绍那些不错个性化的 View,包括 ListView.ActionBar.Menu.ViewPager.Gallery.Gri ...

  8. 开源造*:一个简洁,高效,轻量级,酷炫的不要不要的canvas粒子运动插件库

    一:开篇 哈哈哈,感谢标题党的莅临~ 虽然标题有点夸张的感觉,但实际上,插件库确实是简洁,高效,轻量级,酷炫酷炫的咯.废话不多说,先来看个标配例子吧: (codepen在线演示编辑:http://co ...

  9. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

随机推荐

  1. 三联运算&amp&semi;&amp&semi;字节码转换

    三联运算 if 1 == 1: name = 'alex'else: name = 'sb' name = 'alex' if 1 == 1 else 'sb lambda f2 = lambda a ...

  2. BroadcastReceiver应用1

    有两种注册方式:1. 在AndroidManifest中注册.2. 在代码中直接注册,这种注册需要注意的一点是:当注册此Receiver的Activity退出的时候,一定要调用unregisterRe ...

  3. jqure全选&sol;取消

    平时我们会遇到全选/全取消, 前台效果: <div class="fix pb40 mt32 ml30 lh22"> <div class="l mr2 ...

  4. chown

    chown 命令 用途:更改与文件关联的所有者或组 chown [ -f ] [ -h ] [ -R ] Owner [ :Group ] { File ... | Directory ... } c ...

  5. Java I&sol;O学习(一)

    写作目的 自学Java,Java中流的概念比较复杂,故专门作一整理.期望开始学习的童鞋,看完本文后对Java流有一个大致的认识.主要分三个小篇: 一.概述.输入/输出字节流 二.输入/输出字符流.装饰 ...

  6. django 如何接收bootstrap-table传送的 ajax数组

    今天在用django传递id的时候,使用 alert(ids)以及console.log("id:",ids),都可以看到是把选中的数据的id打印出来的,用console.log可 ...

  7. salesforce零基础学习(九十三)Email To Case的简单实现

    Salesforce提供了标准的功能来实现通过Email 创建 Case.我们可以设置指定的路由的地址,指定条件的邮件会自动生成到目标salesforce系统的Case数据.Salesforce提供了 ...

  8. invalid active developer path &lpar;&sol;Library&sol;Developer&sol;CommandLineTools&rpar;&comma; missing xcrun at&colon; &sol;Library&sol;Developer&sol;CommandLineTools&sol;usr&sol;bin&sol;xcrun

    Mac系统升级git会找不到并且报错:xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools) ...

  9. CentOS最小化安装&lpar;一&rpar;

    一.配置网络 切记记得配置DNS,否则Ping不通 在目录中进行网络配置文件的查找:  /etc/sysconfig/network-scripts/ 1   1 /etc/sysconfig/net ...

  10. window环境下使用sbt编译spark源码

    前些天用maven编译打包spark,搞得焦头烂额的,各种错误,层出不穷,想想也是醉了,于是乎,换种方式,使用sbt编译,看看人品如何! 首先,从官网spark官网下载spark源码包,解压出来.我这 ...