CSS动画实战：创建一个太极Loading图

这里主要是使用CSS的animation和伪类来构建，分析设定关键帧的执行顺序和时间段。

效果

动画分析

首先通过效果对动画执行进行一下分析：

  1. 边框的四条边进行按顺序动画加载 。
  2. 矩形边框变为圆行边框。
  3. 太极图内部图案渐渐出现。
  4. 太极图旋转。
  5. 整个动画逆序执行。

针对上面的1效果是需要思考一下的，其他都比较容易实现。5效果只需设置属性animation-direction: alternate即可，整体动画加入animation-iteration-count: infinite来保证无限循环。

静态效果实现

首先将静态效果做出来。

html结构：

<div id="loader"><div class="logo"><div class="left"></div><div class="right"></div></div> <p>Loading...</p>
</div>

CSS（LESS）部分：

@border-width:2px;
@loader-width:150px;
@loader-insider-width:@loader-width * 0.15;
@animate-time:4s;*{margin: 0;padding: 0;border: 0;
}html, body{width: 100%;height: 100%;
}#loader{position: absolute;top: 0;left: 0;bottom: 0;right: 0;display: flex;flex-direction: column;justify-content: center;align-items: center;p {padding: 1.5em;font-family: Arial;}.logo{width: @loader-width;height: @loader-width;position: relative;&:before{position: absolute;content: '';left: 0;top: 0;border-color: transparent;border-width: @border-width;border-style: solid;border-top-color: #000;border-right-color: #000;width: 100%;height: 100%;}&:after{position: absolute;content: '';bottom: -2 * @border-width;right: -2 * @border-width;border-color: transparent;border-width: @border-width;border-style: solid;border-bottom-color: #000;border-left-color: #000;width: 100%;height: 100%;}.left{position: absolute;width: 50%;height: 100%;top: @border-width;right: 50%;background-color: #000;border-top-left-radius: 100% 50%;border-bottom-left-radius: 100% 50%;&:before{position: absolute;content: '';width: 100%;height: 50%;bottom: 0;left: 50%;border-radius: 50%;background-color: #000;}&:after{position: absolute;content: '';width: @loader-insider-width;height: @loader-insider-width;background-color: #fff;bottom: ~'calc(25% - @{loader-insider-width} / 2)';left: ~'calc(100% - @{loader-insider-width} / 2)';border-radius: 50%;}      }.right{position: absolute;width: 50%;height: 100%;top: @border-width;left: 50%;border-top-right-radius: 100% 50%;border-bottom-right-radius: 100% 50%;&:before{position: absolute;content: '';width: 100%;height: 50%;top: 0;right: 50%;border-radius: 50%;background-color: #fff;}&:after{position: absolute;content: '';width: @loader-insider-width;height: @loader-insider-width;background-color: #000;top: ~'calc(25% - @{loader-insider-width} / 2)';right: ~'calc(100% - @{loader-insider-width} / 2)';border-radius: 50%;}    }  }  
}

效果：

动画实现

上面已经把静态的效果实现了，现在将动画部分抽离出来。

动画关键帧时间段

根据效果，做如下时间段划分：

边框效果实现

将.logo的两个伪类的宽高设置为0，然后添加动画效果：

.logo{width: @loader-width;height: @loader-width;position: relative;animation: spin @animate-time infinite;animation-direction: alternate;animation-timing-function:ease;&:before{position: absolute;content: '';left: 0;top: 0;border-color: transparent;border-width: @border-width;border-style: solid;animation: line-before @animate-time infinite;animation-direction: alternate;}&:after{position: absolute;content: '';bottom: -2 * @border-width;right: -2 * @border-width;border-color: transparent;border-width: @border-width;border-style: solid;animation: line-after @animate-time infinite;animation-direction: alternate;}
}

keyframes:

