diff --git a/static/img/snow.png b/static/img/snow.png
new file mode 100644
index 0000000..6f4c56f
Binary files /dev/null and b/static/img/snow.png differ
diff --git a/views/snow.html b/views/snow.html
new file mode 100644
index 0000000..55e2cfd
--- /dev/null
+++ b/views/snow.html
@@ -0,0 +1,339 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta name="renderer" content="webkit"/>
+    <meta name="force-rendering" content="webkit"/>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <style type="text/css">
+        html, body {
+            margin: 0;
+            height: 100%;
+            background-size: cover;
+            background-position: center center;
+            overflow: hidden;
+        }
+    </style>
+</head>
+<body onload="draw();" style="background-image: url(https://jllsly.com/wallpapers/snow-night-wallpapers-high-quality-resolution-Is-Cool-Wallpapers-1.jpg);">
+</body>
+<script src="https://johnson2heng.github.io/three.js-demo/lib/three.js"></script>
+<script src="https://johnson2heng.github.io/three.js-demo/lib/js/controls/OrbitControls.js"></script>
+<script src="https://johnson2heng.github.io/three.js-demo/lib/js/libs/stats.min.js"></script>
+<script src="https://johnson2heng.github.io/three.js-demo/lib/js/libs/dat.gui.min.js"></script>
+<script src="https://cdn.bootcss.com/lodash.js/4.17.11/lodash.min.js"></script>
+<script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
+<script src="https://cdn.bootcss.com/gsap/latest/TweenMax.min.js"></script>
+<script>
+
+    //https://www.overdriveonline.com/wp-content/uploads/sites/8/2013/01/Truck-at-night-in-snow.jpg
+    //https://ateachinglifedotcom.files.wordpress.com/2016/12/snow-at-night.jpg
+    //https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/H0MA-uKSipsekm5s/magical-winter-night-in-the-snow-covered-pine-forest-realistic-3d-animation_bcgk90me1g_thumbnail-full01.png
+    //https://i.pinimg.com/originals/18/03/c9/1803c9683d2a6acb5f827114015a51c8.jpg
+    //https://travelingorion.files.wordpress.com/2017/02/img_6666.jpg
+    //https://jllsly.com/wallpapers/snow-night-wallpaper-desktop-Is-Cool-Wallpapers-1.jpg
+    //https://juegosrev.com/wp-content/uploads/2017/06/Winter-Night-Wallpapers-Gallery-88-Plus-PIC-WPW504471.jpg
+    //https://jllsly.com/wallpapers/snow-night-wallpapers-high-quality-resolution-Is-Cool-Wallpapers-1.jpg
+    setInterval(function(){
+        if (location.hash.length > 2) {
+            document.body.style.backgroundImage = "url("+ location.hash.substr(1) + ")";
+        }
+    }, 1000)
+
+    var renderer, camera;
+    var swidth,sheight, swidth_2;
+
+    var rotateRatio = 0.04;
+
+    var wind = {x:0, z:0, y:0, ratio:0.45};
+
+    let windChangeStep = function(key){
+        TweenMax.to(
+            wind,
+            _.random(1.6, 2.5, true),
+            {
+                [key]:_.random(-1, 1, true) * wind.ratio,
+                ease: Power2.easeInOut,
+                onComplete:function(){
+                    windChangeStep(key)
+                }
+            }
+        )
+    }
+
+    windChangeStep("x");
+    windChangeStep("z");
+    windChangeStep("y");
+    var getVelocity = function(){
+        return {
+            y:_.random(-0.2, -0.05, true) * 1.4,
+            x:_.random(-0.1, 0.2, true) * 0.01,
+            z:_.random(-0.1, 0.2, true) * 0.01,
+            angle:_.random(-Math.PI/2, Math.PI/2, true)
+        }
+    }
+
+
+    function clacSize(){
+        swidth = window.innerWidth * 0.05;
+        sheight = window.innerHeight * 0.05;
+        swidth_2 = swidth * swidth;
+    }
+
+
+    $(window).on("resize", e=>{
+        _.throttle(e=>{
+            clacSize();
+        }, 300)
+    });
+    clacSize();
+
+    $(document).on("mousemove", e=>{
+        let {screenX, screenY} = e;
+        // wind.x = (screenX - innerWidth * 0.5)/innerWidth/2 * 1.2;
+        // wind.z = (screenY - innerHeight * 0.5)/innerHeight/2 * 1.2;
+    });
+
+
+    function initRender() {
+        renderer = new THREE.WebGLRenderer({antialias: true, alpha:true});
+        // renderer.setClearColor(new THREE.Color(0x222222)); //设置背景颜色
+        renderer.setClearColor(0x000000, 0.2); //设置背景颜色
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        document.body.appendChild(renderer.domElement);
+    }
+
+
+    function initCamera() {
+        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 12, swidth * 2);
+        camera.position.set(0, 0, swidth * 0.75);
+        camera.lookAt(new THREE.Vector3(0, 30, 0));
+    }
+
+
+    function initScene() {
+        scene = new THREE.Scene();
+    }
+
+    var light;
+
+    function initLight() {
+        scene.add(new THREE.AmbientLight(0x404040));
+        light = new THREE.DirectionalLight(0xffffff);
+        light.position.set(1, 1, 1);
+        scene.add(light);
+    }
+
+
+    function initModel() {
+
+        //轴辅助 （每一个轴的长度）
+        var object = new THREE.AxesHelper(500);
+        // scene.add(object);
+    }
+
+    //初始化性能插件
+    var stats;
+
+    function initStats() {
+        stats = new Stats();
+        document.body.appendChild(stats.dom);
+    }
+
+    //用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
+    var controls;
+
+    function initControls() {
+
+        controls = new THREE.OrbitControls(camera, renderer.domElement);
+        // controls = new THREE.TrackballControls(camera, renderer.domElement);
+
+        // 如果使用animate方法时，将此函数删除
+        //controls.addEventListener( 'change', render );
+        // 使动画循环使用时阻尼或自转 意思是否有惯性
+        controls.enableDamping = true;
+        //动态阻尼系数 就是鼠标拖拽旋转灵敏度
+        //controls.dampingFactor = 0.25;
+        //是否可以缩放
+        controls.enableZoom = true;
+        //是否自动旋转
+        controls.autoRotate = false;
+        //设置相机距离原点的最远距离
+        controls.minDistance = 20;
+        //设置相机距离原点的最远距离
+        controls.maxDistance = 10000;
+        //是否开启右键拖拽
+        controls.enablePan = true;
+    }
+
+    //生成gui设置配置项
+    var gui;
+
+    var cloud;
+
+    function initGui() {
+        //声明一个保存需求修改的相关数据的对象
+        gui = {
+            "size": 0.9,
+            "transparent": true,
+            "opacity": 1,
+            "vertexColors": true,
+            "color": 0xffffff,
+            "sizeAttenuation": true,
+            "rotateSystem": false,
+            redraw: function () {
+                if (cloud) {
+                    scene.remove(cloud);
+                }
+                createParticles(gui.size, gui.transparent, gui.opacity, gui.vertexColors, gui.sizeAttenuation, gui.color);
+                //设置是否自动旋转
+                controls.autoRotate = gui.rotateSystem;
+            }
+        };
+        // var datGui = new dat.GUI();
+        // //将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）gui.add(controls, 'size', 0, 10).onChange(controls.redraw);
+        // datGui.add(gui, 'size', 0.1, 10).onChange(gui.redraw);
+        // datGui.add(gui, 'transparent').onChange(gui.redraw);
+        // datGui.add(gui, 'opacity', 0, 1).onChange(gui.redraw);
+        // datGui.add(gui, 'vertexColors').onChange(gui.redraw);
+        // datGui.addColor(gui, 'color').onChange(gui.redraw);
+        // datGui.add(gui, 'sizeAttenuation').onChange(gui.redraw);
+        // datGui.add(gui, 'rotateSystem').onChange(gui.redraw);
+
+        gui.redraw();
+    }
+
+    //生成粒子的方法
+    function createParticles(size, transparent, opacity, vertexColors, sizeAttenuation, color) {
+        var texture = new THREE.TextureLoader().load("/static/img/snow.png");
+        //存放粒子数据的网格
+        var geom = new THREE.Geometry();
+
+        //样式化粒子的THREE.PointCloudMaterial材质
+        var material = new THREE.PointsMaterial({
+            size,
+            transparent,
+            opacity,
+            vertexColors,
+            sizeAttenuation,
+            color,
+            depthTest: false,  //设置解决透明度有问题的情况
+            map: texture,
+        });
+
+        for (var i = 0; i < 16000; i++) {
+            //添加顶点的坐标
+            var particle = new THREE.Vector3(0,0,0);
+
+            resetParticle(particle);
+
+            var v = getVelocity();
+
+            particle.velocityY = v.y;
+            particle.velocityX = v.x;
+            particle.velocityZ = v.z;
+            particle.ang =       v.angle;
+
+            geom.vertices.push(particle);
+            var color = new THREE.Color(0xffffff);
+            //.setHSL ( h, s, l ) h — 色调值在0.0和1.0之间 s — 饱和值在0.0和1.0之间 l — 亮度值在0.0和1.0之间。 使用HSL设置颜色。
+            //随机当前每个粒子的亮度
+            //color.setHSL(color.getHSL().h, color.getHSL().s, Math.random() * color.getHSL().l);
+            geom.colors.push(color);
+        }
+
+        //生成模型，添加到场景当中
+        cloud = new THREE.Points(geom, material);
+        cloud.verticesNeedUpdate = true;
+
+        scene.add(cloud);
+    }
+
+
+    function resetParticle(particle){
+        particle.y = _.random(-sheight, sheight, true);
+        particle.x = _.random(-swidth, swidth , true);
+        particle.z = _.random(-swidth, swidth , true);
+    }
+
+    function render() {
+        //产生雨滴动画效果
+        var vertices = cloud.geometry.vertices;
+
+        vertices.forEach(function (v, i) {
+            v.ang+=0.05;
+
+            let a = Math.atan(v.z/v.x);
+            if(v.x<0){
+                a = a + Math.PI;
+            }
+            let r = Math.pow(v.x*v.x + v.z*v.z, 0.5);
+            a = a + rotateRatio * Math.pow(1 - r/swidth, 3);
+
+            //漩涡
+            v.x = Math.cos(a) * r;
+            v.z = Math.sin(a) * r;
+
+            //速度
+            v.y = v.y + v.velocityY;
+            v.x = v.x + v.velocityX + Math.cos(v.ang) * 0.09 ;
+            v.z = v.z + v.velocityZ + Math.sin(v.ang) * 0.09 ;
+
+            //风
+            v.y = v.y + wind.y * 0.5;
+            v.x = v.x + wind.x;
+            v.z = v.z + wind.z;
+
+            if (v.y <= -sheight){
+                v.y = sheight;
+            }else if (v.x < -swidth) {
+                v.x = swidth
+            }else if (v.x > swidth) {
+                v.x = -swidth;
+            }else if (v.z < -swidth) {
+                v.z = swidth
+            }else if (v.z > swidth) {
+                v.z = -swidth;
+            }
+        });
+
+        //设置实时更新网格的顶点信息
+        cloud.geometry.verticesNeedUpdate = true;
+
+        renderer.render(scene, camera);
+    }
+
+    //窗口变动触发的函数
+    function onWindowResize() {
+        camera.aspect = window.innerWidth / window.innerHeight;
+        camera.updateProjectionMatrix();
+
+        render();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+
+    }
+
+    function animate() {
+        //更新控制器
+        controls.update();
+        render();
+
+        //更新性能插件
+        stats.update();
+        requestAnimationFrame(animate);
+    }
+
+    function draw() {
+        initRender();
+        initScene();
+        initCamera();
+        initLight();
+        initModel();
+        initControls();
+        initStats();
+        initGui();
+        animate();
+        window.onresize = onWindowResize;
+    }
+</script>
+</html>
\ No newline at end of file
