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

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

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