css loading 字体动画效果,CSS实现四种loading动画效果
/*第一种*/.demo1 {
4px;
height: 4px;
border-radius: 2px;
background: #68b2ce;float: left;
margin:03px;
animation: demo1 linear 1s infinite;-webkit-animation: demo1 linear 1s infinite;
}
.demo1:nth-child(1){
animation-delay:0s;
}
.demo1:nth-child(2){
animation-delay:0.15s;
}
.demo1:nth-child(3){
animation-delay:0.3s;
}
.demo1:nth-child(4){
animation-delay:0.45s;
}
.demo1:nth-child(5){
animation-delay:0.6s;
}
@keyframes demo1{0%,60%,100% {transform: scale(1);}30% {transform: scale(2.5);}
}
@-webkit-keyframes demo1{0%,60%,100% {transform: scale(1);}30% {transform: scale(2.5);}
}/*第二种*/.demo2 {
4px;
height: 6px;
background: #68b2ce;float: left;
margin:03px;
animation: demo2 linear 1s infinite;-webkit-animation: demo2 linear 1s infinite;
}
.demo2:nth-child(1){
animation-delay:0s;
}
.demo2:nth-child(2){
animation-delay:0.15s;
}
.demo2:nth-child(3){
animation-delay:0.3s;
}
.demo2:nth-child(4){
animation-delay:0.45s;
}
.demo2:nth-child(5){
animation-delay:0.6s;
}
@keyframes demo2{0%,60%,100% {transform: scale(1);}30% {transform: scaleY(3);}
}
@-webkit-keyframes demo2{0%,60%,100% {transform: scale(1);}30% {transform: scaleY(3);}
}/*第三种*/#loading3 {
position: relative;
50px;
height: 50px;
}
.demo3 {
4px;
height: 4px;
border-radius: 2px;
background: #68b2ce;
position: absolute;
animation: demo3 linear0.8s infinite;-webkit-animation: demo3 linear 0.8s infinite;
}
.demo3:nth-child(1){
left: 24px;
top: 2px;
animation-delay:0s;
}
.demo3:nth-child(2){
left: 40px;
top: 8px;
animation-delay:0.1s;
}
.demo3:nth-child(3){
left: 47px;
top: 24px;
animation-delay:0.1s;
}
.demo3:nth-child(4){
left: 40px;
top: 40px;
animation-delay:0.2s;
}
.demo3:nth-child(5){
left: 24px;
top: 47px;
animation-delay:0.4s;
}
.demo3:nth-child(6){
left: 8px;
top: 40px;
animation-delay:0.5s;
}
.demo3:nth-child(7){
left: 2px;
top: 24px;
animation-delay:0.6s;
}
.demo3:nth-child(8){
left: 8px;
top: 8px;
animation-delay:0.7s;
}
@keyframes demo3{0%,40%,100% {transform: scale(1);}20% {transform: scale(3);}
}
@-webkit-keyframes demo3{0%,40%,100% {transform: scale(1);}20% {transform: scale(3);}
}/*第四种*/#loading5 {
20px;
height: 100px;
border-bottom: 1px solid #68b2ce;
}
.demo5 {
20px;
height: 20px;
border-radius: 10px;
background: #68b2ce;
animation: demo5 cubic-bezier(0.5,0.01,0.9,1) 0.6s infinite alternate;-webkit-animation: demo5 cubic-bezier(0.5,0.01,0.9,1) 0.6s infinite alternate;
}
@keyframes demo5{0%{
transform:translateY(0px);-webkit-transform:translateY(0px);
}100%{
transform:translateY(80px);-webkit-transform:translateY(80px);
}
}
@-webkit-keyframes demo5{0%{
transform:translateY(0px);-webkit-transform:translateY(0px);
}100%{
transform:translateY(80px);-webkit-transform:translateY(80px);
}
}
css loading 字体动画效果,CSS实现四种loading动画效果相关推荐
- css设置子盒子水平垂直居中（四种方式）
css设置子盒子水平垂直居中(四种方式) 1. 使用绝对定位 <!DOCTYPE html> <html><head><meta charset=" ...
- 简述css属性选择器的几种定义方式_css的四种使用方式 css规则按选择器类型分为那四种...
HTML中嵌入CSS的四种方式及优先级,如何选择 1. 行内样式行内样式就是把 CSS 样式直接放在代码行内的标签中,一般都是放入标签的style属性中,由于行内样式直接插入标签中,故是最直接的一种方 ...
- css 入场动画_React系列十四 React过渡动画
在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验. 当然,我们可以通过原生的CSS来实现这些过渡动画,但是React社区为我们提供了react-transition-g ...
- html中字段间距代码,css调字体大小代码 css字与字之间的间距怎么调
html怎么改变字体大小和颜色 可以用css改变字体的大小和颜色. 在head标签中添加style标签给页面设置css样式,选择p标签,字体大小用的是"font-size"属 在D ...
- hide show vue 动画_Vue2.x学习四：过渡动画
Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 请注意它的应用场景 并不是说我们写了一个动画之后让它一直在动,而是在一个模块显示或隐藏的时候去做一种特效,使得它的过程有过渡 ...
- android svg指纹录取动画_你知道几种前端动画的实现方式？
随着互联网的持续发展,H5 页面作为与用户直接交互的表现层越来越复杂,呈现的形式也越来越丰富,从而也要求 H5 页面具有更多的花样性及动画效果.那前端实现动画效果的方式有哪些呢,大致有如下几种: 一. ...
- css英文字体 在线引用,css字体英文名称(示例代码)
华文细黑:STHeiti Light [STXihei] 华文黑体:STHeiti 华文楷体:STKaiti 华文宋体:STSong 华文仿宋:STFangsong 俪黑 Pro:LiHei Pro ...
- Cesium 四种雷达扫描效果
Cesium 雷达效果: 1.无遮挡雷达 利用entity球体实现 重要:利用球体的旋转功能 和Cesium的CallbackProperty函数 不断的旋转 let num = 0 const ra ...
- 定义html表格的大小和位置,点晴OA工作流表单设计：表格table及宏控件的HTML、CSS、字体参数教程详解...
点晴OA工作流表单设计:表格table及宏控件的HTML.CSS.字体参数教程详解 说明:虽然点晴OA内置了强大的富文本编辑器,但是很多时候还是难以实现理想的精确显示效果,为了实现满意的显示效果,网 ...
最新文章
- ios 系统提示框_经验分享：新购买移动硬盘格式化为Windows系统和Mac系统同时可以使用的方法...
- Java 面试知识点解析(五)——网络协议篇
- 如何判断一个类是否是线程安全（可重入）的？
- OpenStack（三）——Glance组件
- 如何在vs2010中修改栈的大小
- Python多线程--互斥锁、死锁
- urllib.request.urlopen(req).read().decode解析http报文报“‘utf-8‘ codec can‘t decode”错处理
- java fxml教程_JavaFX 初学入门(一)：FXML嵌套与原始控件继承
- java socket 清理缓冲器_2021年Java全套面试题抢先看！中篇（更新中......）
- GstElement的sink/src有什么区别？
- 冰点破解版，百度文库免费下载
- golang（4）使用beego + ace admin 开发后台系统 CRUD
- teambition 还是jira_研发管理工具之 Id 比较（Jira/Teambition/TAPD/禅道）
- 论文图表录 出现几个 错误标签未定义的简单解决方法
- PR软件有哪些辅助功能？Premiere Pro 的辅助功能介绍
- 第六节课 pycharm
- 自定义悬浮球，提供一些快捷操作。比如一键静音，一键锁频，一键截屏，一键回桌面，手电筒等
- Codeforces Round #548 (Div. 2) C. Edgy Trees(思维+dfs)
- HTTPSConnectionPool(host=‘files.pythonhosted.org‘, port=443): Read timed out.
- 明天我们用鼠标吃饭 ---- 乔赢盯上“新新人类”