HTML布局雪人CSS3控制雪人动作

HTML布局雪人CSS3控制雪人动作

通过HTML的布局形成一个雪人，当然啦，单单通过HTML的布局应该是不能给人形成一个视觉上的雪人的，关键还得靠我们的css样式来控制，那么问题来了，css的属性那么多怎么知道需要用到那些？这就需要根据我们所布局的页面来定了，比如我这个雪人我用到了position定位、width宽、height高、background背景颜色、border-radius圆角效果、transform: rotate旋转等一些常用布局页面的css属性
下面我们一起来看下代码布局和经典的css样式截图吧：


从代码图看到我用了很多i标签以及定位，通过这些重复添加和使用来控制雪人的形成的一小部位，比如眼睛、鼻子之类的样式
通过代码图是不是很想知道它的效果是怎样的，那么我们一起来看效果截图吧：

通过css3的关键帧keyframes就可以使雪人左右摇摆、上下抛扫把的动作、围巾的摆动（可能视觉效果不怎么明显）
要注意，关键帧keyframes的使用，在不同的开发工具中的用法有一点不同，比如在Visual Studio中使用：@@keyframes 动画名称{