十六种炫酷纯css加载动画（一）

个好的开篇，会给你这个项目增加不少分值。

有没有遇到过打开页面加载一段时间，页面内容才加载出来。在等待加载的过程中页面却是空白页，给用户的体验特别不好，会让项目降一个档次。下面的十六种炫酷炸裂的css加载动画，会让你在等待的过程中，体验视觉盛宴，给用户不一般的加载体验，对，就是纯css3的炫酷加载动画，请看效果！

码字不易，且行且珍惜。

加载1

css源码

.title{
 width: 100%;
 text-align: center;
 margin:60px 0;
 font-size: 18px;
 color: #999;
}
.loadingOne{
 width: 80px;
 height: 40px;
 margin: 0 auto;
}
.loadingOne span{
 display: inline-block;
 width: 8px;
 height: 100%;
 border-radius: 4px;
 background: lightgreen;
 -webkit-animation: load 1s ease infinite;
 animation: load 1s ease infinite;
}
@-webkit-keyframes load{
 0%,100%{
 height: 40px;
 background: lightgreen;
 }
 50%{
 height: 70px;
 margin: -15px 0;
 background: lightblue;
 }
}
.loadingOne span:nth-child(2){
 -webkit-animation-delay:0.2s;
 animation-delay:0.2s;
}
.loadingOne span:nth-child(3){
 -webkit-animation-delay:0.4s;
 animation-delay:0.4s;
}
.loadingOne span:nth-child(4){
 -webkit-animation-delay:0.6s;
 animation-delay:0.6s;
}
.loadingOne span:nth-child(5){
 -webkit-animation-delay:0.8s;
 animation-delay:0.8s;
}

html源码

<div class="loadingOne">
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>
<p class="title">[加载1]</p>

加载2

css源码

.loadingTwo{
 width: 150px;
 height: 4px;
 border-radius: 2px;
 margin: 0 auto;
 margin-top:100px;
 position: relative;
 background: lightgreen;
 -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;
 animation: changeBgColor 1.04s ease-in infinite alternate;
}
.loadingTwo span{
 display: inline-block;
 width: 16px;
 height: 16px;
 border-radius: 50%;
 background: lightgreen;
 position: absolute;
 margin-top: -7px;
 margin-left:-8px;
 -webkit-animation: changePosition 1.04s ease-in infinite alternate;
 animation: changePosition 1.04s ease-in infinite alternate;
}
@-webkit-keyframes changeBgColor{
 0%{
 background: lightgreen;
 }
 100%{
 background: lightblue;
 }
}
@-webkit-keyframes changePosition{
 0%{
 background: lightgreen;
 }
 100%{
 margin-left: 142px;
 background: lightblue;
 }
}

html源码

<div class="loadingTwo">
 <span></span>
</div>

加载3

css源码

.loadingThree{
 width: 150px;
 height: 15px;
 margin: 0 auto;
 margin-top:100px;
}
.loadingThree span{
 display: inline-block;
 width: 15px;
 height: 100%;
 margin-right: 5px;
 border-radius: 50%;
 background: lightgreen;
 -webkit-animation: load 1.04s ease infinite;
}
.loadingThree span:last-child{
 margin-right: 0px;
}
@-webkit-keyframes load{
 0%{
 opacity: 1;
 }
 100%{
 opacity: 0;
 }
}
.loadingThree span:nth-child(1){
 -webkit-animation-delay:0.13s;
}
.loadingThree span:nth-child(2){
 -webkit-animation-delay:0.26s;
}
.loadingThree span:nth-child(3){
 -webkit-animation-delay:0.39s;
}
.loadingThree span:nth-child(4){
 -webkit-animation-delay:0.52s;
}
.loadingThree span:nth-child(5){
 -webkit-animation-delay:0.65s;
}

html源码

<div class="loadingThree">
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>

加载4

css源码

