纯css实现立春花朵盛开动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：纯css实现立春花朵盛开动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        @charset "UTF-8";
        
        html {
          --zoom: 120;
          --animation-speed: 100;
          --animation-delay: 500ms;
          --leaf-duration: 1s;
          --leafs-start-from: 100deg;
          --leaf-1-delay: 500ms;
          --leaf-2-delay: 580ms;
          --leaf-3-delay: 600ms;
          --leaf-timing-func: cubic-bezier(0.18, 0.89, 0.32, 1.28);
          --petal-duration: 1s;
          --petals-start-from: 50deg;
          --petal-1-delay: 0ms;
          --petal-2-delay: 100ms;
          --petal-3-delay: 200ms;
          --petal-timing-func: cubic-bezier(0.68, -0.55, 0.27, 1.55);
          --color-leaf: hsl(175, 30%, 31%);
          --color-leaf-root: hsl(113, 21%, 51%);
          --scene-drop-shadow: drop-shadow(11em 17em 27em rgba(0, 0, 0, 0.37));
          --petals-offset: 36em;
          --petals-large-radius: 204em;
          --petals-mid-radius: 136em;
          --petals-small-radius: 82em;
          filter: var(--scene-drop-shadow);
        }
        
        :root {
          --unit: 1vmin;
          --available-screen-min: 665;
          --px: calc(var(--zoom) * (var(--unit) / var(--available-screen-min)));
        }
        
        html,
        body,
        head {
          height: 100%;
          position: relative;
          padding: 0;
          margin: 0;
          font-size: calc(1 * var(--px));
          background-color: transparent;
        }
        
        head {
          width: 100%;
          position: absolute;
          left: 0;
          top: 0;
          display: block;
        }
        
        head::before,
        head::after,
        body::before,
        body::after,
        html::before,
        html::after {
          content: "";
          position: absolute;
          background-repeat: no-repeat;
          filter: blur(0);
        }
        
        head::before,
        head::after,
        html::before {
          transform-origin: right top;
          background-size: 100% 100%;
          background-color: var(--color-leaf);
          box-shadow: inset 0 0 12em 10em var(--color-leaf);
        }
        
        head::before {
          left: calc(50% - 65em);
          top: calc(50% + 109em);
          transform: translate(-50%, -50%) scale(0) rotate(var(--leafs-start-from)) rotate(80deg) skewX(6deg) skewY(-30deg);
          width: 83em;
          height: 128em;
          border-radius: 50% 9% 32% 4%;
          background-image: linear-gradient(2deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(2deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(2deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(92deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(92deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(92deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(130deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%);
          background-position: -56em 30em, -34em 3em, -14em -22em, -16em 96em, 6em 68em, 27em 43em, 0 15em;
        }
        
        head::after {
          left: calc(50% - 94em);
          top: calc(50% + 98em);
          transform: translate(-50%, -50%) scale(0) rotate(var(--leafs-start-from)) rotate(-44deg) skewY(-30deg);
          width: 83em;
          height: 96em;
          border-radius: 25% 9% 32% 4%;
          background-image: linear-gradient(-93deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(-93deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(-93deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(-1deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(-1deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(-1deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(130deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%);
          background-position: -12em 64em, 7em 41em, 28em 16em, -56em 16em, -36em -8em, -15em -32em, 0 0;
        }
        
        html::before {
          left: calc(50% - 120em);
          top: calc(50% + 123em);
          transform: translate(-50%, -50%) scale(0) rotate(var(--leafs-start-from)) skewX(-15deg) skewY(-18deg);
          width: 113em;
          height: 121em;
          border-radius: 24% 9% 27% 7%;
          background-image: linear-gradient(-90deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(-90deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(-90deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(2deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(1deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(0deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%), linear-gradient(133deg, #fff0 0, #fff0 calc(50% - 3em), var(--color-leaf-root) 50%, #fff0 calc(50% + 1em), #fff0 100%);
          background-position: -19em 79em, 9em 50.4em, 35em 21.4em, -21em -41.6em, -49em -11em, -74em 18em, 0 0;
        }
        
        body::before,
        body::after,
        html::after {
          transform: translate(-50%, -50%) rotate(var(--petals-start-from)) scale(0);
          left: calc(50% + var(--petals-offset));
          top: calc(50% - var(--petals-offset));
        }
        
        body::before {
          padding: var(--petals-large-radius);
          --pointer-size: 73em;
          --pointer-ratio: 46%;
          --hand-size: 104em;
          --hand-ratio: 39.3%;
          --fill-size: 220em;
          --shine-size: 325em;
          --shine-color: rgba(255, 255, 255, 0.29);
          --fill: linear-gradient(#ffcc3b 0 0) no-repeat scroll 50% 50% /
          	var(--fill-size) var(--fill-size);
          --shine: radial-gradient(
          		circle at center,
          		var(--shine-color) 50%,
          		transparent 72%
          	)
          	no-repeat 50% 50% / var(--shine-size) var(--shine-size);
          filter: drop-shadow(-25em 10em 7em rgba(254, 136, 10, 0.1));
          background: var(--shine), var(--fill), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(0) rotate(0.7853981634rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * 0.7071067812) calc(50% + var(--hand-ratio) * 0.7071067812)/var(--hand-size) var(--hand-size), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(0) rotate(1.308996939rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * 0.2588190451) calc(50% + var(--hand-ratio) * 0.9659258263)/var(--hand-size) var(--hand-size), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(0) rotate(1.8325957146rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand-ratio) * -0.2588190451) calc(50% + var(--hand-ratio) * 0.9659258263)/var(--hand-size) var(--hand-size), url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cdiv class='A'%3E%3C/div%3E%3C/div%3E%3Cstyle%3E.A{position:absolute;left:50px;top:50px;width:70px;height:70px;border-radius:8%25;transform:translate(-50%25,-50%25) rotate(0) rotate(2.3561944902rad);background:rgb(255,204,59);}%3C/style%3E%3C/foreignObject%3E%3C/svg%3E") no-repeat scroll calc(50% + var(--hand.........完整代码请登录后点击上方下载按钮下载查看