tailwind+vue实现水球波纹动画效果代码-html代码-BFW代码库

tailwind+vue实现水球波纹动画效果代码

代码语言：html

所属分类：动画

代码描述：tailwind+vue实现水球波纹动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tailwind.2.2.7.css">

    <style>
        .clip-circle {
          clip-path: circle(50% at 50% 50%);
        }
    </style>



</head>

<body>
    <div id="main" class="flex flex-wrap content-center min-h-screen">
        <div class="group hover:bg-blue-50 clip-circle relative w-64 h-64 mx-auto transition-colors duration-1000 bg-blue-200">
            <div v-for="index in numWaves" :key="index" class="h-1/4 absolute w-full" :class="index === 1 ? 'top-1/4' : index === 2 ? 'top-2/4' : 'top-3/4'">
                <svg id="wave" class="transition-colors duration-1000" :class="
            index === 1
              ? 'text-blue-300 group-hover:text-blue-200'
              : index === 2
              ? 'text-blue-400 group-hover:text-blue-200'
              : 'text-blue-500 group-hover:text-blue-200'
          " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <path :class="'loop-alternate-infinity' + index" fill="currentColor" fill-opacity="1" :d="waveShapes[index - 1].d" />
      </svg>
                <div class="flex h-16 -mt-0.5 transition-colors duration-1000" :class="
            index === 1
              ? 'bg-blue-300 group-hover:bg-blue-200'
              : index === 2
              ? 'bg-blue-400 group-hover:bg-blue-200'
              : 'bg-blue-500 group-hover:bg-blue-200'
          " />
            </div>
        </div>
    </div>
    <s.........完整代码请登录后点击上方下载按钮下载查看