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>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/anime-min.js"></script>
    <script>
        new Vue({
          el: "#main",
          data() {
            return {
              numWaves: 3,
              waveShapes: [
                {
                  d:
                    "M0,96L48,90.7C96,85,192,75,288,85.3C384,96,480,128,576,154.7C672,181,768,203,864,192C960,181,1056,139,1152,117.3C1248,96,1344,96,1392,96L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
                },
                {
                  d:
                    "M0,256L48,256C96,256,192,256,288,229.3C384,203,480,149,576,149.3C672,149,768,203,864,229.3C960,256,1056,256,1152,250.7C1248,245,1344,235,1392,22.........完整代码请登录后点击上方下载按钮下载查看