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

 

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>