酷炫的loading
今天分享一下,怎么通过用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的更多相关文章
- 【老孟Flutter】41个酷炫的 Loading 组件库
老孟导读:目前 loading 库中包含41个动画组件,还会继续添加,同时也欢迎大家提交自己的 loading 动画组件或者直接微信发给我也可以. Github 地址:https://github.c ...
- 开源分享三(炫酷的Android Loading动画)
开源分享三(炫酷的Android Loading动画) 分享GitHub上的一些Loading,为了提升产品用户体验,一个好的Loading必然是不可缺少的,对于一些耗时需要用户等待的页面来说会转移用 ...
- HTML5 Canvas玩转酷炫大波浪进度图
如上图所见,本文就是要实现上面那种效果. 由于最近AlloyTouch要写一个下拉刷新的酷炫loading效果.所以首选大波浪进度图. 首先要封装一下大波浪图片进度组件.基本的原理是利用Canvas绘 ...
- [Asp.net 开发系列之SignalR篇]专题二:使用SignalR实现酷炫端对端聊天功能
一.引言 在前一篇文章已经详细介绍了SignalR了,并且简单介绍它在Asp.net MVC 和WPF中的应用.在上篇博文介绍的都是群发消息的实现,然而,对于SignalR是为了实时聊天而生的,自然少 ...
- 赞!15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- Android酷炫加载进度动画
概述 本自定义动画进度酷炫View,是加载进度动画的自定义View,继承于ImageView来实现,主要实现蒙层加载进度的加载进度效果. 支持水平左右加载和垂直上下加载四个方向,同时也支持自定义蒙层进 ...
- Android常用酷炫控件(开源项目)github地址汇总
转载一个很牛逼的控件收集帖... 第一部分 个性化控件(View) 主要介绍那些不错个性化的 View,包括 ListView.ActionBar.Menu.ViewPager.Gallery.Gri ...
- 开源造轮子:一个简洁,高效,轻量级,酷炫的不要不要的canvas粒子运动插件库
一:开篇 哈哈哈,感谢标题党的莅临~ 虽然标题有点夸张的感觉,但实际上,插件库确实是简洁,高效,轻量级,酷炫酷炫的咯.废话不多说,先来看个标配例子吧: (codepen在线演示编辑:http://co ...
- 纯CSS3实现的一些酷炫效果
之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...
随机推荐
- VSTO中Word转换Range为Image的方法
VSTO中Word转换Range为Image的方法 前言 VSTO是一套用于创建自定义Office应用程序的Visual Studio工具包,通过Interop提供的增强Office对象,可以对Wor ...
- 31.C++-虚函数之构造函数与析构函数分析
1.构造函数不能为虚函数 当我们将构造函数定义为虚函数时,会直接报错: 首先回忆下以前学的virtual虚函数概念: 如果类定义了虚函数,创建对象时,则会分配内存空间,并且为该父类以及其所有子类的内存 ...
- web前端图片上传
图片上传有很多种形式,但是听说ios只能传字符串,所以为了安卓.ios和web能用一个接口上传图片,采用了基于base64 的方法上传图片. 下面是我的html <div class=" ...
- react 函数子组件(Function ad Child Component)
今天学习了react中的函数子组件的概念,然后在工作中得到了实际应用,很开心,那么好记性不如烂笔头,开始喽~ 函数子组件(FaCC )与高阶组件做的事情很相似, 都是对原来的组件进行了加强,类似装饰者 ...
- Vs2017 无法调试APP
其实一切都是扯,看看有没有主活动吧 症状:能部署安装,没有快捷方式,不启动调试.XARAMIN不能在XML中配置主活动,会自动根据[Activity(Label = "AA", ...
- LEDAPS1.3.0版本移植到windows平台----HuPm参数初始化模块
这个是2012年左右放在百度空间的,谁知百度空间关闭...转移到博客园. 最近项目用到3.1.2版本的LEDAPS,新版本的使用情况会在后续文章中慢慢丰富. LEDAPS的调用顺序是:HuPm--&g ...
- rxjava切换线程避免重复代码
.subscribeOn(Schedulers.io()) .unsubscribeOn(Schedulers.io()) .observeOn(AndroidSchedulers.mainThrea ...
- [Web][DreamweaverCS6][高中同学毕业分布去向网站+服务器上挂载]一、安装与破解DreamweaverCS6+基本规划
DreamweaverCS6安装与破解 一.背景介绍:同学毕业分布图项目计划简介 哎哎哎,炸么说呢,对于Web前端设计来说,纯手撕html部分代码实在是难受. 对于想做地图这类的就“必须”用这个老工具 ...
- spring学习总结——高级装配学习三(Bean的作用域)
一.bean的作用域 在默认情况下,Spring应用上下文中所有bean都是作为以单例(singleton)的形式创建的.也就是说,不管给定的一个bean被注入到其他bean多少次,每次所注入的都是同 ...
- SQLServer数据事务日志操作
日志备份 (log backup) 包括以前日志备份中未备份的所有日志记录的事务日志备份. (完整恢复模式) 使用SSMS数据库管理工具备份事务日志 1.连接数据库,选择数据库->右键点击-&g ...