今天分享一下,怎么通过用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. 杭电ACM2016--数据的交换输出

    数据的交换输出 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  2. Electron 创建一个空白的界面

    添加应用 首先添加一个Lorikeet版本的Electron应用. 'use strict' const electron = require('electron'); const app = ele ...

  3. Linux学习笔记之Django项目部署(CentOS)----进阶篇

    一.引入 当我们开发好了一个Django项目之后是需要部署到服务器上的,这样才能正式使用这个项目.之前用了一个运行.sh文件的方法让项目得以在后台运行,其实随着学习的深入,这种方法其实是有点low的, ...

  4. 【Unity】微软的一款依赖注入组件

    前言 前面学习了autofac这个依赖注入组件,本来是打算写在一起的,因为这个组件没打算像autofac一样详细的写,只是写下以前自己鼓捣玩搭建框架然后使用的一个依赖注入组件,并且也是进行了封装使用. ...

  5. [日常] nginx记录post数据

    1.使用log_format指令来更改日志格式,该指令只能放在http{}段 log_format  日志名  '日志内容'; server { access_log /var/log/nginx/d ...

  6. linux系统管理--top命令

    这些日子,运维公司三台服务器,一个小伙伴貌似对top命令不太感冒,我告诉他去百度(不懂谷歌百度的程序员不是好厨师),然后突然发现也许我自己该整理一下相关的东西了 top命令是Linux下常用的性能分析 ...

  7. RMQ求LCA

    题目链接 rmq求LCA,interesting. 一直没有学这玩意儿是因为CTSC的Day1T2,当时我打的树剖LCA 65分,gxb打的rmq LCA 45分... 不过rmq理论复杂度还是小一点 ...

  8. 【20190415】JavaScript-事件流与stopPropagation()、stopImmediatePropagation()的误区解析

    这两天仔细看了一下MDN上关于事件流机制和相关方法的文档,发现有个很大的误区.过去我一直以为stopPropagation()就是用来阻止事件冒泡的,甚至很多博客和菜鸟教程上都是这样写的.但实际上文档 ...

  9. 通过Arcpy在ArcMap工具箱中添加脚本计算面图层的起终点坐标

    关键词: Arcpy,ArcMap Toolbox, Coordinates of Polygon 需求分析: Arcmap中添加有三个图层:图层“GY乡级河道”(面图层)是全县13个乡镇全部的乡级河 ...

  10. c/c++ 网络编程 UDP 设定MTU

    网络编程 UDP 设定MTU MTU(Maximun Transmisson Unit):一次送信的最大size. 在程序里动态改变MTU.注意:程序运行需要root权限. 程序运行的方法: sudo ...