@keyframes line-before {0% {width: 0;height: 0;border-top-color: #000;}9.9% {border-right-color: transparent;}10% {width: 100%;border-right-color: #000;border-top-color: #000;height: 0;}20%,100% {width: 100%;border-right-color: #000;border-top-color: #000;height: 100%;}40% {width: 100%;border-right-color: #000;border-top-color: #000;height: 100%;border-radius: 0;}//在执行到50%的时候变圆50%, 100% {width: 100%;border-right-color: #000;border-top-color: #000;height: 100%;border-radius: 50%;}
}@keyframes line-after {0%,19.9% {border-color: transparent;width: 0;height: 0;}20% {width: 0;height: 0;border-bottom-color: #000;}29.9% {border-left-color: transparent;}30% {width: 100%;border-left-color: #000;border-bottom-color: #000;height: 0;}40% {width: 100%;border-left-color: #000;border-bottom-color: #000;height: 100%;border-radius: 0;}//在执行到50%的时候变圆50%, 100% {border-radius: 50%;width: 100%;border-left-color: #000;border-bottom-color: #000;height: 100%;}
}

内部图案出现效果

这个直接调一下透明度即可：

@keyframes left-right-fade {0%, 50%{opacity: 0;}75%, 100% {opacity: 1;}
}

旋转效果

@keyframes spin {0%, 75%{transform:rotate(0deg);}90%, 100% {transform:rotate(360deg);}
}

所有样式代码

//author: 王乐平
//date: 2017.8.1
//blog: http://blog.csdn.net/lecepin@border-width:2px;
@loader-width:150px;
@loader-insider-width:@loader-width * 0.15;
@animate-time:4s;*{margin: 0;padding: 0;border: 0;
}html, body{width: 100%;height: 100%;
}#loader{position: absolute;top: 0;left: 0;bottom: 0;right: 0;display: flex;flex-direction: column;justify-content: center;align-items: center;p {padding: 1.5em;font-family: Arial;}.logo{width: @loader-width;height: @loader-width;position: relative;animation: spin @animate-time infinite;animation-direction: alternate;animation-timing-function:ease;&:before{position: absolute;content: '';left: 0;top: 0;border-color: transparent;border-width: @border-width;border-style: solid;animation: line-before @animate-time infinite;animation-direction: alternate;}&:after{position: absolute;content: '';bottom: -2 * @border-width;right: -2 * @border-width;border-color: transparent;border-width: @border-width;border-style: solid;animation: line-after @animate-time infinite;animation-direction: alternate;}.left{position: absolute;width: 50%;height: 100%;top: @border-width;right: 50%;background-color: #000;border-top-left-radius: 100% 50%;border-bottom-left-radius: 100% 50%;animation: left-right-fade @animate-time infinite;animation-direction: alternate;&:before{position: absolute;content: '';width: 100%;height: 50%;bottom: 0;left: 50%;border-radius: 50%;background-color: #000;}&:after{position: absolute;content: '';width: @loader-insider-width;height: @loader-insider-width;background-color: #fff;bottom: ~'calc(25% - @{loader-insider-width} / 2)';left: ~'calc(100% - @{loader-insider-width} / 2)';border-radius: 50%;}      }.right{position: absolute;width: 50%;height: 100%;top: @border-width;left: 50%;border-top-right-radius: 100% 50%;border-bottom-right-radius: 100% 50%;animation: left-right-fade @animate-time infinite;animation-direction: alternate;&:before{position: absolute;content: '';width: 100%;height: 50%;top: 0;right: 50%;border-radius: 50%;background-color: #fff;}&:after{position: absolute;content: '';width: @loader-insider-width;height: @loader-insider-width;background-color: #000;top: ~'calc(25% - @{loader-insider-width} / 2)';right: ~'calc(100% - @{loader-insider-width} / 2)';border-radius: 50%;}    }  }  
}@keyframes line-before {0% {width: 0;height: 0;border-top-color: #000;}9.9% {border-right-color: transparent;}10% {width: 100%;border-right-color: #000;border-top-color: #000;height: 0;}20%,100% {width: 100%;border-right-color: #000;border-top-color: #000;height: 100%;}40% {width: 100%;border-right-color: #000;border-top-color: #000;height: 100%;border-radius: 0;}50%, 100% {width: 100%;border-right-color: #000;border-top-color: #000;height: 100%;border-radius: 50%;}
}@keyframes line-after {0%,19.9% {border-color: transparent;width: 0;height: 0;}20% {width: 0;height: 0;border-bottom-color: #000;}29.9% {border-left-color: transparent;}30% {width: 100%;border-left-color: #000;border-bottom-color: #000;height: 0;}40% {width: 100%;border-left-color: #000;border-bottom-color: #000;height: 100%;border-radius: 0;}50%, 100% {border-radius: 50%;width: 100%;border-left-color: #000;border-bottom-color: #000;height: 100%;}
}@keyframes left-right-fade {0%, 50%{opacity: 0;}75%, 100% {opacity: 1;}
}@keyframes spin {0%, 75%{transform:rotate(0deg);}90%, 100% {transform:rotate(360deg);}
}

博客名称：王乐平博客

CSDN博客地址：http://blog.csdn.net/lecepin

知识共享许可协议
本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/401663.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

PWA(Progressive Web App)入门系列：（二）相关准备

PWA(Progressive Web App)入门系列：（二）相关准备

前言 在上一章中&#xff0c;对PWA的相关概念做了基本介绍&#xff0c;了解了PWA的组成及优势。为了能够更快的进入PWA的世界&#xff0c;这一章主要对在PWA开发中&#xff0c;需要注意的问题&#xff0c;运行的环境及调试工具做介绍说明。 浏览器要求 因为目前各浏览器对于…
阅读更多...
error: Refusing toundefine while domain managed save image exists

error: Refusing toundefine while domain managed save image exists

虚拟机无法删除的处理方法1&#xff09;、查看虚拟机状态virsh # list --allId Name State----------------------------------------------------9 instance-000000c7 running10 instance-0000002e running11 inst…
阅读更多...
PWA(Progressive Web App)入门系列：（三）PWA关键技术Manifest

PWA(Progressive Web App)入门系列：（三）PWA关键技术Manifest

前言 前面说过&#xff0c;让Web App能够达到Native App外观体验的主要实现技术就是PWA中的manifest技术&#xff0c;本章会详细说明manifest的实现&#xff0c;及各个参数的具体含义&#xff0c;还将了解如何定义Web App的启动图标、启动样式等。 简介 manifest是一种简单的…
阅读更多...
利用百度LBS做一个小Demo

利用百度LBS做一个小Demo

为什么80%的码农都做不了架构师&#xff1f;>>> 申请ak&#xff08;即获取密钥&#xff09;http://lbsyun.baidu.com/apiconsole/key?applicationkey 去这儿注册一个开发者账号即可拼写发送http请求的url譬如这样的调用http://api.map.baidu.com/geocoder/v2/?ad…
阅读更多...
PWA(Progressive Web App)入门系列：（四）Promise

PWA(Progressive Web App)入门系列：（四）Promise

前言 这一章说一下ES6的Promise对象。为什么要在PWA系列的文章中讲Promise呢&#xff1f;因为PWA中的许多技术API中都是以Promise返回的方式返回的&#xff0c;为了对后续章节中PWA技术API更好的理解&#xff0c;这里就来说一个Promise对象。 Promise出现的背景 在JavaScrip…
阅读更多...
图文详解如何搭建Windows的Android C++开发环境

图文详解如何搭建Windows的Android C++开发环境

原地址:http://www.apkbus.com/android-18595-1-1.html ////TITLE:// 图文详解如何搭建Windows的Android C开发环境&#xff08;一&#xff09;//AUTHOR:// norains//DATE:// Thursday 14-April-2011//Environment:// Cygwin 1.7.9// Android NDK r5//1. 下载A…
阅读更多...
PWA(Progressive Web App)入门系列：（五）Web Worker

PWA(Progressive Web App)入门系列：（五）Web Worker

前言 在说Service Worker前有必要说一下Web Worker&#xff0c;因为Service Worker本身就属于Web Worker的延伸&#xff0c;大部分功能也是基于Web Worker进行的扩展。 背景 众所周知&#xff0c;JavaScript引擎是以单线程调度的方式进行&#xff0c;我们无法同时运行多个Ja…
阅读更多...
Glob Patterns匹配模式使用

Glob Patterns匹配模式使用

前段时间在用workbox时&#xff0c;在做precache时&#xff0c;匹配模式基于的是Glob Pattern模式&#xff0c;于是就看了下相关文档。 下面翻译一下node-glob的使用&#xff0c;原文&#xff1a;https://github.com/isaacs/node-glob#glob-primer Glob 像在shell里面&#x…
阅读更多...
vSphere5.5安装教程

vSphere5.5安装教程

vSphere5.5安装教程 首先&#xff0c;下载OVF模版 http://pan.baidu.com/s/1o6kaEs6 点击文件下--部署OVF模版 把刚才下载下来的文件放到浏览里面&#xff0c;下一步 下一步 给vmware vcenter Server命名 这里选择Thin Provision精简置备 检查设置&#xff0c;完成 安装部署中……
阅读更多...
Workbox CLI v3.x 中文版

Workbox CLI v3.x 中文版

在写PWA应用时&#xff0c;用到WorkBox工具&#xff0c;使用过程中发现没有中文的帮助文档&#xff0c;为了体验好一些&#xff0c;也为了方便自己和他人查看&#xff0c;在这里翻译了一下workbox-cli。 Workbox CLI 是什么? Workbox命令行&#xff08;在workbox-cli包内&…
阅读更多...
webView.loadUrl(file:///android_asset/table3.html)出现中文乱码的问题

webView.loadUrl(file:///android_asset/table3.html)出现中文乱码的问题

webSettings.setDefaultTextEncodingName("UTF-8");
阅读更多...
Workbox.routing v3.x 中文版

Workbox.routing v3.x 中文版

NAMESPACE STATIC VERSION V3.6.1 类 NavigationRoute NavigationRoute可以轻松创建匹配浏览器navigation requests的Route。 它仅匹配mode设置为navigate的请求。 您可以只使用blacklist和whitelist参数中的一个或两个&#xff0c;将此路由应用于导航请求中。 RegExpRout…
阅读更多...
安装wps导致 application/kset 上传文件类型报错解决办法

安装wps导致 application/kset 上传文件类型报错解决办法

电脑中安装wps上传execl时&#xff0c;上传.xls文件时 报错 application/kset 文件类型不正确打印array()print_r($_FILES ) 结果如下&#xff1a;Array ( [userfile] > Array ( [name] > Template.xls[type] > application/kset[tmp_name] > C:\\Windows\\temp\\p…
阅读更多...
Workbox.strategies v3.x 中文版

Workbox.strategies v3.x 中文版

NAMESPACE STATIC VERSION V3.6.1 该模块提供了大多数serviceworker常用的缓存策略的简单实现。 类 CacheFirst cache-first请求策略的实现。 缓存优先策略对于带版本号的资源是非常有用的&#xff0c;像这种URLstyles/example.a8f5f1.css&#xff0c;因为它们可以长时间缓存…
阅读更多...
集算器访问HTTP数据的代码示例

集算器访问HTTP数据的代码示例

使用集算器&#xff08;esProc&#xff09;可以很方便的从http数据源读取数据进行处理。本例子中有一个servlet&#xff0c;对外提供json格式的雇员信息查询。Servlet访问数据库的员工表&#xff0c;保存了员工的信息&#xff0c;如下&#xff1a;EID NAME SURNAME …
阅读更多...
PWA(Progressive Web App)入门系列：Cache Storage Cache

PWA(Progressive Web App)入门系列：Cache Storage Cache

前言 目前浏览器的存储机制有很多&#xff0c;如&#xff1a;indexedDB、localStorage、sessionStorage、File System API、applicationCache 等等&#xff0c;那为什么又制定了一套 Cache API 呢&#xff1f;对比其他存储机制有什么优势&#xff1f; 简介 Cache API 是一套…
阅读更多...
oracle11g AUD$维护

oracle11g AUD$维护

http://blog.csdn.net/lwei_998/article/details/7394638SYSTEM表空间使用率达到了85%,查出是用来记录审计记录的aud$表占用了很大的空间。备份后truncate掉AUD$,问题临时解决。记得oracle11.2可以把aud$迁移到普通的表空间。于是试了一把&#xff0c;果然ok。1.检查SYSTEM表空…
阅读更多...
「浏览器插件」无广告国内视频平台直接播放插件

「浏览器插件」无广告国内视频平台直接播放插件

前段时间发现一些比较不错的解析国内视频平台的一些 API 接口&#xff0c;很早之前基于这些接口做过一个 Android 端的播放软件&#xff0c;但为了更方便使用吧&#xff0c;于是做了一个 Chrome 的浏览器插件&#xff0c;解析接口也是在线更新的&#xff0c;所以用起来会比较方…
阅读更多...
kafka性能测试(转)KAFKA 0.8 PRODUCER PERFORMANCE

kafka性能测试(转)KAFKA 0.8 PRODUCER PERFORMANCE

来自:http://blog.liveramp.com/2013/04/08/kafka-0-8-producer-performance-2/ At LiveRamp, we constantly face scaling challenges as the volume of data that our infrastructure must deal with continues to grow. One such challenge involves the logging system. At…
阅读更多...
Workbox-Window v4.x 中文版

Workbox-Window v4.x 中文版

Workbox 目前发了一个大版本&#xff0c;从 v3.x 到了 v4.x&#xff0c;变化有挺大的&#xff0c;下面是在 window 环境下的模块。 什么是 workbox-window? workbox-window 包是一组模块&#xff0c;用于在 window 上下文中运行&#xff0c;也就是说&#xff0c;在你的网页内…
阅读更多...
最新文章

Copyright @ 2022~2023