前端（动态雪景背景+动态蝴蝶）

 

1.CSS样式

<style>
    html, body, a, div, span, table, tr, td, strong, ul, ol, li, h1, h2, h3, p, input {
      font-weight: inherit;
      font-size: inherit;
      list-style: none;
      border-spacing: 0;
      border: 0;
      border-collapse: collapse;
      text-decoration: none;
      padding: 0;
      margin: 0;
    }
    html, body {
      font-family: "Segoe UI",Segoe,Tahoma,Arial,Verdana,sans-serif;
      background-color: #3D69A4;
      overflow: hidden;
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
    }
    .snow .snow_slice {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 600px;
      pointer-events: none;
      transform-origin: 0% 0%;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      overflow: hidden;
      z-index: 2;
    }
    .snow .snow_1 {
      animation-name: snow_falling_fore;
      animation-delay: 0s;
      animation-duration: 50s;
      height: 100%;
      top: -100%;
      pointer-events: none;
    }
    .snow .snow_2 {
      animation-name: snow_falling_fore;
      animation-delay: 25s;
      animation-duration: 50s;
      height: 100%;
      top: -100%;
      pointer-events: none;
    }
    .snow .snow_3 {
      animation-name: snow_falling_mid;
      animation-delay: 0s;
      animation-duration: 70s;
      opacity: .5;
      top: -100%;
      height: 100%;
      pointer-events: none;
    }
    .snow .snow_4 {
      animation-name: snow_falling_mid;
      animation-delay: 35s;
      animation-duration: 70s;
      opacity: .5;
      top: -100%;
      height: 100%;
      pointer-events: none;
    }
    .snow .snow_drifter {
      width: 100%;
      height: 100%;
      background-repeat: repeat;
      background-image: url(./image/snow-static.png);
      pointer-events: none;
    }
    @keyframes snow_falling_fore {
      0% {
        top:-100%;
        opacity:0
      }
      1% {
        top:-100%;
        opacity:1
      }
      99.8% {
        top:100%;
        opacity:1
      }
      99.9% {
        opacity:0
      }
      100% {
        top:-100%;
        opacity:0
      }
    }
    @keyframes snow_falling_mid {
      0% {
        top:-100%;
        opacity:0
      }
      1% {
        top:-100%;
        opacity:1
      }
      99.8% {
        top:100%;
        opacity:1
      }
      99.9% {
        opacity:0
      }
      100% {
        top:-100%;
        opacity:0
      }
    }
    /* 四边 */
    .frost {
      height: 100%;
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 2;
    }
    .frost .frame_sprite {
      position: absolute;
      height: 100px;
      background-repeat: repeat-x;
      background-size: contain;
      background-position: center bottom;
      background-image: url(./image/border-ice.png);
    }
    .frost .frame_left {
      top: -133px;
      left: 0;
      transform: rotate(90deg);
      transform-origin: 0 100px;
      pointer-events: none;
      width: 500%;
    }
    .frost .frame_right {
      top: 100%;
      left: calc(100% - 100px);
      transform: rotate(-90deg);
      transform-origin: 0 0;
      width: 500%;
      pointer-events: none;
    }
    .frost .frame_top {
      top: 0;
      width: 500%;
      transform: rotate(180deg);
      pointer-events: none;
    }
    .frost .frame_bottom {
      bottom: 0;
      left: 0;
      width: 500%;
      pointer-events: none;
    }


     @keyframes left {
            0%{
                transform: rotateY(0deg);
                transform-origin: right center;
                perspective: 201px;

            }
            50%{
                transform: rotateY(70deg);
                transform-origin: right center;
                perspective: 201px;

            }
            100%{
                transform: rotateY(0deg);
                transform-origin: right center;
                perspective: 201px;
            }
        }
        @keyframes right {
            0%{
                transform: rotateY(0);
                transform-origin: left center;
                perspective: 201px;

            }
            50%{
                transform: rotateY(-70deg);
                transform-origin: left center;
                perspective: 201px;

            }
            100%{
                transform: rotateY(0);
                transform-origin: left center;
                perspective: 201px;

            }
        }

     #butterfly{
          margin-top: 150px;
            width: 600px;
            height: 500px;
            position: absolute;
            transform: scale(0.35);
            transform-style: preserve-3d;
      }

      #butterfly2{
        margin-top: 150px;

            width: 600px;
            height: 500px;
            margin-left: 1200px;
            position: relative;
            transform: scale(0.35);
            transform-style: preserve-3d;
      }


      .leftSide{
            width: 267px;
            height: 421px;
            background: url("image/leftSide.png") no-repeat;
            position: absolute;
            left: 26px;
            top: 40px;
            animation: left 2s infinite;
            z-index: 9999;
        }

        .body{
            width: 152px;
            height: 328px;
            background: url("image/body.png") no-repeat;
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            z-index: 9999;
        }
        .rightSide{
            width: 284px;
            height: 460px;
            background: url("image/rightSide.png") no-repeat;
            position: absolute;
            right: 26px;
            top: 58px;
            animation: right 2s infinite;
            z-index: 9999;
        }

• transform: rotate(90deg)：将元素旋转90度。
• transform-origin: 0 100px;：设置元素的变换原点为左上角，偏移量为100像素。
• pointer-events: none：禁止鼠标事件在元素上触发。
• width: 500%;：将元素的宽度设置为其父元素宽度的500%。
• left: calc(100% - 100px)：将元素的宽度减去100像素，然后将结果作为左外边距的值。这样做可以使得元素在水平方向上相对于其父元素进行定位，并且保持一定的距离。

 2.HTML

<div id="butterfly">
    <div class="leftSide"></div>
    <div class="body"></div>
    <div class="rightSide"></div>

</div>


<div id="butterfly2" >
  <div class="leftSide"></div>
  <div class="body"></div>
  <div class="rightSide"></div>

</div>
<div class="image" style="position: absolute;top: 0;" >
  <img src="image/lxja.webp" style="width: 600px;margin-left: 600px;margin-top: 50px;border-radius: 50px;">

</div>

  <div class="snow">
    <div class="snow_slice snow_1">
      <div class="snow_drifter drift_1"></div>
    </div>
    <div class="snow_slice snow_2">
      <div class="snow_drifter drift_2"></div>
    </div>
    <div class="snow_slice snow_3">
      <div class="snow_drifter drift_3"></div>
    </div>
    <div class="snow_slice snow_4">
      <div class="snow_drifter drift_4"></div>
    </div>
  </div>
  <div class="frost">
    <div class="frame_sprite frame_left"></div>
    <div class="frame_sprite frame_right"></div>
    <div class="frame_sprite frame_top"></div>
    <div class="frame_sprite frame_bottom"></div>
  </div>