今天分享一下,怎么通过用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. [Asp.net 开发系列之SignalR篇]专题二:使用SignalR实现酷炫端对端聊天功能

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

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

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

  6. Android酷炫加载进度动画

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

  7. Android常用酷炫控件(开源项目)github地址汇总

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

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

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

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

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

随机推荐

  1. (摘)Entity Framework Core 2.1带来更好的SQL语句生成方案

    微软发布了Entity Framework Core2.1,为EF开发者带来了很多期待已久的特性.EF Core 2.1增加了对SQL GROUP BY的支持,支持延迟加载和数据种子等. EF Cor ...

  2. C# 绘制PDF图形——基本图形、自定义图形、色彩透明度

    引言 在PDF中我们可以通过C#程序代码来添加非常丰富的元素来呈现我们想要表达的内容,如绘制表格.文字,添加图形.图像等等.在本篇文章中,我将介绍如何在PDF中绘制图形,并设置图形属性的操作. 文章中 ...

  3. OO_BLOG1_简单表达式求导问题总结

    作业1-1 包含简单幂函数的多项式导函数的求解 I. 基于度量的程序结构分析 1)程序结构与基本度量统计图 2)分析 ​ 本人的第一次作业的程序实现逻辑十分简单,但是OOP的色彩并不强烈,程序耦合度过 ...

  4. springboot新手使用guns开源框架心得

    一.导航 以guns的通知管理为例 l  通知管理的请求地址是localhost:8080/notice l  程序收到这样的请求就去找地址为notice的Controller l  通知控制器收到这 ...

  5. Css实现手机端页面强制横屏的方法示例

    样式 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 @media screen ...

  6. centos6.3部署配置LVS主从

    LVS是Linux Virtual Server的简写,即Linux虚拟服务器,是一个虚拟的服务器集群系统.这个项目在1998年5月由章文嵩博士成立,是中国国内最早出现的自由软件项目之一.它的官方网址 ...

  7. java基础中this,super

    this是自身的一个对象,代表对象本身,可以理解为:指向对象本身的一个指针. super可以理解为是指向自己超(父)类对象的一个指针,而这个超类指的是离自己最近的一个父类. this的用法就不累赘的说 ...

  8. python 爬取全本免费小说网的小说

    这几天朋友说想看电子书,但是只能在网上看,不能下载到本地后看,问我有啥办法?我找了好几个小说网址看了下,你只能直接在网上看,要下载txt要冲钱买会员,而且还不能在浏览器上直接复制粘贴.之后我就想到py ...

  9. SSH远程登录原理

    使用ssh主要有两种登录方式:第一种为密码口令登录,第二种为公钥登录 密码口令登录 通过密码进行登录,主要流程为: 1.客户端连接上服务器之后,服务器把自己的公钥传给客户端 2.客户端输入服务器密码通 ...

  10. python--继承--方法的重写---和父类的扩展

    1.方法的重写 父类的方法不能满足子类的需要,可以对方法重写 具体的实现方式,就相当于在子类中定义了一个和父类同名的方法并实现 重写之后只会对子类的方法调用,而不会调用父类封装的方法 2.对父类方法进 ...