.loadingFour{
 width: 150px;
 height: 15px;
 margin: 0 auto;
 margin-top:100px;
 text-align: center;
 }
 .loadingFour span{
 display: inline-block;
 width: 15px;
 height: 100%;
 margin-right: 5px;
 background: lightgreen;
 -webkit-animation: load 1.04s ease infinite;
 }
 .loadingFour span:last-child{
 margin-right: 0px;
 }
 @-webkit-keyframes load{
 0%{
 opacity: 1;
 }
 100%{
 opacity: 0;
 }
 }
 .loadingFour span:nth-child(1){
 -webkit-animation-delay:0.13s;
 }
 .loadingFour span:nth-child(2){
 -webkit-animation-delay:0.26s;
 }
 .loadingFour span:nth-child(3){
 -webkit-animation-delay:0.39s;
 }
 .loadingFour span:nth-child(4){
 -webkit-animation-delay:0.52s;
 }
 .loadingFour span:nth-child(5){
 -webkit-animation-delay:0.65s;
 }.loadingTwo{
 width: 150px;
 height: 4px;
 border-radius: 2px;
 margin: 0 auto;
 margin-top:100px;
 position: relative;
 background: lightgreen;
 -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;
 animation: changeBgColor 1.04s ease-in infinite alternate;
}
.loadingTwo span{
 display: inline-block;
 width: 16px;
 height: 16px;
 border-radius: 50%;
 background: lightgreen;
 position: absolute;
 margin-top: -7px;
 margin-left:-8px;
 -webkit-animation: changePosition 1.04s ease-in infinite alternate;
 animation: changePosition 1.04s ease-in infinite alternate;
}
@-webkit-keyframes changeBgColor{
 0%{
 background: lightgreen;
 }
 100%{
 background: lightblue;
 }
}
@-webkit-keyframes changePosition{
 0%{
 background: lightgreen;
 }
 100%{
 margin-left: 142px;
 background: lightblue;
 }
}

html源码

<div class="loadingFour">
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>

加载5

css源码

.loadingFive{
 width: 150px;
 height: 15px;
 margin: 0 auto;
 margin-top:100px;
}
.loadingFive span{
 display: inline-block;
 width: 15px;
 height: 100%;
 margin-right: 5px;
 background: lightgreen;
 -webkit-transform-origin: right bottom;
 -webkit-animation: load 1s ease infinite;
}
.loadingFive span:last-child{
 margin-right: 0px;
}
@-webkit-keyframes load{
 0%{
 opacity: 1;
 }
 100%{
 opacity: 0;
 -webkit-transform: rotate(90deg);
 }
}
.loadingFive span:nth-child(1){
 -webkit-animation-delay:0.13s;
}
.loadingFive span:nth-child(2){
 -webkit-animation-delay:0.26s;
}
.loadingFive span:nth-child(3){
 -webkit-animation-delay:0.39s;
}
.loadingFive span:nth-child(4){
 -webkit-animation-delay:0.52s;
}
.loadingFive span:nth-child(5){
 -webkit-animation-delay:0.65s;
}.loadingTwo{
 width: 150px;
 height: 4px;
 border-radius: 2px;
 margin: 0 auto;
 margin-top:100px;
 position: relative;
 background: lightgreen;
 -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;
 animation: changeBgColor 1.04s ease-in infinite alternate;
}
.loadingTwo span{
 display: inline-block;
 width: 16px;
 height: 16px;
 border-radius: 50%;
 background: lightgreen;
 position: absolute;
 margin-top: -7px;
 margin-left:-8px;
 -webkit-animation: changePosition 1.04s ease-in infinite alternate;
 animation: changePosition 1.04s ease-in infinite alternate;
}
@-webkit-keyframes changeBgColor{
 0%{
 background: lightgreen;
 }
 100%{
 background: lightblue;
 }
}
@-webkit-keyframes changePosition{
 0%{
 background: lightgreen;
 }
 100%{
 margin-left: 142px;
 background: lightblue;
 }
}.loadingFive{
 width: 150px;
 height: 15px;
 margin: 0 auto;
 margin-top:100px;
}
.loadingFive span{
 display: inline-block;
 width: 15px;
 height: 100%;
 margin-right: 5px;
 background: lightgreen;
 -webkit-transform-origin: right bottom;
 -webkit-animation: load 1s ease infinite;
}
.loadingFive span:last-child{
 margin-right: 0px;
}
@-webkit-keyframes load{
 0%{
 opacity: 1;
 }
 100%{
 opacity: 0;
 -webkit-transform: rotate(90deg);
 }
}
.loadingFive span:nth-child(1){
 -webkit-animation-delay:0.13s;
}
.loadingFive span:nth-child(2){
 -webkit-animation-delay:0.26s;
}
.loadingFive span:nth-child(3){
 -webkit-animation-delay:0.39s;
}
.loadingFive span:nth-child(4){
 -webkit-animation-delay:0.52s;
}
.loadingFive span:nth-child(5){
 -webkit-animation-delay:0.65s;
}

