html css画小车 基于css3动画实现的旅行的小车

旅行的小车.gif

小丸子.gif

抱歉，用工具生成的gif有点卡，小车的轮子都转不利索了，完整demo可以点击文章最底下的［demo展示中心］。

这两个demo的所有元素和动效都是由html＋css实现的

css动画实现：

1.animation: css3新增属性，有多个属性值

例：轮子转动

&.wheel{

left: 106px;

animation: wheel 0.4s infinite linear;

}

@keyframes wheel{

0%{

top: -23px;

transform:rotate(0deg);

width: 35px;

}

100%{

top: -25px;

transform:rotate(360deg);

width: 38px;

}

}

说明：wheel是animation指定的动画名称

infinite表示动画播放无限次

linear指定动画从头至尾速度相同

在@keyframes中指定动画周期中每个时间段具体的动画效果，动画周期时段可由百分比控制，也可由from、to来表示。

2. transition: css3属性，处理动效的过渡效果

例：渐变效果

.change{

opacity: 0;

transition: opacity 1s;

}

说明：

transition-property 指定过渡的效果元素，如：width，height，opacity等

transition-duration 表示过渡的周期(秒／毫秒)，如上述例子的1s

transition-timing-function 规定速度效果的速度曲线

transition-delay 规定动效的开始时间

剩下的一些无非是对于元素的旋转、缩放等处理，用transform等属性即可实现。