What

Suffice it to say, the cover is the renderings

Visit address:

  • my-bucket-1252266428.cos-website.ap-guangzhou.myqcloud.com/
  • Codesandbox. IO/s/busy – kirc…

Address a static site for Tencent cloud serverless deployment, try the next or very convenient ~

Address two is the CodeSandbox example

Can develop freely completely, for instance click love to enter small game ~ + move effect, send cummer + small secret ✨

Nothing can not be done, only think of 😊

How

React/CodeSandbox/CSS/CodeSandbox/CodeSandbox

Simple disassembly:

Background snow

Sorry~ (> person <)

Thanks to Jupiter, Alphardex is the original author and is hereby added

HTML is multiple

, which can be generated using template syntax

CSS uses variables and animates snowflakes: randomly specifying their size, controlling the Angle and speed at which they fall, and so on

Check out 8 core CSS tricks — perfect variables

@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.0001 vw;
    $random-offset: random_range(-100000.100000) * 0.0001 vw;
    $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); }}}}Copy the code

English font

Cite fonts.googleapis.com and pick one at random

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

Love design

Didn’t expect that? It’s CSS, not an image, not an Icon

Using the same 8 core CSS tricks, I just changed the gradient color and added transparency

.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%); }}Copy the code

Why

What made you do this? Because of the recent good cold ah, and, Shanghai actually also snow ❄️, but not ☃️

How do you do that? Accumulation (preferably personal CSS portfolio) + Assembly (maybe some inspiration)

Happy New Year to you

Thanks for your encouragement and support. Please comment or like