web前端开发

您现在的位置是:首页>前端开发

CSS

如何使用CSS创建转盘效果?

admin:杨小二时间:2020-07-09 19:08:26前端开发0次
旋转圆盘效果也称为重叠圆盘效果,是一种幻觉效果,可以在网站上用于各种目的。它可以用于从装填器标签到给用户造成幻觉的任何事情。之所以称其为重叠光盘,是因为有许多重叠的光盘围绕一个点旋转。

方法:方法是先创建所有光盘,然后使用关键帧和第n个子属性旋转它们。

HTML代码:在本节中,我们创建了一个无序列表(ul),其中包含list-items(li)。列表项的数量等于光盘的数量。

旋转圆盘效果也称为重叠圆盘效果,是一种幻觉效果,可以在网站上用于各种目的。它可以用于从装填器标签到给用户造成幻觉的任何事情。之所以称其为重叠光盘,是因为有许多重叠的光盘围绕一个点旋转。

方法:方法是先创建所有光盘,然后使用关键帧和第n个子属性旋转它们。

HTML代码:

在本节中,我们创建了一个无序列表(ul),其中包含list-items(li)。列表项的数量等于光盘的数量。

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content=

        "width=device-width, initial-scale=1.0" />

    <title>Rotating Disc Effect</title>

 </head>

  <body>

    <ul>

      <li></li>

      <li></li>

      <li></li>

      <li></li>

      <li></li>

      <li></li>

      <li></li>

      <li></li>

    </ul>

  </body>

</html>

CSS代码:

对于CSS,请按照给定的步骤进行操作。

第一件事是使用border-radius属性创建光盘。将边界半径设置为50%以创建一个完美的圆。 现在,使用带有标识符的动画,以便以后与关键帧一起使用。我们已经使用动画作为我们的标识符。 现在,使用关键帧旋转每个帧的光盘。在这里,我们对第一帧使用0deg,对第二帧使用359deg。 现在,使用第n个子属性对每个光盘应用第1个延迟。它有助于延迟旋转每张光盘,这是造成幻觉效果的原因。

提示:您可以为每个光盘应用不同的不透明度颜色,以使其看起来更具吸引力。

<style>

    ul {

        margin: 0;

        padding: 0;

        position: absolute;

        left: 40%;

        top: 20%;

    }

  

    ul li {

        list-style: none;

        width: 200px;

        height: 200px;

        position: absolute;

        top: 0;

        border-radius: 50%;

        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

        animation: animate 7s linear infinite;

        transform-origin: bottom center;

    }

  

    @keyframes animate {

        0% {

            transform: rotate(0deg);

        }

  

        100% {

            transform: rotate(359deg);

        }

    }

  

    ul li:nth-child(1) {

        animation-delay: 0s;

    }

  

    ul li:nth-child(2) {

        animation-delay: 1s;

    }

  

    ul li:nth-child(3) {

        animation-delay: 2s;

    }

  

    ul li:nth-child(4) {

        animation-delay: 3s;

    }

  

    ul li:nth-child(5) {

        animation-delay: 4s;

    }

  

    ul li:nth-child(6) {

        animation-delay: 5s;

    }

  

    ul li:nth-child(7) {

        animation-delay: 6s;

    }

  

    ul li:nth-child(7) {

        animation-delay: 7s;

    }

</style>

完整代码:

它是以上两个代码部分的组合。

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content=

        "width=device-width, initial-scale=1.0" />

    <title>Rotating Disc Effect</title>

    <style>

      ul {

        margin: 0;

        padding: 0;

        position: absolute;

        left: 40%;

        top: 20%;

      }

  

      ul li {

        list-style: none;

        width: 200px;

        height: 200px;

        position: absolute;

        top: 0;

        border-radius: 50%;

        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

        animation: animate 7s linear infinite;

        transform-origin: bottom center;

      }

  

      @keyframes animate {

        0% {

          transform: rotate(0deg);

        }

        100% {

          transform: rotate(359deg);

        }

      }

  

      ul li:nth-child(1) {

        animation-delay: 0s;

      }

      ul li:nth-child(2) {

        animation-delay: 1s;

      }

      ul li:nth-child(3) {

        animation-delay: 2s;

      }

      ul li:nth-child(4) {

        animation-delay: 3s;

      }

      ul li:nth-child(5) {

        animation-delay: 4s;

      }

      ul li:nth-child(6) {

        animation-delay: 5s;

      }

      ul li:nth-child(7) {

        animation-delay: 6s;

      }

      ul li:nth-child(7) {

        animation-delay: 7s;

      }

    </style>

  </head>

  <body>

    <ul>

      <li></li>

      <li></li>

      <li></li>

      <li></li>

      <li></li>

      <li></li>

      <li></li>

      <li></li>

    </ul>

  </body>

</html>

输出:

平面设计