技术标签: # web_源码分享 css # web_前端开发系列 前端 # web_CSS系列
今天其实还是有点期待6月份城市赛道的成绩公布,但是可能因为出现城市太多等问题,官方也还在快马加鞭的统计中,我也趁机再发一篇前端的文章了,其实在很多系统里面我们都看到过各种各样的加载中样式,但是总有些显得平平无奇,今天我就统计了28种load加载动画特效给大家,希望能满足大家的需求。
CSS3实现多种load加载效果,纯CSS3实现多种加载中效果,纯CSS3实现28种加载动态效果,页面实现loading效果,好看的loading动态特效,animation与transform的灵活应用。
版权声明:此文原创于CSDN博主-《拄杖盲学轻声码》,主页有很多分享的代码,期待您的访问。
其实这个就是为了让更多的人能够选择性是否继续阅读这篇文章,为大家精准定位自己想要的demo,文尾有完整代码包下载链接。
在制作这个页面的时候首先就是构思,正常demo都是拿一个dom节点来示例,我选择整4个为代表,这样的话看着舒服点。
首先创建四个div,针对div设置居中展示,其中dom节点如下:
<div class="loader">
<div class="loader-inner">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner">
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner">
<div></div>
<div></div>
</div>
</div>
每一个loader都是表示装的一个加载中的效果,设置一个背景色效果如下:
然后再在白色的方块内设置样式,因为效果不同,所以我采用不同的class名来设置不同的样式属性。
版权声明:此文原创于CSDN博主-《拄杖盲学轻声码》,主页有很多分享的代码,期待您的访问。
主要使用了animation属性的设置,也是CSS3中具有代表性的动画特征,它可以实现动画的时间、反向、次数,甚至支持反向动画等。
语法:animation: name duration timing-function delay iteration-count direction fill-mode play-state;
其中属性说明如下:
值 | 说明 |
---|---|
animation-name | 指定要绑定到选择器的关键帧的名称 |
animation-duration | 动画指定需要多少秒或毫秒完成 |
animation-timing-function | 设置动画将如何完成一个周期 |
animation-delay | 设置动画在启动前的延迟间隔。 |
animation-iteration-count | 定义动画的播放次数。 |
animation-direction | 指定是否应该轮流反向播放动画。 |
animation-fill-mode | 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。 |
animation-play-state | 指定动画是否正在运行或已暂停。 |
initial | 设置属性为其默认值。 |
inherit | 从父元素继承属性。 |
在我这个实例当中我主要设置的代码如下:
<div class="loader">
<div class="loader-inner ball-pulse">
<div></div>
<div></div>
<div></div>
</div>
</div>
.ball-pulse>div:nth-child(1) {
-webkit-animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08);
animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08);
}
.ball-pulse>div:nth-child(2) {
-webkit-animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08);
animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08);
}
.ball-pulse>div:nth-child(3) {
-webkit-animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08);
animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08);
}
.ball-pulse>div {
background-color: #fff;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
}
添加样式后的效果如下:
其实这个和上面的有点像,如果说第一个是一维的,那它就算二维的,是用了9个圆点形成的一个正方形矩阵,然后通过不同时间段各个圆点大小的变化形成的一种动态加载效果。
Html设置了9个子元素div,样式方面主要使用了css的animation-duration来设置不同节点的动画完成时间、animation-delay设置延迟间隔及transform设置缩放。如下所示代码:
<div class="loader">
<div class="loader-inner ball-grid-pulse">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
@keyframes ball-grid-pulse {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: 0.7;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
.ball-grid-pulse {
width: 57px;
}
.ball-grid-pulse>div:nth-child(1) {
-webkit-animation-delay: -0.06s;
animation-delay: -0.06s;
-webkit-animation-duration: 0.72s;
animation-duration: 0.72s;
}
.ball-grid-pulse>div:nth-child(2) {
-webkit-animation-delay: 0.25s;
animation-delay: 0.25s;
-webkit-animation-duration: 1.02s;
animation-duration: 1.02s;
}
.ball-grid-pulse>div:nth-child(3) {
-webkit-animation-delay: -0.17s;
animation-delay: -0.17s;
-webkit-animation-duration: 1.28s;
animation-duration: 1.28s;
}
.ball-grid-pulse>div:nth-child(4) {
-webkit-animation-delay: 0.48s;
animation-delay: 0.48s;
-webkit-animation-duration: 1.42s;
animation-duration: 1.42s;
}
.ball-grid-pulse>div:nth-child(5) {
-webkit-animation-delay: 0.31s;
animation-delay: 0.31s;
-webkit-animation-duration: 1.45s;
animation-duration: 1.45s;
}
.ball-grid-pulse>div:nth-child(6) {
-webkit-animation-delay: 0.03s;
animation-delay: 0.03s;
-webkit-animation-duration: 1.18s;
animation-duration: 1.18s;
}
.ball-grid-pulse>div:nth-child(7) {
-webkit-animation-delay: 0.46s;
animation-delay: 0.46s;
-webkit-animation-duration: 0.87s;
animation-duration: 0.87s;
}
.ball-grid-pulse>div:nth-child(8) {
-webkit-animation-delay: 0.78s;
animation-delay: 0.78s;
-webkit-animation-duration: 1.45s;
animation-duration: 1.45s;
}
.ball-grid-pulse>div:nth-child(9) {
-webkit-animation-delay: 0.45s;
animation-delay: 0.45s;
-webkit-animation-duration: 1.06s;
animation-duration: 1.06s;
}
.ball-grid-pulse>div {
background-color: #fff;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
float: left;
-webkit-animation-name: ball-grid-pulse;
animation-name: ball-grid-pulse;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-delay: 0;
animation-delay: 0;
}
页面呈现效果如下所示:
这个相比上两个没有那么的复杂,主要用一个div就可以完成效果,主要是利用了animation-fill-mode和animation的样式设置,针对动画设置了transform的角度旋转动画rotate设置。
<div class="loader">
<div class="loader-inner ball-clip-rotate">
<div></div>
</div>
</div>
.ball-clip-rotate>div {
background-color: #fff;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
border: 2px solid #fff;
border-bottom-color: transparent;
height: 25px;
width: 25px;
background: transparent !important;
display: inline-block;
-webkit-animation: rotate 0.75s 0s linear infinite;
animation: rotate 0.75s 0s linear infinite;
}
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
50% {
-webkit-transform: rotate(180deg) scale(0.6);
transform: rotate(180deg) scale(0.6);
}
100% {
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
}
页面实现效果如下:
其实这个是我们公司现阶段用的一个效果,有点像手风琴的感觉,其中设置了5根小柱子,然后通过设置这些柱子的高低动画,从而形成一种高低起伏的加载动画。
主要和前面一样,核心在于animation的样式设置。
<div class="loader">
<div class="loader-inner line-scale">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
.line-scale>div:nth-child(1) {
-webkit-animation: line-scale 1s 0.1s infinite cubic-bezier(.2, .68, .18, 1.08);
animation: line-scale 1s 0.1s infinite cubic-bezier(.2, .68, .18, 1.08);
}
.line-scale>div:nth-child(2) {
-webkit-animation: line-scale 1s 0.2s infinite cubic-bezier(.2, .68, .18, 1.08);
animation: line-scale 1s 0.2s infinite cubic-bezier(.2, .68, .18, 1.08);
}
.line-scale>div:nth-child(3) {
-webkit-animation: line-scale 1s 0.3s infinite cubic-bezier(.2, .68, .18, 1.08);
animation: line-scale 1s 0.3s infinite cubic-bezier(.2, .68, .18, 1.08);
}
.line-scale>div:nth-child(4) {
-webkit-animation: line-scale 1s 0.4s infinite cubic-bezier(.2, .68, .18, 1.08);
animation: line-scale 1s 0.4s infinite cubic-bezier(.2, .68, .18, 1.08);
}
.line-scale>div:nth-child(5) {
-webkit-animation: line-scale 1s 0.5s infinite cubic-bezier(.2, .68, .18, 1.08);
animation: line-scale 1s 0.5s infinite cubic-bezier(.2, .68, .18, 1.08);
}
.line-scale>div {
background-color: #fff;
width: 4px;
height: 35px;
border-radius: 2px;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
}
页面效果如下所示:
网盘下载(第四章节有链接路径,可自行下载)
留言获取(可以在博主的评论区留言,切记要留下邮箱哟,博主看到后第一时间发出)
链接:https://pan.baidu.com/s/1OSRhPOxonxWDlGxAN_0U1g
提取码:hdd6
链接:https://www.123pan.com/s/ZxkUVv-V3I4.html
提取码:hdd6
评论区留下您的邮箱账号,博主看到第一时间发给您,祝您生活愉快!
以上就是今天要讲的内容,本文主要介绍了CSS3的特效应用,主要实现了CSS3实现多种加载中效果,CSS3实现28种加载动态效果,页面实现loading效果,好看的loading动态特效,也期待大家一起进步哈,2023年一起加油!!!
版权声明:此文原创于CSDN博主-《拄杖盲学轻声码》,主页有很多分享的代码,期待您的访问。
文章浏览阅读4.1k次,点赞2次,收藏4次。Android每次升级sdk都会有惊喜,功能报错,各种警告,无法使用等问题!_iscasting false because ihwdistributedwindowmanager is invalid.
文章浏览阅读3.2k次,点赞2次,收藏23次。读取风云4号卫星FullMask_Grid.raw文件1、下载FullMask_Grid.raw文件下载网址:国家卫星气象中心(http://satellite.nsmc.org.cn/PortalSite/StaticContent/DocumentDownload.aspx?TypeID=3)2、读取FullMask_Grid.raw文件import numpy as npimport h5pydef fy4disk(rawfile,dim): """ FY-4A数据行列_python读取fy-4a,4b数据行列号和经纬度查找表raw文件
文章浏览阅读2.8k次。万物互联,物联网是未来的发展趋势。如何将设备接入物联网平台,实现设备之间的通信呢?本文以阿里云物联网平台为例,使用python开发语言,介绍设备终端接入平台的通用方法。阅读本文需要了解MQTT协议、python等相关知识。_阿里云上的设备状态未激活如何处理在python中配置
文章浏览阅读578次。CelebA-HQ-img:数据集的目录_/celeba-hq/train/images/
文章浏览阅读6.6k次,点赞20次,收藏93次。本文主要介绍了CSS 动画效果,不用js也可以实现。主要包括旋转、定位、透视。还有几个项目案例,欢迎大家阅读学习,如有不足请批评指正。_css3d
文章浏览阅读1.8k次。我们经常听别人说起java web的三大框架,但是对于初学者来说,java web的三大框架就是一个名词,毫无概念,所以我们今天就来说一下java web请添加链接描述三大框架是什么。java web常用的三大框架指:SSH,即:Spring、Struts、Hibernate,是用来开发web应用程序中使用的。Spring是一个开源框架,它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一..._java web开发中常用的技术框架有哪些?请列举其中至少三个。
文章浏览阅读572次。import osimport xlrdfrom xlutils.copy import copydef base_dir(filename=None):return os.path.join(os.path.dirname(__file__),filename)"""对excel进行操作"""work = xlrd.open_workbook(base_dir("excel.xls"))# 索引..._python将excel文档内批量转换为数字
文章浏览阅读1.3w次,点赞15次,收藏133次。一文详解基于测距的空间定位算法文章目录一文详解基于测距的空间定位算法0 定位算法分类0.1 基于测距与非基于测距的定位算法0.2 集中式与分布式定位算法0.3 绝对与相对定位算法0.4 本文内容概述1 包围盒定位法1.1 算法原理1.2 算法性能2 基于RSSI的定位法2.1 算法原理3 基于TOA的定位法3.1 算法原理3.2 算法性能4 基于TDOA的定位法4.1 算法原理4.2 算法性能5 基于AOA的定位法5.1 算法原理5.2 算法性能6 算法优缺点总结0 定位算法分类0.1 基于测距与非基_平面定位精度计算方法
文章浏览阅读10w+次,点赞39次,收藏345次。本文同步发布在个人博客:YouForever - 专注于互联网分享 欢迎访问为什么要安装黑群晖先说说什么是NAS服务器,简单来说就是一个网络存储器,你可以存放音乐、视频、文件等,方便地从各个设备进行访问。而群晖的Synology DSM,就是一个非常优秀的NAS服务器。NAS百度百科NAS(Network Attached Storage:网络附属存储)按字面简单说就是连接在网络上,具备资料存储功能的装置,因此也称为“网络存储器”。它是一种专用数据存储服务器。是啊,群晖官方的不香吗,可以方._黑群晖安装系统文件损坏
文章浏览阅读360次,点赞4次,收藏7次。这些项目不仅具有广阔的市场前景,而且适合小城市的消费特点,对于想要开实体店或创业的朋友们来说,无疑是有价值的参考。当然,创业的道路并非一帆风顺,但只要我们保持坚定的信念和不懈的努力,相信一定能够在小城市的创业舞台上绽放光彩。作为一名经验丰富的创业者,我建议大家在创业前充分调研市场,了解消费者需求,制定详细的创业计划,并不断学习和提升自身能力,以应对市场竞争和变化。烘焙食品以其独特的口感和精美的外观,受到越来越多消费者的喜爱。同时,我们还不断研发新的产品,推陈出新,以满足市场的不断变化和消费者的需求。
文章浏览阅读481次。wmi不仅支持本地也同样支持远程,这里介绍一下怎么快速的让当前操作系统开启远程服务。 首先这里以windwos7为例,有的朋友说,开启远程wmi没有,我说这个东西有用,他说没有用,我说小伙子还是太年轻了。这里需要当前用户是管理员权限的,当然默认的登陆用户都是管理员的,但是存在着像我一样的懒人,不给虚拟机的windows设置密码,这样是不行的,需要给当然..._远程wmi调用
文章浏览阅读6.7w次,点赞6次,收藏11次。今天遇到了这问题,但也一直纳闷哪出的问题,后来网上查了一下按一下方法也确实能解决问题。------------------------------------------------------------以下为今天网上找的一事例------------------------------------------------------------------------遇到一个奇怪的_java: 方法不会覆盖或实现超类型的方法