整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

十六种炫酷纯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 动画的示例,也可以了解下这个合辑。


感谢你的阅读。

注:

  1. 本文版权归原作者所有,仅用于学习与交流。

  2. 如需转载译文,烦请按下方注明出处信息,谢谢!

英文原文: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