标签：蝴蝶 100% animation transform snow 雪景 动态 top left
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>
标签：蝴蝶,
100%,
animation,
transform,
snow,
雪景,
动态,
top,
left
From： https://blog.csdn.net/jklzbc/article/details/137360574