学习前端，做个小玩意

这是一个CSS3的小动画，画面最终是一个小方块在不听晃动

首先先来一个小方块：

<div class="box pulse"></div>

<style>

.box{

width: 200px; height: 200px; background-color: orange; margin: 100px auto 0; box-shadow: 5px 5px 10px #333;

}

</style>

接下来是重头戏了，怎么让.box不停晃动呢？原理是利用CSS3的animation

<style>

.pulse{

-webkit-animation: pulse 3s 1s linear infinite;

    animation: pulse 3s 1s linear infinite;

}

接下来是写keyframe-pulse

@keyframes pulse{

0%{

-webkit-transform:rotateZ(0deg) translate3d(0,5%,0) rotateZ(0deg);

transform:rotateZ(0deg) translate3d(0,5%,0) rotateZ(0deg);

}

100%{

-webkit-transform: rotateZ(360deg) translate3d(0,5%,0) rotateZ(-360deg);

transform:rotateZ(360deg) translate3d(0,5%,0) rotateZ(-360deg);

}

}

</style>