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

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

开发工具与关键技术：VS HTML、CSS3
作者：张赵敏
撰写时间：2019/1/19

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


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

通过css3的关键帧keyframes就可以使雪人左右摇摆、上下抛扫把的动作、围巾的摆动（可能视觉效果不怎么明显）
要注意，关键帧keyframes的使用，在不同的开发工具中的用法有一点不同，比如在Visual Studio中使用：@@keyframes 动画名称{0%{}~~100%{}}，在Dreamweaver中使用：@keyframes 动画名称{0%{}~~100%{}}。关键帧中的多少帧，是可以自己设定的
一起看下雪人运动的状态，如截图所示：

一起看下控制它运动的关键帧，以及调用动画的写法
如下代码截图：

css3为Animation动画提供的几个属性如下：
animation-name:指定动画名称，该属性指定一个已有的关键帧定义。
animation-duration:指定动画持续时间。
animation-timing-funtion:指定动画变化速度。
animation-delay：指定动画延迟多长时间才开始执行。
animation-iteration-count：指定动画的循环执行次数。
animation:这是一个复合属性。该属性的格式为：
animation:animation-name
animation-duration animation-timing-funciotn
animation-delay animation-iteration-count.