html源码

<div class="loadingSix">
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>

加载6

css源码

.loadingSeven{
 width: 80px;
 height: 40px;
 margin: 0 auto;
 margin-top:100px;
}
.loadingSeven span{
 display: inline-block;
 width: 8px;
 height: 100%;
 border-radius: 4px;
 background: lightgreen;
 -webkit-animation: loadsaven 1.04s ease infinite;
}
@-webkit-keyframes loadsaven{
 0%,100%{
 height: 40px;
 background: lightgreen;
 }
 50%{
 height: 60px;
 margin-top: -20px;
 background: lightblue;
 }
}
.loadingSeven span:nth-child(2){
 -webkit-animation-delay:0.13s;
}
.loadingSeven span:nth-child(3){
 -webkit-animation-delay:0.26s;
}
.loadingSeven span:nth-child(4){
 -webkit-animation-delay:0.39s;
}
.loadingSeven span:nth-child(5){
 -webkit-animation-delay:0.52s;
}

html源码

<div class="loadingSeven">
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>

加载7

css源码

.loadingSeven{
 width: 80px;
 height: 40px;
 margin: 0 auto;
 margin-top:100px;
}
.loadingSeven span{
 display: inline-block;
 width: 8px;
 height: 100%;
 border-radius: 4px;
 background: lightgreen;
 -webkit-animation: loadsaven 1.04s ease infinite;
}
@-webkit-keyframes loadsaven{
 0%,100%{
 height: 40px;
 background: lightgreen;
 }
 50%{
 height: 60px;
 margin-top: -20px;
 background: lightblue;
 }
}
.loadingSeven span:nth-child(2){
 -webkit-animation-delay:0.13s;
}
.loadingSeven span:nth-child(3){
 -webkit-animation-delay:0.26s;
}
.loadingSeven span:nth-child(4){
 -webkit-animation-delay:0.39s;
}
.loadingSeven span:nth-child(5){
 -webkit-animation-delay:0.52s;
}

html源码

<div class="loadingSeven">
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>

加载8

css源码

.loadingEight{
 width: 80px;
 height: 80px;
 border-radius: 50%;
 margin: 0 auto;
 margin-top:100px;
 position: relative;
 border:5px solid lightgreen;
 -webkit-animation: turn 2s linear infinite;
}
.loadingEight span{
 display: inline-block;
 width: 30px;
 height: 30px;
 border-radius: 50%;
 background: lightgreen;
 position: absolute;
 left: 50%;
 margin-top: -15px;
 margin-left: -15px;
 -webkit-animation: changeBgColor 2s linear infinite;
}
@-webkit-keyframes changeBgColor{
 0%{
 background: lightgreen;
 }
 100%{
 background: lightblue;
 }
}
@-webkit-keyframes turn{
 0%{
 -webkit-transform: rotate(0deg);
 border-color: lightgreen;
 }
 100%{
 -webkit-transform: rotate(360deg);
 border-color: lightblue;
 }
}

html源码

<div class="loadingEight">
 <span></span>
</div>

搬你想搬，盖你所需，码字不易，且行且珍惜！

用 HTML 和 CSS 制作 LOGO 动画要比以前更容易，通过使用最新的 JavaScript 库也能够使网页动画制作的更加精良。

在本文中，我们将与大家分享 10 个让人印象深刻的世界知名品牌与未知实体的自定义 LOGO 动画示例。一起来 Enjoy 吧！

