css-doodle实现花朵迎风摇摆动画效果代码-html代码-BFW代码库

css-doodle实现花朵迎风摇摆动画效果代码

代码语言：html

所属分类：动画

代码描述：css-doodle实现花朵迎风摇摆动画效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

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


</head>

<body >
  <css-doodle>
  :doodle {
    flex: none;
    @grid: 25x1;
    @size: 1000px 800px;
    overflow: hidden;
  }

  --colors: (#75b9be,#696d7d,#d72638,#f49d37,#140f2d);
  --color-1: @p(--colors);
  --color-2: @P;
  --transform: translateY(@r(2, 90)%);
  --size: 30px;
  transform: var(--transform) rotate(0deg);
  transform-origin: 50% 100%;

  @random(0.5) {
    animation: swing @r(3, 5)s ease infinite alternate both;
  }
  @random(0.5) {
    animation: swingLeft @r(3, 5)s ease infinite alternate both;
  }

  @keyframes swing {
    0% {
      transform: var(--transform) rotate(0deg);
    }
    100% {
      transform: var(--transform) rotate(1deg);
    }
  }

  @keyframes swingLeft {
    0% {
      transform: var(--transform) rotate(0deg);
    }
    100% {
      transform: var(--transform) rotate(-1deg);
    }
  }

  ::after {
    content: "";
    position: absolute;
    top: -15px;
    left: calc(50% - var(--size) / 2);
    width: var(--size);
    height: var(--size);
    background: @p(
      radial-gradient(@stripe(@m4(var((1, 2))), transparent 29.7%)),
      @doodle(
        @grid: 1 / 100%;
        ::after {
          content: "@p(✿,❁,❀,❃,❊)";
          position: absolute;
          top: -4px;
          left: 50%;
          transform: translate3d(.........完整代码请登录后点击上方下载按钮下载查看