我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛
引言
兔年到了，我们一起欢庆的时候千万别忘记了兔年的幸福时刻，今天我们一起庆祝兔年的时候千万记得下面的这个时候啊，接下来我将为大家退出我的作品兔年输入框。
作品介绍
html, body {
width: 100%;
height: 100%;
overflow: hidden;
font-family: 'Rubik Mono One', sans-serif;
background: #22292C;
}
svg {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
#d{
position: absolute;
text-align: center;
top: 20%;
left: 50%;
transform: translateX(-50%);
width: 500px;
}
button{
z-index: 2;
height: 26px;
width: 100px;
box-shadow: 0px 0px 0px 1px #2868c8;
color: #fff;
font-size: 15px;
letter-spacing: 1px;
background: #3385ff;
border-bottom: 1px solid #2d78f4;
outline: medium;
border: 1px solid #2868c8;
}
.input {
z-index: 2;
font-size: 20px;
font-family: helvetica, sans-serif;
background: none;
border: 1px solid #ddd;
color: #eee;
}
.text, .offscreen-text {
width: 100%;
top: 50%;
transform: translateY(-50%);
display: block;
position: absolute;
margin: 0;
}
.offscreen-text {
text-align: center;
top: -9999px;
}
.text span {
position: absolute;
}
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
代码解析
首先我们通过设置随机的js控制了随机的位置代码字符串，然后通过css的配合完成了定位的需要，灵活的设置和调整了背景的搭配，完美的呈现出每秒的表现形式，最后我们看看js的核心设置国臣还添加了对象的配置属性，最后的解雇就是界面呈现的形式了。希望大吉的加对可以更好的看见1了。
总结
通过上面的兔年作品希望大家可以收获到我的祝福，希望大家可以在兔年收获事业，爱情，金钱等等等，最后真切的祝福大家新年快乐，兔年吉祥。