1. Flowers SVG

SVG 动画作为网上最热门的动画趋势之一，备受大家的关注。而这个花的 LOGO 动画便是一个很好的 SVG 动画示例。

我们可以看到，此 LOGO 的图标和文字在<svg>标签内编写，通过 CSS 来控制动画，并可以自动的完成页面的加载。当然，需要一些 SVG 特定的 CSS 属性支持，例如stroke-dashoffset（译者：表示虚线的起始偏移），它会按顺序来推动轮廓的运动，进而实现了精美的动画效果。

项目地址：https://codepen.io/flwrs/pen/gLrygN

2. Carbon LDP

Carbon LDP 的 LOGO 动画相当的复杂。但是开发者 David McFeders 通过 CSS/Compass 实现了 Carbon 的 LOGO 动画，从而也提升了它的逼格。

无论是 LOGO 的大小，还是动画的速度都很容易设置。它由纯 CSS 实现，并保持着无限的循环。虽然，LOGO 的字母是一张 PNG 图片，但你也可以随时利用自己设计的字体进行逆向工程。

项目地址：https://codepen.io/MiguelAraCo/pen/QbZqoQ

3. Binary Lab

Binary Lab 的 LOGO 动画同样是本文中比较复杂的动画效果之一。我们可以看到它的效果：从烧瓶里拉出的数字，在 LOGO 的上方不断的消失。

动画效果是由 CSS 控制的。同时，这个作品依赖了 TweenMax 库来添加重复的数字，并完成自定义的 alpha 转换。作者很有创意的利用 CSS 与 JS 实现了这个酷炫的 Web 动画效果。

项目地址：https://codepen.io/iconjunkie/pen/vLEaNZ

4. Pure CSS3 Stack Overflow

Stack Overflow 的 LOGO 是我最喜欢的 LOGO 之一，因为它的设计不仅简单，而且易识别。而这个作品仅用 CSS3 将 Stack Overflow 的 LOGO 进行了动画效果的实现。

这是迄今为止我看到的最令人印象深刻的纯 CSS 动画之一。最终的展现也与官方的 LOGO 很搭，同时在主流浏览器中动画都可以流畅的运行。相信，任何喜欢 CSS / SCSS 动画的朋友都会喜欢上这个作品。

项目地址：https://codepen.io/lindell/pen/mEVgJP

5. Monster Energy Logos

这个作品是由 Tim Pietrusky 利用 SVG 和均匀的 CSS 转换实现的怪物能量 LOGO 系列动画。如果你也打算在 LOGO 上实现淡入淡出的特效，就可以复制他的代码来学习。

它是一款纯 CSS 实现的动画，所有的动画时间都是由 SCSS 直接进行调控。同时，你也可以通过更改变量来调节动画的速度，淡化颜色。

项目地址：https://codepen.io/TimPietrusky/pen/vKuja

6. Subvisual

Subvisual 团队拥有非常独特的 LOGO，而开发者 Miguel Palhas 则赋予了它酷炫的动画效果。你会发现构成它的动画效果有两个因素，即 LOGO 的文字和“ S ”形图标。

作品是基于 SVG 元素构成的，也使操纵更简单。虽然作品中的大多数动画都是基于 CSS 编写的，但它也依赖 JavaScript 库：TweenLite。同时，这个作品可以根据用户的操作来重复或触发动画效果。（悬停、点击等）

项目地址：https://codepen.io/naps62/pen/eNMvpQ

7. Pixel Logo Animation

通过使用免费的像素字体，任何开发人员都可以制作出自定义的像素动画。而这个作品就是由 CodePen 的用户 Khaosmuhaha 所制作的。

他通过 HTML Canvas 元素进行纯文本的操作，动画效果则是由 CSS3 的 animation 属性进行驱动，而 jQuery 则控制了全部。所以，我们所见的连续像素动画就这样实现了。

显然，这是一个利用 Canvas 元素与 webfont 构成的炫酷的作品。

项目地址：https://codepen.io/Khaosmuhaha/pen/MYzRGz

8. Alex Aloia LOGO

