From 50043d56de581e2152e71f1e25081d1cda5cd094 Mon Sep 17 00:00:00 2001
From: knightyun <2386209384@qq.com>
Date: Mon, 28 Jan 2019 13:06:57 +0800
Subject: [PATCH] init

---
 index.html | 189 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 snow.svg   |   1 +
 2 files changed, 190 insertions(+)
 create mode 100644 index.html
 create mode 100644 snow.svg
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..8e32760
--- /dev/null
+++ b/index.html
@@ -0,0 +1,189 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" name="viewport" content="initial-scale=1,user-scalable=no" />
+    <link rel="subresource" href="snow.svg" />
+    <title>Merry Christmas</title>
+    <style>
+      @keyframes snowRotate {
+        from {
+          transform: rotate(0);
+        }
+        to {
+          transform: rotate(360deg);
+        }
+      }
+      @-webkit-keyframes snowRotate {
+        from {
+          -webkit-transform: rotate(0);
+        }
+        to {
+          -webkit-transform: rotate(360deg);
+        }
+      }
+      @-moz-keyframes snowRotate {
+        from {
+          -moz-transform: rotate(0);
+        }
+        to {
+          -moz-transform: rotate(360deg);
+        }
+      }
+      @keyframes snowMove {
+        form {
+          top: 0%;
+        }
+        to {
+          top: 100%;
+        }
+      }
+      @-webkit-keyframes snowMove {
+        form {
+          top: 0%;
+        }
+        to {
+          top: 100%;
+        }
+      }
+      @-moz-keyframes snowMove {
+        form {
+          top: 0%;
+        }
+        to {
+          top: 100%;
+        }
+      }
+      @-webkit-keyframes textRotate {
+        from {
+          -webkit-transform: perspective(500) rotate3d(0, 1, 0, 0);
+          color: green;
+        }
+        20% {
+          -webkit-transform: perspective(500) rotate3d(0, 1, 0, 360deg);
+          color: yellow;
+        }
+        40% {
+          -webkit-transform: perspective(500) rotate3d(1, 0, 0, 0deg);
+        }
+        60% {
+          -webkit-transform: perspective(500) rotate3d(1, 0, 0, 360deg);
+          color: green;
+        }
+        80% {
+          -webkit-transform: perspective(500) rotate3d(0, 0, 1, 0deg);
+        }
+        to {
+          -webkit-transform: perspective(500) rotate3d(0, 0, 1, 360deg);
+          color: yellow;
+        }
+      }
+      @-moz-keyframes textRotate {
+        from {
+          -moz-transform: perspective(500) rotate3d(0, 1, 0, 0);
+          color: green;
+        }
+        20% {
+          -moz-transform: perspective(500) rotate3d(0, 1, 0, 360deg);
+          color: yellow;
+        }
+        40% {
+          -moz-transform: perspective(500) rotate3d(1, 0, 0, 0deg);
+        }
+        60% {
+          -moz-transform: perspective(500) rotate3d(1, 0, 0, 360deg);
+          color: green;
+        }
+        80% {
+          -moz-transform: perspective(500) rotate3d(0, 0, 1, 0deg);
+        }
+        to {
+          -moz-transform: perspective(500) rotate3d(0, 0, 1, 360deg);
+          color: yellow;
+        }
+      }
+      
+      body {
+        width: 100%;
+        padding: 0;
+        margin: 0;
+        background: rgb(200, 0, 0);
+      }
+      h1 {
+        font-size: 3rem;
+        max-width: 8em;
+        text-shadow: .03em .03em .03em white,
+        -.02em -.02em .02em black;
+        text-align: center;
+        margin: auto;
+        margin-top: 8rem;
+        box-shadow: 0 -.1em .1em white;
+        -webkit-animation: textRotate 24s linear infinite;
+        -moz-animation: textRotate 24s linear infinite;
+      }
+      #container {
+        width: 100%;
+      }
+      img {
+        width: 10px;
+        position: absolute;
+        top: 0;
+        transition: 3s linear;
+        -webkit-transition: 3s linear;
+        -moz-transition: 3s linear;
+        animation: snowRotate 3s infinite alternate,
+        snowMove 4s linear;
+        -webkit-animation: snowRotate 3s infinite alternate,
+        snowMove 4s linear;
+        -moz-animation: snowRotate 3s infinite alternate,
+        snowMove 4s linear;
+      }
+      #bottom {
+        width: 100%;
+        height: 20%;
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        background: linear-gradient( rgb(200, 0, 0), white);
+        background: -webkit-linear-gradient( rgb(200, 0, 0), white);
+        background: -moz-linear-gradient( rgb(200, 0, 0), white);
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Merry Christmas</h1>
+    <div id="container"></div>
+    <div id="bottom"></div>
+    
+    <script>
+      var w = innerWidth,
+      h = innerHeight;
+      var container = document.querySelector('#container');
+      var bottom = document.querySelector('#bottom');
+      var snowImg = document.createElement('img');
+      var snow_top = 0,
+          snow_left = 0;
+      var count = 0;
+      var snow_number = h / 3;
+      
+      snowImg.src = './snow.svg';
+      var int1 = setInterval(function(){
+        w = innerWidth,
+        h = innerHeight;
+        var snowTmpImg = snowImg.cloneNode();
+        snow_left = Math.round(Math.random()*w) - 20;
+        snowTmpImg.style.left = snow_left + 'px';
+        snowTmpImg.style.width = Math.round(Math.random()*15) + 5 + 'px';
+        container.appendChild(snowTmpImg);
+        snowTmpImg.style.opacity = Math.round(Math.random()*10)/10;
+        count++;
+      }, 0);
+      
+      var int2 = setInterval(function(){
+        if (container.childNodes.length > snow_number) {
+          container.removeChild(container.
+          childNodes[0]);
+        }
+      }, 0);
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/snow.svg b/snow.svg
new file mode 100644
index 0000000..bb4d9a5
--- /dev/null
+++ b/snow.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1545710618521" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1374" data-spm-anchor-id="a313x.7781069.0.i0" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M480.695 960h63.725V836.709l68.854 68.242 44.945-44.546-113.798-112.79v-180.02l177.271 102.44 41.67 155.652 60.725-16.284-25.398-94.872 85.259 49.266 31.87-55.246-84.726-48.961 94.497-25.343-16.495-61.622-156.068 41.855-176.934-102.245 177.667-102.667 155.513 41.709 16.274-60.793-94.78-25.418 85.255-49.264-31.869-55.247-84.733 48.965 25.326-94.594-61.557-16.51-41.817 156.206-176.948 102.251V251.539l113.849-113.951-44.459-44.496-69.392 69.454V64h-63.725v97.935l-69.188-69.249-45.068 45.107 114.256 114.355V457.11l-156.557-90.469L283.45 211.61l-60.188 16.458 24.84 94.632-107.544-62.145-31.868 55.247 106.667 61.639-93.463 25.557 16.074 61.237 154.482-42.243 156.169 90.243-156.138 90.226-154.485-42.243-15.855 60.409 94.289 25.784-107.534 62.14 31.868 55.247 106.672-61.642-24.621 93.801 61.012 16.685 40.69-155.028 156.179-90.25v180.455l-113.801 112.79 44.338 43.944 69.463-68.845V960z" fill="#FFFFFF" p-id="1375"></path></svg>
\ No newline at end of file
