你不知道各色雪花特效❄️

炫酷的图片破碎效果

1.HTML特殊字符符号大全

www.webhek.com/post/html-e…

一。下大雪❄️ 代码附上：

<template>

<div class="content">

<div class="snowflake" v-for="n in 500" :key="n * 2"></div>

</div>

</template>

<script>

export default {};

</script>

<style scoped lang="scss">

.content {

position: relative;

}


.snowflake::before {

content: "\2744";
font-size: 30px;

color: #fff;

}

.snowflake {

position: absolute;

animation: move 7s linear infinite;

}

@for $i from 1 through 500 {

.snowflake:nth-child(#{$i}) {

animation-delay: -(random(180) * 0.1s);

left: random(2000) * 1px;

top: random(100) * 1px;

}

}


@keyframes move {

0% {

opacity: 0.2;

}


100% {

transform: translate((random(100) * 1px), 1400px) scale(random(2));

opacity: 0.8;

}

}

</style>

附上效果图：

component组件文件来实现图片破碎的具体动画效果

原理：

1.先将图片分成一个个小图片

2.点击‘破碎效果’按钮，给每个小图片添加动画效果

3.animationStyle 动画方法，通过四个象限来区别图片运动轨迹

二 。雪花图

<template>

<div class="content">

<div class="snowflake" v-for="n in 800" :key="n * 2"></div>

</div>

</template>


<script>

export default {};

</script>

<style scoped lang="scss">

.content {

position: relative;

}

.snowflake::before {
content: "\2744";
font-size: 30px;
color: #fff;

}  


.snowflake {

position: absolute;

animation: move 5s linear infinite;

}

  


@for $i from 1 through 800 {

.snowflake:nth-child(#{$i}) {

animation-delay: -(random(180) * 0.1s);

  


left: random(2000) * 1px;

  


top: random(100) * 1px;

}

}


@keyframes move {

0% {

opacity: 0.8;

}

100% {

transform: rotateX((random(200) * 1deg)) rotateY((random(500) * 1deg))

rotateZ((random(100) * 1deg))

translate3d((random(100) * 1px), (random(100) * 1px), (random(100) * 1px))

scale(random(2));


opacity: 1;

}

}

</style>

附上效果图

三 。雪花纷飞 方式1：

<template>
  <div class="content">
    <div class="snowflake" v-for="n in 100" :key="n * 2"></div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped lang="scss">
.content {
  position: relative;
}

.snowflake {
  position: absolute;
}

@for $i from 1 through 100 {
  .snowflake:nth-child(#{$i}) {
    animation: move (random() * (6-3+1)+3) * 1s linear infinite;
    animation-delay: -(random(180) * 0.1s);
    left: random(2000) * 1px;
    top: -(random(100) * 1px);
    &::before {
      content: "\2744";
      font-size: (random() * (50-20+1)+20) * 1px;
      color: #fff;
      opacity: random() * 2;
    }
  }
}
@keyframes move {
  20% {
    transform: translate(random(100) * 1px, (random() * (20-10+1)+10) * 1vh);
  }
  40% {
    transform: translate(random(100) * 1px, (random() * (40-30+1)+30) * 1vh);
    opacity: 0.4;
  }
  60% {
    transform: translate(random(100) * 1px, (random() * (60-50+1)+50) * 1vh);
    opacity: 1;
  }
  80% {
    transform: translate(random(100) * 1px, (random() * (80-70+1)+70) * 1vh);
    opacity: 0.4;
  }
  100% {
    transform: translate((random(100) * 1px), 110 * 1vh);
    opacity: 1;
  }
}
</style>

方法2：

使用@for来设置多个动画

<template>
  <div class="content">
    <div class="snowflake" v-for="n in 100" :key="n * 2"></div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped lang="scss">
.content {
  position: relative;
}

.snowflake {
  position: absolute;
}

@for $i from 1 through 100 {
  .snowflake:nth-child(#{$i}) {
    animation: #{move + $i} (random() * (6-3+1)+3) * 1s linear infinite;
    animation-delay: -(random(180) * 0.1s);
    left: random(2000) * 1px;
    top: -(random(100) * 1px);
    &::before {
      content: "\2744";
      font-size: (random() * (50-20+1)+20) * 1px;
      color: #fff;
      opacity: random() * 2;
    }
  }

  @keyframes #{move + $i} {
    20% {
      transform: translate(random(100) * 1px, (random() * (20-10+1)+10) * 1vh);
    }
    40% {
      transform: translate(random(100) * 1px, (random() * (40-30+1)+30) * 1vh);
      opacity: 0.4;
    }
    60% {
      transform: translate(random(100) * 1px, (random() * (60-50+1)+50) * 1vh);
      opacity: 1;
    }
    80% {
      transform: translate(random(100) * 1px, (random() * (80-70+1)+70) * 1vh);
      opacity: 0.4;
    }
    100% {
      transform: translate((random(100) * 1px), 110 * 1vh);
      opacity: 1;
    }
  }
}
</style>

方式3

使用js设置样式

<template>
  <div class="content">
    <div
      class="snowflake"
      v-for="n in 100"
      :key="n"
      :style="snowStyle(n)"
    ></div>
  </div>
</template>

<script>
export default {
  methods: {
    snowStyle() {
      return {
        position: "absolute",
        animation: `move ${Math.random() * (6 - 3 + 1) + 3}s linear infinite`,
        "animation-delay": -(Math.random() * 5.2) + "s",
        left: Math.random() * 1000 + "px",
        top: -(Math.random() * 100) + "px",
        "font-size": Math.random() * (50 - 20 + 1) + 20 + "px",
        opacity: Math.random() * 1.5 + 0.5,
      };
    },
  },
};
</script>

<style lang="scss">
.content {
  position: relative;
}
.snowflake {
  &::before {
    content: "\2744";
    color: #fff;
  }
}

@keyframes move {
  20% {
    transform: translate(random(100) * 1px, (random() * (20-10+1)+10) * 1vh);
  }
  40% {
    transform: translate(random(100) * 1px, (random() * (40-30+1)+30) * 1vh);
    opacity: 0.4;
  }
  60% {
    transform: translate(random(100) * 1px, (random() * (60-50+1)+50) * 1vh);
    opacity: 1;
  }
  80% {
    transform: translate(random(100) * 1px, (random() * (80-70+1)+70) * 1vh);
    opacity: 0.4;
  }
  100% {
    transform: translate((random(100) * 1px), 110 * 1vh);
    opacity: 1;
  }
}
</style>

图片附上：

四 。雪花桥

修改三中的动态动画x轴位置

@keyframes #{move + $i} {
    20% {
      transform: translate(10vw, (random() * (20-10+1)+10) * 1vh);
    }
    40% {
      transform: translate(20vw, (random() * (40-30+1)+30) * 1vh);
      opacity: 0.4;
    }
    60% {
      transform: translate(40vw, (random() * (60-50+1)+50) * 1vh);
      opacity: 1;
    }
    80% {
      transform: translate(60vw, (random() * (80-70+1)+70) * 1vh);
      opacity: 0.4;
    }
    100% {
      transform: translate((90vw), 110 * 1vh);
      opacity: 1;
    }
  }