2020 最后一场雪纯CSS实现飘雪新年贺卡Demo 附源码

What

不多说，直接上效果图图 ~

访问地址：

地址一为腾讯云 serverless 部署的静态网站，试了下还是很方便的啦~

地址二为 CodeSandbox 示例

完全可以自由发挥，比如点击爱心进小游戏啦~ +动效啦，送女友+小秘密啦✨

没啥做不到，只有想不到 😊

How

看 CodeSandbox 其实完全能知道怎么实现了~ （笔者习惯 React 就直接拆分组件了，取 CSS 不妨碍）

简单拆解下：

背景飘雪

这个借用忘了哪看到的某位人士代码，原作者可以补下出处 Sorry~ (＞人＜)

感谢木星提醒， alphardex 为原作者，特此加上

html 为多个 <div> ，可用模板语法生成

CSS 主要是使用了变量并赋予小雪花以动画效果：随机指定范围内大小，控制落下的角度和速度等

具体可参考 8 个CSS硬核技巧——完美极致的变量

@function random_range($min, $max) {
  $rand: random();
  $random_range: $min + floor($rand * (($max - $min) + 1));
  @return $random_range;
}

.snow {
  $total: 200;
  position: absolute;
  width: 10px;
  height: 10px;
  background: #f9f9c7;
  border-radius: 50%;

  @for $i from 1 through $total {
    $random-x: random(1000000) * 0.0001vw;
    $random-offset: random_range(-100000, 100000) * 0.0001vw;
    $random-x-end: $random-x + $random-offset;
    $random-x-end-yoyo: $random-x + ($random-offset / 2);
    $random-yoyo-time: random_range(30000, 80000) / 100000;
    $random-yoyo-y: $random-yoyo-time * 100vh;
    $random-scale: random(10000) * 0.0001;
    $fall-duration: random_range(10, 30) * 1s;
    $fall-delay: random(30) * -1s;

    &:nth-child(#{$i}) {
      opacity: random(10000) * 0.0001;
      transform: translate($random-x, -10px) scale($random-scale);
      animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
    }

    @keyframes fall-#{$i} {
      #{percentage($random-yoyo-time)} {
        transform: translate($random-x-end, $random-yoyo-y) scale($random-scale);
      }

      to {
        transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);
      }
    }
  }
}

英文字体

引用 https://fonts.googleapis.com，随意选了个

    <link
      href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap"
      rel="stylesheet"
    />

爱心图案

没想到吧？是 CSS 绘制的呢，不是图像，不是 Icon

同样参考 8 个CSS硬核技巧——灵活多变的障眼法，笔者只是改了下渐变颜色和加了透明度

.gradient-heart-shape {
  position: relative;
  width: 40px;
  height: 40px;
  background-image: linear-gradient(to bottom, #edcf6a, #fbe98d );
  box-shadow: 0 0 20px rgba(#000, .8);
  opacity: 0.7;
  transform: rotate(45deg);
  &::before,
  &::after {
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 100%;
      width: 100%;
      height: 100%;
      content: "";
  }
  &::before {
      background-image: linear-gradient(to bottom, #edcf6a, #fbe98d);
      transform: translateX(-50%);
  }
  &::after {
      background-image: linear-gradient(to bottom, #edcf6a 50%, transparent 50%, transparent);
      transform: translateY(-50%);
  }
}

Why

怎么想到要做这？因为最近好冷啊，而且，上海竟然也下雪❄️了，可惜不能 ☃️

如何具体完成呢？积累（最好有个人 CSS 作品集）+ 组装（可能需要些许灵感）

最后，2020 最后一天，Happy New Year~

感谢鼓励与支持，欢迎评论或点赞