CSS3动画预载动画效果实例有什么?

CSS3动画预载动画效果实例有什么?

实现如图所示的动画效果:

CSS3动画预载动画效果实例有什么?

预载动画一:双旋圈

在两个不同方向旋转的圆圈。我们对内圈的转速定义了一个CSS代码,即内圈比外圈的速率快2倍。

实现如图所示:

CSS3动画预载动画效果实例有什么?

html代码:

<body style="background: #ffb83c;">
  <div id="preloader-1">
    <span></span>
    <span></span>
  </div>
</body>

css代码:

#preloader-1{
  position: relative;
}
#preloader-1 span{
  position: absolute;
  border:8px solid #fff;
  border-top:8px solid transparent;
  border-radius: 999px;
}
#preloader-1 span:nth-child(1){
  width:80px;
  height: 80px;
  animation: spin-1 2s infinite linear;
}
#preloader-1 span:nth-child(2){
  top:20px;
  left:20px;
  width:40px;
  height: 40px;
  animation: spin-2 1s infinite linear;
}
@keyframes spin-1{
  0%{transform: rotate(360deg); opacity: 1.0;}
  50%{transform: rotate(180deg); opacity: 0.5;}
  100%{transform: rotate(0deg);opacity: 0;}
}
@keyframes spin-2{
  0%{transform: rotate(0deg); opacity: 0.5;}
  50%{transform: rotate(180deg); opacity: 1;}
  100%{transform: rotate(360deg);opacity: 0.5;}
}

预载动画二:交错圈

两个圆圈进行横向交错来回移动。每个圆圈都设置了单独的反向移动动画参数。

效果:

CSS3动画预载动画效果实例有什么?

html代码:

<body style="background: #4ad3b4;">
  <div id="preloader-2">
    <span></span>
    <span></span>
  </div>
</body>

css代码:

#preloader-2{
  position: relative;
}
#preloader-2 span{
  position: absolute;
  width:30px;
  height: 30px;
  background: #fff;
  border-radius: 999px;
}
#preloader-2 span:nth-child(1){
  animation: cross-1 1.5s infinite linear;
}
#preloader-2 span:nth-child(2){
  animation: cross-2 1.5s infinite linear;
}
@keyframes cross-1{
  0%{transform: translateX(0); opacity: 0.5;}
  50%{transform: translateX(80px); opacity: 1;}
  100%{transform: translateX(0);opacity: 0.5;}
}
@keyframes cross-2{
  0%{transform: translateX(80px); opacity: 0.5;}
  50%{transform: translateX(0); opacity: 1;}
  100%{transform: translateX(80px);opacity: 0.5;}
}

预载动画三:旋转圈

效果:

CSS3动画预载动画效果实例有什么?

html代码:

<body style="background: #ab69d9;">
  <div id="preloader-3">
    <span></span>
  </div>
</body>

css代码:

#preloader-3{
  position: relative;
  width:80px;
  height: 80px;
  border:4px solid rgba(255,255,255,.25);
  border-radius: 999px;
  
}
#preloader-3 span{
  position: absolute;
  width:80px;
  height:80px;
  border:4px solid transparent;
  border-top:4px solid #fff;
  border-radius: 999px;
  top:-4px;
  left:-4px;
  animation: rotate 1s infinite linear;
}
@keyframes rotate{
  0%{transform: rotate(0deg);}
  100%{transform: rotate(360deg);}
}

预载动画四:跳动圈

这是一种墨西哥波浪纹的动画效果,通过设置不同圆圈之间的延迟参数来实现。

效果:

CSS3动画预载动画效果实例有什么?

html代码:

<body style="background: #c1d64a;">
  <div id="preloader-4">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</body>

css代码:

#preloader-4{
  position: relative;
}
#preloader-4 span{
  position:absolute;
  width:16px;
  height: 16px;
  border-radius: 999px;
  background: #fff;
  animation: bounce 1s infinite linear;
}
#preloader-4 span:nth-child(1){
  left:0;
  animation-delay: 0s;
}
#preloader-4 span:nth-child(2){
  left:20px;
  animation-delay: 0.25s;
}
#preloader-4 span:nth-child(3){
  left:40px;
  animation-delay: 0.5s;
}
#preloader-4 span:nth-child(4){
  left:60px;
  animation-delay: 0.75s;
}
#preloader-4 span:nth-child(5){
  left:80px;
  animation-delay: 1.0s;
}
@keyframes bounce{
  0%{transform: translateY(0px);opacity: 0.5;}
  50%{transform: translateY(-30px);opacity: 1.0;}
  100%{transform: translateY(0px);opacity: 0.5;}
}

预载动画五:雷达圈

一种雷达辐射效果,给3个span elements设置相同的淡入淡出效果,再予每个稍微延迟下即可实现。

效果:

CSS3动画预载动画效果实例有什么?

html代码:

<body style="background: #f9553f;">
  <div id="preloader-5">
    <span></span>
    <span></span>
    <span></span>
  </div>
</body>

css代码:

#preloader-5{
  position: relative;
}
#preloader-5 span{
  position:absolute;
  width:50px;
  height: 50px;
  border:5px solid #fff;
  border-radius: 999px;
  opacity: 0;
  animation: radar 2s infinite linear;
}
#preloader-5 span:nth-child(1){
  animation-delay: 0s;
}
#preloader-5 span:nth-child(2){
  
  animation-delay: 0.66s;
}
#preloader-5 span:nth-child(3){
  animation-delay: 1.33s;
}

@keyframes radar{
  0%{transform: scale(0);opacity: 0;}
  25%{transform: scale(0);opacity: 0.5;}
  50%{transform: scale(1);opacity: 1.0;}
  75%{transform: scale(1.5);opacity: 0.5;}
  100%{transform: scale(2);opacity: 0;}
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持路饭。