我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛
引言
兔年到了，我们一起欢庆的时候千万别忘记了兔年的幸福时刻，今天我们一起庆祝兔年的时候千万记得下面的这个时候啊，接下来我将为大我的作品兔年碰碰球。
作品介绍
html,body {
margin:0;
cursor:none;
background-color: #212121;
}
.ball,.tail {
position:fixed;
border-radius:100%;
}
.paddle {
position:fixed;
bottom:12%;
border:2px solid white;
border-radius:8px;
z-index:100;
}
.block {
float:left;
box-shadow:inset 0 0 0 1px black,inset 0 0 0 2px white;
border-radius:2px;
width:10%;
height:20px;
color:white;
}
.wave {
animation:wave .5s 1;
}
/* ANIMATIONS */
@keyframes wave {
0% {
box-shadow:0 0 0 0 transparent;
}
15% {
box-shadow:0 0 0 10px;
background:transparent;
}
100% {
box-shadow:0 0 0 20px transparent;
}
}@keyframes floatOne {
0% {
opacity:1;
}
50% {
opacity:1;
background:transparent;
}
100% {
opacity:0;
transform:translate3D(0,-20px,0) scale(.2);
}
}@keyframes floatTwo {
0% {
opacity:1;
}
50% {
opacity:1;
background:transparent;
}
100% {
opacity:0;
transform:translate3D(0,-35px,0) scale(.1);
}
}@keyframes floatThree {
0% {
opacity:1;
}
50% {
opacity:1;
background:transparent;
}
100% {
opacity:0;
transform:translate3D(0,-50px,0) scale(.3);
}
}@keyframes floatFour {
0% {
opacity:1;
}
50% {
opacity:1;
background:transparent;
}
100% {
opacity:0;
transform:translate3D(0,-65px,0) scale(.1);
}
}@keyframes floatFive {
0% {
opacity:1;
}
50% {
opacity:1;
background:transparent;
}
100% {
opacity:0;
transform:translate3D(0,-80px,0) scale(.2);
}
}
</style>
</head>
<body>
<div></div>
<img src="./../1.png" alt="">
<script>
var blocks = 10;
var paddleWidth = 125;
var paddleHeight = 8;
var ballSize = 28;
var speed = 3;
/*for (i=1;i<=blocks;i++) {
$('body').append('<div class="block"></div>');
}*/
$('body').append('<div class="ball" style="width:'+ballSize+'px;height:'+ballSize+'px;"></div><div class="paddle" style="width:'+paddleWidth+'px;height:'+paddleHeight+'px;"></div>');
/* CHANGE HUE */
setInterval(function() {$('.ball').css('background','hsla('+H+',100%,70%,1)');},40);
代码解析
首先我们通过设置随机的js控制了随机的位置代码字符串，然后通过css的配合完成了定位的需要，灵活的设置和调整了背景的搭配，完美的呈现出每秒的表现形式，最后我们看看js的核心设置过程还添加了对象的配置属性，最后的解雇就是界面呈现的球体运动过程了
总结
通过上面的兔年作品希望大家可以收获到我的祝福，希望大家可以在兔年收获事业，爱情，金钱等等等，最后真切的祝福大家新年快乐，兔年吉祥。
