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 < 3.........完整代码请登录后点击上方下载按钮下载查看