CSS动画实例:旋转的同心圆

      设页面中有<div class=” wrap”></div>,若定义.wrap的样式规则为:

  .wrap

  {

    width: 200px;

    height: 100px;

    top:100px;

    left:100px;

    position: absolute;

    background-color:#ff0;

    border:4px solid #f00;

    transform-origin: 50% 100%;

    animation: spin 2s cubic-bezier(.175, .885, .32, 1.275) infinite;

  }

定义关键帧spin,使矩形绕底部中点旋转起来

  @keyframes spin

  {

    0%,15% { transform: rotate(0); }

    100%   { transform: rotate(360deg);  }

  }

可在页面中呈现如图1所示的动画。

CSS动画实例:旋转的同心圆 

图1  矩形绕底部中点旋转

      在页面中放置5个<div class=” wrap”></div>,使这5个矩形各自按给定的延迟进行旋转。编写如下的HTML文件。

<!DOCTYPE html>

<html>

<title>旋转的矩形</title>

<head>

<style>

  .container

  { 

    position: relative;

    margin: 50px auto;

    width: 400px;

    height:400px;

    background:#d8d8d8;

    overflow:hidden;

    border: 4px solid rgba(255, 0, 0, 0.9);

    border-radius: 10%;

  }

  .wrap

  {

    width: 200px;

    height: 100px;

    top:100px;

    left:100px;

    position: absolute;

    background-color:#ff0;

    border:4px solid #f00;

    transform-origin: 50% 100%;

    animation: spin 2s cubic-bezier(.175, .885, .32, 1.275) infinite;

  }

  .wrap:nth-child(1)

  {

      animation-delay: -0.05s;

  }

  .wrap:nth-child(2)

  {

      animation-delay: -0.1s;

  }

  .wrap:nth-child(3)

  {

      animation-delay: -0.15s;

  }

  .wrap:nth-child(4)

  {

      animation-delay: -0.2s;

  }

  .wrap:nth-child(5)

  {

      animation-delay: -0.25s;

  }

  @keyframes spin

  {

    0%,15% { transform: rotate(0); }

    100%   { transform: rotate(360deg);  }

  }

</style>

</head>

<body>

<div class="container">

  <div class="wrap"></div>

  <div class="wrap"></div>

  <div class="wrap"></div>

  <div class="wrap"></div>

  <div class="wrap"></div>

</div>

</body>

</html>

      在浏览器中打开包含这段HTML代码的html文件,可以呈现出如图2所示的动画效果。

 CSS动画实例:旋转的同心圆

图2  旋转的5个矩形

      在图2的5个矩形中依次放置5个圆,每个矩形中放置一个圆,每个圆的大小依次递减,使得5个圆同圆心,小圆完全嵌套在大圆内。取消原来矩形的边框和背景色设置。

编写如下的HTML文件。

<!DOCTYPE html>

<html>

<title>旋转的同心圆</title>

<head>

<style>

  .container

  { 

    position: relative;

    margin: 50px auto;

    width: 400px;

    height:400px;

    background:#d8d8d8;

    overflow:hidden;

    border: 4px solid rgba(255, 0, 0, 0.9);

    border-radius: 10%;

  }

  .wrap

  {

    width: 200px;

    height: 105px;

    top:100px;

    left:100px;

    position: absolute;

    overflow: hidden;

    transform-origin: 50% 100%;

    animation: spin 2s cubic-bezier(.175, .885, .32, 1.275) infinite;

  }

  .wrap:nth-child(1)

  {

      animation-delay: -0.05s;

  }

  .wrap:nth-child(2)

  {

      animation-delay: -0.1s;

  }

  .wrap:nth-child(3)

  {

      animation-delay: -0.15s;

  }

  .wrap:nth-child(4)

  {

      animation-delay: -0.2s;

  }

  .wrap:nth-child(5)

  {

      animation-delay: -0.25s;

  }

  @keyframes spin

  {

    0%,15% { transform: rotate(0); }

    100%   { transform: rotate(360deg);  }

  }

  .circle

  {

    border: 4px solid transparent;

    border-radius: 100%;

    height: 100px;

    left: 0;

    margin: 0 auto;

    position: absolute;

    right: 0;

    top: 0;

    width: 100px;

  }

  .wrap:nth-child(1) .circle

  {

    border-color: hsl(0, 80%, 60%);

    height: 90px;

    width: 90px;

    top: 7px;

  }

  .wrap:nth-child(2) .circle

  {

    border-color: hsl(60, 80%, 60%);

    height: 76px;

    width: 76px;

    top: 14px;

  }

  .wrap:nth-child(3) .circle

  {

    border-color: hsl(120, 80%, 60%);

    height: 62px;

    width: 62px;

    top: 21px;

  }

  .wrap:nth-child(4) .circle

  {

    border-color: hsl(180, 80%, 60%);

    height: 48px;

    width: 48px;

    top: 28px;

  }

  .wrap:nth-child(5) .circle

  {

    border-color: hsl(240, 80%, 60%);

    height: 34px;

    width: 34px;

    top: 35px;

  }

</style>

</head>

<body>

<div class="container">

  <div class="wrap"><div class="circle"></div></div>

  <div class="wrap"><div class="circle"></div></div>

  <div class="wrap"><div class="circle"></div></div>

  <div class="wrap"><div class="circle"></div></div>

  <div class="wrap"><div class="circle"></div></div>

</div>

</body>

</html>

      在浏览器中打开包含这段HTML代码的html文件,可以呈现出如图3所示的动画效果。

 CSS动画实例:旋转的同心圆

图3  旋转的同心圆

      将呈现图3动画效果的HTML文件中,矩形的高度修改为50px(原来的一半),此时各个同心圆被裁掉了一大半(超出矩形的部分被隐藏),只剩下5条弧段。在浏览器中呈现出如图4所示的动画效果。这个动画效果可以作为一个Loading动画。

CSS动画实例:旋转的同心圆 

图4  旋转的5条弧段

上一篇:ES6基础与解构赋值(高颜值弹框小案例!)


下一篇:CSS flex 布局属性详解