css螺旋式摆尾动画效果代码-html代码-BFW代码库

css螺旋式摆尾动画效果代码

代码语言：html

所属分类：动画

代码描述：css螺旋式摆尾动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        .container {
          position: absolute;
          inset: 0;
          background: #0ecabb;
          overflow: hidden;
        }
        .container .leaf {
          height: 90%;
          width: 90%;
          transform-origin: 50% 100%;
          background: #fefefe;
          border-radius: 100px;
          animation-name: swing;
          animation-duration: 3s;
          animation-iteration-count: infinite;
          animation-direction: alternate;
          animation-timing-function: ease-in-out;
        }
        .container .leaf.parent {
          height: 50px;
          width: 20px;
          transform: translate(-50%, -50%);
          left: 50%;
          top: 80%;
          position: absolute;
        }
        @keyframes swing {
          from {
            transform: translateY(-90%) rotate(-50deg);
          }
          to {
            transform: translateY(-90%) rotate(50deg);
          }
        }
    </style>



</head>

<body translate="no">
    <div class="container">
        <div class="leaf parent">
            <div class="leaf">
                <div class="leaf">
                    <div class="leaf">
                        <div class="leaf">
                            <div class="leaf">
                                <div class="leaf">
                                    <div class="leaf">
                                        <div class="leaf">
                                            <div class="leaf">
                                              .........完整代码请登录后点击上方下载按钮下载查看