纯CSS3实现加载效果
时间:2018-09-27
本文章向大家介绍纯CSS3实现加载效果(水波loading、普通的圆形loading 、圆形转圈loading、交叉效果、圆形正方形切换小loading),需要的朋友可以参考一下
昨晚上闲的没事突然想做几个小loading效果,下面是昨晚上做的几个小案例,分享给大家
1.水波loading:这个loading是我觉得非常简单,但是看上去的效果却非常不错的一个小loading
这个是效果图片
下面我直接把代码放上来,大家需要的可以直接拉走
核心思想:(旋转,以及overflow:hidden属性),可以把代码中的overflow属性注释掉,保准你看一眼明白了,看不明白回来找我,我对你负责
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0 } body { background-color: black } .box { margin: 200px auto; height: 50px; width: 50px; border-radius: 10px; background-color: rgb(0, 174, 255); position: relative; overflow: hidden; border: 1px solid rgb(0, 174, 255); border-top: none; } .a { width: 200px; height: 200px; background: black; position: absolute; left: -80px; top: -180px; border-radius: 80px; animation: xuanzhuan 5s linear infinite; z-index: 2 } @keyframes xuanzhuan{ 0%{transform: rotate(0deg)} 100%{transform: rotate(360deg)} } </style> </head> <body> <div class="box"> <div class="a"></div> <div class="b"></div> </div> </body> </html>
2.普通的圆形loading 这个也很简单 没啥好说的,直接上代码了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{margin: 0;padding: 0} li{list-style: none} body,html{ background-color: black; } ul{ height: 40px; width: 200px; margin: 50px auto; } ul>li{ float: left; height: 20px; width: 20px; border-radius: 50%; background: white; margin-left: 10px; animation: move 2s infinite alternate; transform: scale(0.5) } ul>li:nth-of-type(2){ animation-delay: 0.5s; } ul>li:nth-of-type(3){ animation-delay:1s; } @keyframes move{ 0%{transform: scale(0.5);opacity: 0.5} 100%{transform: scale(1);opacity: 1;} } </style> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>
3.圆形转圈loading
思想(把小圆用定位排成圆形,再给每个上添加动画,用delay控制延迟事件即可)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style> *{ margin: 0; padding: 0; } .d1{ width: 50px; height: 50px; position: absolute; margin: 100px; } .d1 p{ width: 14px; height: 14px; border-radius: 50%; background: red; position: absolute; animation: dong 1.5s linear infinite; } .d1 p:nth-child(1){ top: 0; left: 0; } .d1 p:nth-child(2){ top: 0; right: 0; } .d1 p:nth-child(3){ right: 0; bottom: 0; } .d1 p:nth-child(4){ bottom: 0; left: 0; } .d1:nth-of-type(2){ transform: rotate(45deg); } @keyframes dong{ 0%{ transform: scale(0); } 50%{ transform: scale(1); } 100%{ transform: scale(0); } } .d1:nth-of-type(1) p:nth-of-type(1){ /*负值:动画直接开始,但跳过前...秒动画*/ animation-delay: -0.1s; } .d1:nth-of-type(2) p:nth-of-type(1){ animation-delay: -0.3s; } .d1:nth-of-type(1) p:nth-of-type(2){ animation-delay: -0.5s; } .d1:nth-of-type(2) p:nth-of-type(2){ animation-delay: -0.7s; } .d1:nth-of-type(1) p:nth-of-type(3){ animation-delay: -0.9s; } .d1:nth-of-type(2) p:nth-of-type(3){ animation-delay: -1.1s; } .d1:nth-of-type(1) p:nth-of-type(4){ animation-delay: -1.3s; } .d1:nth-of-type(2) p:nth-of-type(4){ animation-delay: -1.5s; } </style> <body> <div class="d1"> <p></p> <p></p> <p></p> <p></p> </div> <div class="d1"> <p></p> <p></p> <p></p> <p></p> </div> </body> </html>
4.交叉效果
这个稍微复杂一点,其实只要捋明白思路,也挺简单的(PS:大家可以把动画挨个取消试试,你就会发现好像并不是很难)
<!doctype html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="renderer" content="webkit"> </head> <body> <style> body { background-color: #F5F5F5; padding: 100px 120px; } .box { margin-left: 500px; display: block; width: 64px; height: 64px; transform-origin: 16px 16px; /* 旋转 */ animation: xuanzhuan 5s infinite; } /* 平移 */ .ping { animation: pingyi 2.5s infinite; position: absolute; } .hang { width: 64px; height: 24px; position: absolute; } .hang:nth-child(0) { transform: rotate(0deg); } .hang:nth-child(1) { transform: rotate(90deg); } .hang:nth-child(2) { transform: rotate(180deg); } .hang:nth-child(3) { transform: rotate(270deg); } /* 第一个小珠子 */ .ping:nth-child(1) { width: 8px; height: 8px; top: 50%; left: 50%; margin-top: -4px; margin-left: -4px; border-radius: 4px; animation-delay: -0.3s; } /* 第二个小珠子 */ .ping:nth-child(2) { width: 16px; height: 16px; top: 50%; left: 50%; margin-top: -8px; margin-left: -8px; border-radius: 8px; -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } /* 第三个小珠子 */ .ping:nth-child(3) { width: 24px; height: 24px; top: 50%; left: 50%; margin-top: -12px; margin-left: -12px; border-radius: 12px; animation-delay: -0.9s; } .blue { background-color: #1f4e5a; } .red { background-color: #ff5955; } .yellow { background-color: #ffb265; } .green { background-color: #00a691; } @keyframes xuanzhuan { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} } @keyframes pingyi { 0% {transform: translateX(0);} 25% { transform: translateX(-64px); } 75% { transform: translateX(32px);} 100% {transform: translateX(0);} } </style> <div class="box"> <div class="hang"> <div class="ping blue"></div> <div class="ping blue"></div> <div class="ping blue"></div> </div> <div class="hang"> <div class="ping yellow"></div> <div class="ping yellow"></div> <div class="ping yellow"></div> </div> <div class="hang"> <div class="ping red"></div> <div class="ping red"></div> <div class="ping red"></div> </div> <div class="hang"> <div class="ping green"></div> <div class="ping green"></div> <div class="ping green"></div> </div> </div> </body> </html>
5.圆形正方形切换小loading
这个是真的简单!!!!!
<!doctype html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="renderer" content="webkit"> <link rel="shortcut icon" type="images/x-icon" href="/template/images/ufw.ico"> <title>loading-04</title> </head> <body> <style> body{ padding: 80px 100px; } .csshub-loading-icon{ padding:10px; width:10px; height:10px; border-top:20px solid #ED5548; border-right:20px solid #599CD3; border-bottom: 20px solid #5CBD5E; border-left:20px solid #FDD901; background:transparent; animation: csshub-rotate-right-round 1.2s ease-in-out infinite alternate ; } @keyframes csshub-rotate-right-round { 0% { transform: rotate(0deg);} 50% {transform: rotate(180deg); } 100% {transform: rotate(360deg);border-radius:50%;} } </style> <div class="csshub-loading-icon"></div> </body> </html>
好啦,今天先分享这些,以后再有loading我会再补充上来的,嗷,对了,我懒得没做兼容,要是再某些浏览器不能运行,加一下浏览器前缀就好啦
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- python pyecharts数据可视化 玫瑰图、柱形图、饼图、环图
- Python opencv图像处理基础总结(三) 图像直方图 直方图应用 直方图反向投影
- Python opencv图像处理基础总结(四) 模板匹配 图像二值化
- python pyecharts数据可视化 词云图 仪表盘 水球图
- python jupyter notebook配置 更改默认工作目录 更换皮肤主题 代码字体 大小
- 关于直播卖货系统平台在微信浏览器中音视频播放的问题
- python爬虫 scrapy爬虫框架的基本使用
- Python opencv图像处理基础总结(五) 图像金字塔 图像梯度 Canny算法边缘提取
- python scrapy爬虫练习(1) 爬取豆瓣电影top250信息
- python爬虫 senlenium爬取拉勾网招聘数据
- Python opencv图像处理基础总结(六) 直线检测 圆检测 轮廓发现
- 简单又强大的pandas爬虫 利用pandas库的read_html()方法爬取网页表格型数据
- python pyecharts数据可视化 折线图 箱形图
- Python爬虫 selenium自动化 利用搜狗搜索爬取微信公众号文章信息
- python 办公自动化系列 (1) 从22053条数据中统计断网次数并计算平均断网时间