如果你正在寻找一个真正复杂的 LOGO 动画，可以看看开发者 Alex Aloia 制作的这个示例。在作品中，作者使用了他的名字作为品牌名称，并将一系列复杂的 SVG 形状通过绘图的动画效果展现出来。

作品的整体效果只通过 CSS 来实现是不太可能的，还需要一些 JS 库（DrawSVG 和更流行的 D3.js）的支持。但是，利用开源库来实现这种独一无二的动画，还是非常有趣的。

项目地址：https://codepen.io/tripl3inf/pen/QwrEMY

9. Bayleys

Bayleys 的 LOGO 动画的选择，有些令人费解。但 LOGO 厚实的边缘使重制变得易如反掌。开发者 Rafael Contreras 仅通过 38 行代码便实现了动画效果。

LOGO 是基于 SVG 标签制作的，动画效果则是操纵相应的标签来实现。而在不同的方向移动的众多 LOGO 元素，使动画令人着迷。

项目地址：https://codepen.io/rafita/pen/aNyRgv

10. Nintendo Switch

这是来自任天堂最新款游戏机的一个 LOGO 动画。而开发者 Koto Furumiya 在 CodePen 上实现了它们广告片中的动画效果。

Koto 使用 SVG 重制了任天堂 Switch 的 LOGO，并用 CSS 实现了它的动画效果。你会相信这个动画只需要 50 行的 CSS 代码吗？

另外，不得不提这个动画效果确实很逼真。强有力的下推与反弹回升效果，确实与任天堂 Switch 的开机动画相吻合。

项目地址：https://codepen.io/kotofurumiya/pen/VPmNrR

最后

今天分享的所有示例都是免费与开源的，希望你能将它们应用在你自己的项目上。同时，也希望你能喜欢这些 Demos。如果你正在寻找更多关于 CSS 动画的示例，也可以了解下这个合辑。

感谢你的阅读。

注：

本文版权归原作者所有，仅用于学习与交流。
如需转载译文，烦请按下方注明出处信息，谢谢！

英文原文：10 Amazing Examples of CSS & JavaScript Animated Logos
作者：Jake Rocheleau
译者：IT程序狮
译文地址：http://www.jianshu.com/p/b204e854a942

GitHub精选》是我们分享Github中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个使用纯CSS实现动画加载效果的项目——SpinKit。

SpinKit通过使用transform和opacity属性实现了包括方块翻转、圆点旋转、圆环缩放和九宫格渐变等10余种动画加载的效果。

部分效果代码：

方块折叠

<div class="sk-folding-cube">
  <div class="sk-cube1 sk-cube"></div>
  <div class="sk-cube2 sk-cube"></div>
  <div class="sk-cube4 sk-cube"></div>
  <div class="sk-cube3 sk-cube"></div>
</div>

.sk-folding-cube {
  margin: 20px auto;
  width: 40px;
  height: 40px;
  position: relative;
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
}

.sk-folding-cube .sk-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1); 
}
.sk-folding-cube .sk-cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #333;
  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
          animation: sk-foldCubeAngle 2.4s infinite linear both;
  -webkit-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
          transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
  -webkit-transform: scale(1.1) rotateZ(180deg);
          transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
          transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube2:before {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s; 
}
.sk-folding-cube .sk-cube4:before {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
@-webkit-keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  } 
}

@keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  }
}

三点渐变

<div class="spinner">
  <div class="bounce1"></div>
  <div class="bounce2"></div>
  <div class="bounce3"></div>
</div>

.spinner {
  margin: 100px auto 0;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #333;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

其他效果：

GitHub: https://github.com/tobiasahlin/SpinKit

在线咨询

上一篇：必看！用CSS命令绘制常用小图标，手把手教你操作
下一篇：CSS基础知识(一) CSS入门

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

十六种炫酷纯css加载动画（一）

1. Flowers SVG

2. Carbon LDP

3. Binary Lab

4. Pure CSS3 Stack Overflow

5. Monster Energy Logos

6. Subvisual

7. Pixel Logo Animation

8. Alex Aloia LOGO

9. Bayleys

10. Nintendo Switch

最后

您的项目需求