接第一式之后的进阶招式，加入一些组合动画，剧情、动画啥的都是随意瞎想的，纯粹是为了熟悉2D、3D和过渡等css3代码写法。效果见下图：

代码如下（有点长，折叠一下）：

test ul,ol,li { list-style margin padding .box { position margin-top height .talkBox { position overflow .talkBox ul { position left width .talkBox ul li{ margin padding font text-align .ufoBox { position top left width height text-align color -webkit-animation-name -webkit-animation-duration -webkit-animation-delay -webkit-animation-timing-function -webkit-animation-iteration-count animation-name animation-duration animation-delay animation-timing-function animation-iteration-count .talkBox01 { position top left width height .talkBox01 ul { top -webkit-animation-name -webkit-animation-duration -webkit-animation-delay -webkit-animation-timing-function -webkit-animation-fill-mode animation-name animation-duration animation-delay animation-timing-function animation-fill-mode .talkBox01 ul li{ color .ufoBox .ufoTop { margin width height border-radius background-color .ufoBox .ufoBody { width height margin-top font border-radius background-color @-webkit-keyframes talk01 { 0% { top 15% { top 30% { top 45% { top 60%,85% { top 95% { top 100% { top } @keyframes talk01 { 0% { top 15% { top 30% { top 45% { top 60% { top 90%, 95% { top 100% { top } @-webkit-keyframes gogogo { 0%,10% { -webkit-transform 30%{ left top -webkit-transform 50%{ left top -webkit-transform 70%{ left -webkit-transform 100%{ left -webkit-transform } @keyframes gogogo { 0%,10 { transform 30%{ left top transform 50%{ left top transform 70%{ left transform 100%{ left transform } .box02 { position height border-bottom .box02 .hill { position left bottom width height border-style border-color border-width .carBox { position left bottom width height -webkit-animation-name -webkit-animation-duration -webkit-animation-delay -webkit-animation-timing-function -webkit-animation-fill-mode animation-name animation-duration animation-delay animation-timing-function animation-fill-mode .carBox .carBody { position width height background-color border border-radius .carBody .carDoorBox { position top left width height background-color .carBody .carDoor { position left top display width height border background-color -webkit-animation-name -webkit-animation-duration -webkit-animation-delay -webkit-animation-timing-function -webkit-animation-fill-mode animation-name animation-duration animation-delay animation-timing-function animation-fill-mode .carBox .carWheel { position bottom display width height font color text-align border border-radius -webkit-animation-name -webkit-animation-duration -webkit-animation-delay -webkit-animation-timing-function -webkit-animation-iteration-count animation-name animation-duration animation-delay animation-timing-function animation-iteration-count .carBox .front .carBox .back .talkBox02 { top left width height color .talkBox02 ul { left height width -webkit-animation-name -webkit-animation-duration -webkit-animation-delay -webkit-animation-timing-function -webkit-animation-fill-mode animation-name animation-duration animation-delay animation-timing-function animation-fill-mode .talkBox02 ul li { float width margin-right .talkBox03 { top width height left overflow opacity -webkit-animation-name -webkit-animation-duration -webkit-animation-delay -webkit-animation-timing-function -webkit-animation-fill-mode animation-name animation-duration animation-delay animation-timing-function animation-fill-mode .talkBox03 ul li { color font-weight white-space .talkBox03 ul li:first-child { -webkit-transform -webkit-transform-origin transform transform-origin .talkBox03 ul li:last-child { -webkit-transform -webkit-transform-origin transform-origin transform @-webkit-keyframes talk02 { 0% { left 5%, 25% { left 30%, 50% { left 55%, 75% { left 80%,100% { left } @keyframes talk02 { 0% { left 5%, 25% { left 30%, 50% { left 55%, 75% { left 80%,100% { left } @-webkit-keyframes talk03 { 0% { opacity 30%,70% { opacity 100% { opacity } @keyframes talk03 { 0% { opacity 30%,70% { opacity 100% { opacity } @-webkit-keyframes boxGo { 0% { -webkit-transform 30% { left bottom -webkit-transform 40% { left bottom -webkit-transform 45% { -webkit-transform -webkit-transform-origin 52% { -webkit-transform 60% { bottom left -webkit-transform -webkit-transform-origin 70% { left -webkit-transform 78% { left bottom -webkit-transform 82% { bottom -webkit-transform 100% { left bottom -webkit-transform } @keyframes boxGo { 0% { transform 30% { left bottom transform 40% { left bottom transform 45% { transform transform-origin 52% { transform 60% { bottom left transform transform-origin 70% { left transform 78% { left bottom transform 82% { bottom transform 100% { left bottom transform } @-webkit-keyframes wheelGo { 0% { -webkit-transform 100% { -webkit-transform } @keyframes wheelGo { 0% { transform 100% { transform } @-webkit-keyframes doorGo { 0% { top -webkit-transform 80% { top 100% { top left width height -webkit-transform } @keyframes doorGo { 0% { top transform 80% { top 100% { top left width height transform } 马：看见下面那辆车了吗？黄：看见了，老大。马：等会飞过去，撞他！黄：遵命，老大!黄.马：go！灰机董：今天我们学习如何飞跃凤凰山哈！陈：嗯好哒！陈.董：油门飚起来~~~董：啊！！！雅蠛蝶~~~陈：救命！救命！++

只支持主流浏览器哈，让低版本IE见鬼去吧~~~