樱花飞舞
![樱花飞舞 樱花飞舞](./images/1536233261683.png)
樱花飞舞
思路
- 混合原型模式生成随机雪花: 颜色 大小 运动方式 位置(x,y)
- 雪花运动向下掉落, 当雪花超出屏幕, 在页面中随机生成一个新雪花
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- *{margin: 0;padding: 0;}
- .snow{
- position: absolute;
- top: 0;
- left: 0;
- /*font-size: 80px;
- color: pink;
- animation: snow_rotateY 3s linear infinite;*/
- animation: 3s linear infinite;
- }
- @keyframes snow_rotate {
- from{
- transform: rotate(0deg);
- }
- to{
- transform: rotate(360deg);
- }
- }
- @keyframes snow_rotateX {
- from{
- transform: rotateX(0deg);
- }
- to{
- transform: rotateX(360deg);
- }
- }
- @keyframes snow_rotateY {
- from{
- transform: rotateY(0deg);
- }
- to{
- transform: rotateY(360deg);
- }
- }
- body{
- overflow: hidden;
- }
- </style>
- </head>
- <body>
- <!--<div class="snow">❅</div>-->
- <script>
- /**
- * 雪花类
- * @param color 颜色
- * @param size 大小
- * @param animateName 动画方式
- * @param x left值
- * @param y top值
- * @constructor
- */
- // [0,255]
- function randomNum(num){
- return parseInt(Math.random()*num);
- }
- var animateNames = ['snow_rotate','snow_rotateX','snow_rotateY'];// 动画名称数组
- function Snow(){
- this.color = 'rgb(255,'+randomNum(256)+','+randomNum(256)+')';
- this.size = randomNum(60)+20; //[20, 80)
- this.animateName = animateNames[randomNum(3)];
- this.x = randomNum(window.innerWidth);
- this.y = randomNum(window.innerHeight/2);
- }
- Snow.prototype.show = function () {
- // 创建小雪花
- var snow = document.createElement('div');
- //设置雪花属性
- snow.className = 'snow';
- snow.innerText = '✾';//☂ ☯ ✾ ❅ 🌹
- snow.style.color = this.color;
- snow.style.fontSize = this.size + 'px';
- snow.style.animationName = this.animateName;
- snow.style.left = this.x +'px';
- snow.style.top = this.y +'px';
- //放入页面
- document.body.appendChild(snow);
- };
- //new Snow().show();
- for (var i = 0; i < 100; i++) {
- new Snow().show();
- }
- // 雪花下落
- var snows = document.getElementsByClassName('snow');
- setInterval(function () {
- for (var i = 0; i < 10; i++) {
- var snow = snows[i];
- /***
- * 判断雪花是否超出屏幕,
- * 如果超出删除雪花,生成一个新雪花
- * */
- if(snow.offsetTop>window.innerHeight){
- document.body.removeChild(snow);//删除
- new Snow().show();//添加
- }else{
- snow.style.top = snow.offsetTop+1 +'px';
- }
- }
- },10);
- </script>
- </body>
- </html>