|
@@ -2,129 +2,143 @@
|
|
|
position: absolute;
|
|
|
width: 12px;
|
|
|
height: 12px;
|
|
|
+ // height: 100vh;
|
|
|
+ // width: 100vw;
|
|
|
background-image: url("/skImage/snow3.png");
|
|
|
background-size: cover;
|
|
|
}
|
|
|
|
|
|
-@keyframes move1{
|
|
|
- 0%{
|
|
|
- // top: 0;
|
|
|
- // left: var(--left-ini);
|
|
|
- transform: translate(var(--left-ini),-5vh) scale(var(--size));
|
|
|
- // var() 函数用于插入自定义的属性值,如果一个属性值在多处被使用,该方法就很有用。
|
|
|
+@keyframes move1 {
|
|
|
+ 0% {
|
|
|
+ // top: 0;
|
|
|
+ // left: var(--left-ini);
|
|
|
+ transform: translate(var(--left-ini), -5vh) scale(var(--size));
|
|
|
+ // var() 函数用于插入自定义的属性值,如果一个属性值在多处被使用,该方法就很有用。
|
|
|
}
|
|
|
|
|
|
- 100%{
|
|
|
- // top: 100vh;
|
|
|
- // left: var(--left-end);
|
|
|
- transform: translate(var(--left-end),100vh);
|
|
|
+ 100% {
|
|
|
+ // top: 100vh;
|
|
|
+ // left: var(--left-end);
|
|
|
+ transform: translate(var(--left-end), 100vh);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@for $i from 1 through 200 {
|
|
|
.snow:nth-child(#{$i}) {
|
|
|
- --left-ini: #{random(20) - 10}vw;//--是变量声明的前缀
|
|
|
- --left-end: #{random(20) - 10}vw;
|
|
|
- --size: #{random(3)};
|
|
|
- // top: -5vh; // 不用top的原因,就是为了不使初始状态时,空间的某块行区域是空白的,不好看,直接用y位移就可以根据时间的随机性,让空间的同时刻每一行都能含有雪花
|
|
|
- left: #{-30+random(160)}vw; // 从原来的位置左右移动一点点距离,如果直接使用left当位移点,移动的跨幅太大了,不好看
|
|
|
- animation: move1 #{6 + random(20)}s linear -#{random(10)}s infinite; // 用了延时,就是为了能有一运行代码就能提前有雪花出现在页面上
|
|
|
+ --left-ini: #{random(20) - 10}vw; //--是变量声明的前缀
|
|
|
+ --left-end: #{random(20) - 10}vw;
|
|
|
+ --size: #{random(3)};
|
|
|
+ // top: -5vh; // 不用top的原因,就是为了不使初始状态时,空间的某块行区域是空白的,不好看,直接用y位移就可以根据时间的随机性,让空间的同时刻每一行都能含有雪花
|
|
|
+ left: #{-30+random(160)}vw; // 从原来的位置左右移动一点点距离,如果直接使用left当位移点,移动的跨幅太大了,不好看
|
|
|
+ animation: move1 #{6 + random(20)}s linear -#{random(10)}s infinite; // 用了延时,就是为了能有一运行代码就能提前有雪花出现在页面上
|
|
|
}
|
|
|
}
|
|
|
-.snow-wrapper{
|
|
|
+
|
|
|
+.snow-wrapper {
|
|
|
+ box-sizing: border-box;
|
|
|
position: absolute;
|
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
|
opacity: 0.3;
|
|
|
z-index: 0;
|
|
|
- .snow{
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .snow {
|
|
|
z-index: 0;
|
|
|
}
|
|
|
}
|
|
|
-.snow-content{
|
|
|
+
|
|
|
+.snow-content {
|
|
|
position: absolute;
|
|
|
top: 0px;
|
|
|
z-index: 1000;
|
|
|
width: 100vw;
|
|
|
text-align: center;
|
|
|
- img{
|
|
|
+
|
|
|
+ img {
|
|
|
height: 100vh;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// rain
|
|
|
-.rain-wrapper{
|
|
|
+.rain-wrapper {
|
|
|
position: relative;
|
|
|
z-index: 0;
|
|
|
width: 10px;
|
|
|
height: 150px;
|
|
|
- perspective:20px;
|
|
|
- -webkit-perspective:20px; /* Safari and Chrome */
|
|
|
+ perspective: 20px;
|
|
|
+ -webkit-perspective: 20px;
|
|
|
+ /* Safari and Chrome */
|
|
|
opacity: 0.7;
|
|
|
}
|
|
|
-.rain{
|
|
|
+
|
|
|
+.rain {
|
|
|
position: absolute;
|
|
|
height: 40px;
|
|
|
width: 5px;
|
|
|
border-radius: 5px;
|
|
|
- transform: rotateX(5deg) ;
|
|
|
- -webkit-transform: rotateX(5deg); /* Safari and Chrome */
|
|
|
+ transform: rotateX(5deg);
|
|
|
+ -webkit-transform: rotateX(5deg);
|
|
|
+ /* Safari and Chrome */
|
|
|
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
|
|
|
// opacity: 0.5;
|
|
|
}
|
|
|
|
|
|
-@keyframes move2{
|
|
|
- 0%{
|
|
|
- width: var(--size);
|
|
|
- top: 0;
|
|
|
- left: var(--left2);
|
|
|
- transform: translate( var(--left2),0);
|
|
|
- opacity: var(--opa);
|
|
|
- // var() 函数用于插入自定义的属性值,如果一个属性值在多处被使用,该方法就很有用。
|
|
|
+@keyframes move2 {
|
|
|
+ 0% {
|
|
|
+ width: var(--size);
|
|
|
+ top: 0;
|
|
|
+ left: var(--left2);
|
|
|
+ transform: translate(var(--left2), 0);
|
|
|
+ opacity: var(--opa);
|
|
|
+ // var() 函数用于插入自定义的属性值,如果一个属性值在多处被使用,该方法就很有用。
|
|
|
}
|
|
|
|
|
|
- 100%{
|
|
|
- width:var(--size);
|
|
|
- top: 100vh;
|
|
|
- // left: var(--left-end);
|
|
|
- transform: translate( var(--left2),1000px) scale(1.5);
|
|
|
- opacity: var(--opa);
|
|
|
+ 100% {
|
|
|
+ width: var(--size);
|
|
|
+ top: 100vh;
|
|
|
+ // left: var(--left-end);
|
|
|
+ transform: translate(var(--left2), 1000px) scale(1.5);
|
|
|
+ opacity: var(--opa);
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@for $i from 1 through 200 {
|
|
|
.rain:nth-child(#{$i}) {
|
|
|
- --size: #{1+ random(3)}px;
|
|
|
- --opa: #{random(10)/10};
|
|
|
- // top: -5vh; // 不用top的原因,就是为了不使初始状态时,空间的某块行区域是空白的,不好看,直接用y位移就可以根据时间的随机性,让空间的同时刻每一行都能含有雪花
|
|
|
- --left2: #{-30+random(160)}vw;
|
|
|
- animation: move2 #{0.7 + random(100)/120}s linear -1s infinite; // 用了延时,就是为了能有一运行代码就能提前有雪花出现在页面上
|
|
|
+ --size: #{1+ random(3)}px;
|
|
|
+ --opa: #{random(10)/10};
|
|
|
+ // top: -5vh; // 不用top的原因,就是为了不使初始状态时,空间的某块行区域是空白的,不好看,直接用y位移就可以根据时间的随机性,让空间的同时刻每一行都能含有雪花
|
|
|
+ --left2: #{-30+random(160)}vw;
|
|
|
+ animation: move2 #{0.7 + random(100)/120}s linear -1s infinite; // 用了延时,就是为了能有一运行代码就能提前有雪花出现在页面上
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.rain-content{
|
|
|
+.rain-content {
|
|
|
position: absolute;
|
|
|
z-index: 1000;
|
|
|
width: 100vw;
|
|
|
text-align: center;
|
|
|
- img{
|
|
|
+
|
|
|
+ img {
|
|
|
|
|
|
height: 100vh;
|
|
|
}
|
|
|
}
|
|
|
-.rain-cloud{
|
|
|
+
|
|
|
+.rain-cloud {
|
|
|
position: absolute;
|
|
|
width: 100vw;
|
|
|
-
|
|
|
- .cloud1{
|
|
|
+
|
|
|
+ .cloud1 {
|
|
|
position: absolute;
|
|
|
top: -20vh;
|
|
|
left: 30%;
|
|
|
opacity: 0.6;
|
|
|
height: 70vh;
|
|
|
}
|
|
|
- .cloud2{
|
|
|
+
|
|
|
+ .cloud2 {
|
|
|
position: absolute;
|
|
|
top: -10vh;
|
|
|
left: -5%;
|