css-doodle实现九种盘中美食动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css-doodle实现九种盘中美食动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
* {
  box-sizing: border-box;
  margin: 0;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #F1E8E1;
}

main {
  position: relative;
  background-color: #F1E8E1;
  width: 100vmin;
  height: 100vmin;
  --gap: 4vmin;
  --size: 28vmin;
  overflow: hidden;
}

section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  padding: var(--gap);
  width: 100%;
  height: 100%;
}

css-doodle {
  width: var(--size);
  height: var(--size);
  border-radius: 100%;
  -webkit-animation: rotate 40s linear infinite;
          animation: rotate 40s linear infinite;
}

@-webkit-keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

  <script>
  window.console = window.console || function(t) {};
</script>

  
  
</head>

<body translate="no">
  <style>
  css-doodle {
    --1: (
      :doodle {
        flex: none;
        @grid: 1x30;
        background: #FF4C00;
        overflow: hidden;
      }
      @place-cell: center;
      ::before, ::after { transition: inherit; }
      @match (i >= 2) {
        z-index: @p(2, 3, 4);
        transition: 0.5s ease all;
      }
      @nth(1) {
        @size: 80%;
        background: radial-gradient(circle at 50% 50%, #fff calc(58% - 0.1vmin), #E386B3 calc(58% - 0.1vmin + 1px), #E386B3 calc(58% + 0.1vmin), #fff calc(58% + 0.1vmin + 1px));
        border-radius: 100%;
      }
      @match(i >= 2 && i <= 7) {
        @size: calc(3.2vmin * 1.4);
        transform: translate(@m2(@r(±160%))) rotate(@r(360deg));
        background-image: @doodle(
          @grid: 1x6 / 100% 100%;;
          @size: 10% 20%;
          position: absolute;
          top: 29%;
          left: 45%;
          background-color: #d5f2d6;
          border-radius: 100%;
          transform: rotate(calc(60deg * (@i + 1))) translate3d(0%, -40%, 0);
          transform-origin: 50% 100%;
        );
        background-color: #74c58d;
        border: 0.28vmin solid #006c61;
        border-radius: 100%;
      }
      @match(i > 7  && i <= 12) {
        @size: 7vmin;
        z-index: @p(3, 4);
        transform: translate(@m2(@r(±90%))) rotate(@r(360deg));
        background: radial-gradient(circle at 50% 50%, @stripe(transparent 60%, #fff));
        border: 0.28vmin solid #b24478;
        clip-path: inset(0 50% 0 0);
        border-radius: 100%;
      }
      @match(i > 12  && i <= 17) {
        @size: calc(3.1vmin * 1.3) calc(3.3vmin * 1.3);
        transform: translate(@m2(@r(±180%))) rotate(@r(360deg));
        background-color: #ff4c00;
        border-radius: 100%;
        ::before, ::after {
          content: "";
          position: absolute;
          top: 10%;
          left: calc(0.4vmin * 1.3);
          width: calc(2.3vmin * 1.3);
          height: calc(2.3vmin * 1.3);
          background-image: @doodle(
            @grid: 1x3 / 100% 100%;;
            @size: 12% 22%;
            position: absolute;
            top: 25%;
            left: 45%;
            background-color: #fce8e5;
            border-radius: 100%;
            transform: rotate(calc(60deg * (@i + 1) + 180deg)) translate3d(0%, -60%, 0);
            transform-origin: 50% 100%;
          );
          background-color: #ffa788;
          border-radius: 100%;
          clip-path: inset(0 0 50% 0);
        }
        ::after {
          top: 19%;
          transform: rotate(180deg);
        }
      }
      @match(i > 17  && i <= 27) {
        z-index: @p(1, 2);
        transform: translate(@m2(@r(±80%))) rotate(@r(360deg));
        @size: calc(6vmin * 1.2) calc(6vmin * 1.2);
        background-image: @doodle(
          @grid: 1x9 / 100% 100%;
          @size: 100% 100%;
          :container {
            --color: @p(#006c61, #2d996e, #74c58d);
            --color-1: @P;
          }
          position: absolute;
          @nth(1, 2, 3, 4, 5) {
            @size: 40%;
            background: @var(--color);
            border-radius: 100%;
          }
          @nth(1) {
            top: 0;
            left: 50%;
            transform: translateX(-50%);
          }
          @nth(2) {
            top: 28%;
            left: 15%;
          }
          @nth(3) {
            top: 28%;
            right: 15%;
          }
          @nth(4) {
            top: 56%;
            right: 5%;
          }
          @nth(5) {
            top: 56%;
            left: 5%;
          }
          @nth(6) {
            top: 50%;
            left: 50%;
            @size: 40% 46%;
            transform: translateX(-50%);
            background: @var(--color);
          }
          @nth(7) {
            @size: 0;
            left: 50%;
            bottom: 4%;
            transform: translateX(-50%);
            border-style: solid;
            border-width: 0 8vmin 75vmin;
            border-color: transparent transparent @var(--color-1) transparent;
          }
          @nth(8, 9) {
            @size: 0;
            border-style: solid;
            border-width: 0 7vmin 35vmin;
            border-color: transparent transparent @var(--color-1) transparent;
          }
          @nth(8) {
            left: 57%;
            bottom: 32%;
            transform: rotate(50deg);
          }
          @nth(9) {
            right: 57%;
            bottom: 16%;
            transform: rotate(-50deg);
          }
        );
      }
      @match(i > 27 && i < 34) {
        z-index: 10;
        @size: 1.4vmin;
        transform: translate(@m2(@r(±400%))) rotate(@r(360deg));
        background: #fff;
      }
    );
    --2: (
      :doodle {
        flex: none;
        @grid: 1x42;
        background: #FFa788;
        overflow: hidden;
      }
      @place-cell: center;
      ::before, ::after { transition: inherit; }
      @match (i >= 4) {
        transition: 0.5s ease all;
      }
      @nth(1) {
        @size: 80%;
        background: #545150;
        border-radius: 100%;

        ::after {
          content: "";
          @size: 100% 100%;
          @place-cell: center;
          background: #f2e7e1;
          clip-path: @shape(
            points: 360;
            r: 0.85 + cos(50t)*.015;
          )
        }
      }
      @nth(2, 3) {
        position: absolute;
        @size: 10% 10%;
        background: #545150;

        ::before, ::after {
          content: "";
          @size: 100% 100%;
          background: #545150;
          border-radius: 20%;
        }

        ::before {
          @place-cell: 0% 50%;
          transform: skew(-20deg);
        }

        ::after {
          @place-cell: 100% 50%;
          transform: skew(20deg);
        }
      }
      @nth(2) {
        @place-cell: 21% 21%;
        transform: rotate(-45deg);
      }
      @nth(3) {
        @place-cell: 79% 79%;
        transform: rotate(135deg);
      }
      @match(i > 3 && i < 23) {
        @size: 2vmin 1vmin;
        background: #fff;
        transform: translate(@m2(@r(±7vmin))) rotate(@r(360deg));
        border-radius: 100%;
      }
      @nth(24, 25, 26) {
        z-index: 1;
        @size: 12% 6%;
        --color-1: @p(#d5c7b8, #b1a79e);
        --color-2: @P;
        @place-cell: @pd(32% 32%, 42% 26%, 26% 42%);
        transform: rotate(@r(360deg));

        ::before {
          content: "";
          @size: 0;
          @place-cell: center -100%;
          transform: translateX(-50%);
          border-style: solid;
          border-width: 0 0.65vmin 5vmin;
          border-color: transparent transparent @var(--color-1) transparent;
          clip-path: inset(50% 0 0 0);
        }

        ::after {
          content: "";
          position: absolute;
          @size: 100% 100%;
          border-radius: 50% 50% 0 0/100% 100% 0 0;
          background: @var(--color-2);
        }
      }
      @match(i > 26 && i < 30) {
        @size: calc(3.2vmin * 1);
        transform: @pd(
          translate(@r(2vmin, 3vmin), @r(6vmin, 7.5vmin)) rotate(@r(360deg)),
          translate(@r(3vmin, 5vmin), @r(4vmin, 6vmin)) rotate(@r(360deg)),
          translate(@r(5vmin, 7vmin), @r(2vmin, 3vmin)) rotate(@r(360deg)),
        );
        background-image: @doodle(
          @grid: 1x6 / 100% 100%;;
          @size: 10% 20%;
          position: absolute;
          top: 29%;
          left: 45%;
          background-color: #d5f2d6;
          border-radius: 100%;
          transform: rotate(calc(60deg * (@i + 1))) translate3d(0%, -40%, 0);
          transform-origin: 50% 100%;
        );
        background-color: #74c58d;
        border: 0.22vmin solid #006c61;
        border-radius: 100%;
      }
      @match(i > 29 && i < 36) {
        position: absolute;
        top: calc(70% - (@i - 30) * 2.3%);
        left: calc(30% + (@i - 30) * 2.3%);
        @size: 0.6vmin 7vmin;
        background: @pd(#2e996e, #75c58d);
        transform: rotate(@r(-40, -50)deg) translateY(@r(±20%));
      }
      @match(i > 35 && i < 42) {
        position: absolute;
        top: calc(30% + (@i - 36) * 2.3%);
        left: calc(70% - (@i - 36) * 2.3%);
        @size: 0.6vmin 7vmin;
        background: @pd(#ffa788, #ff4b00);
        transform: rotate(@r(-40, -50)deg) translateY(@r(±20%));
      }
      @nth(42) {
        z-index: 1;
        @size: 11vmin;
        transform: rotate(@r(180deg));
        filter: drop-shadow(0 0 1vmin #00000050);

        ::before {
          content: "";
          @size: 100%;
          @place-cell: center;
          background: #fff;
          clip-path: @shape(
            points: 360;
            r: .8 + cos(@p(2,3,4,5)t)*.03;
          );
        }

        ::after {
          content: "";
          @size: @r(28,32)%;
          @place-cell: center;
          background: #ffd850;
          border-radius: 100%;
          transform: translate(@m2(@r(±10%)));
        }
      }
    );
    --3: (
      :doodle {
        flex: none;
        @grid: 1x9;
        background: #ffb700;
        overflow: hidden;
      }
      @place-cell: center;
      ::before, ::after { transition: inherit; }
      @match (i >= 2) {
        z-index: @p(2, 3, 4);
        transition: 0.5s ease all;
      }
      @nth(1) {
        @size: 82%;
        background: radial-gradient(circle at 50% 50%, #fff calc(58% - 0.1vmin), #E386B3 calc(58% - 0.1vmin + 1px), #E386B3 calc(58% + 0.1vmin), #fff calc(58% + 0.1vmin + 1px));
        border-radius: 100%;
        clip-path: @shape(
          points: 360;
          r: 0.95 + cos(@p(10,11,12,13,14)t)*.015;
        );
        transition: 0.5s ease clip-path;
      }
      @nth(2, 3) {
        @size: 45% 2.5vmin;
        @place-cell: 50% @pd(20, 30)%;
        transform: translate(@r(±20%), @r(±10%)) rotate(@r(±25)deg);

        ::before {
          content: "";
          @size: 100%;
          background: linear-gradient(transparent calc(50% - 0.1vmin), #000 calc(50% - 0.1vmin + 1px), #000 calc(50% + 0.1vmin), transparent calc(50% + 0.1vmin + 1px));
        }

        ::after {
          content: "";
          @size: 10vmin 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: @doodle(
            @gr.........完整代码请登录后点击上方下载按钮下载查看