接第一式之后的进阶招式，加入一些组合动画，剧情、动画啥的都是随意瞎想的，纯粹是为了熟悉2D、3D和过渡等css3代码写法。效果见下图：
代码如下（有点长，折叠一下）：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
ul,ol,li {
list-style: none;
margin: 0;
padding: 0;
}
.box {
position: relative;
margin-top: 50px;
height: 135px;
}
.talkBox {
position: absolute;
overflow: hidden;
}
.talkBox ul {
position: absolute;
left: 0;
width: 100%;
}
.talkBox ul li{
margin: 0;
padding: 0;
font:12px/22px Microsoft YaHei;
text-align: left;
}
.ufoBox {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 40px;
text-align: center;
color: #fff;
-webkit-animation-name: gogogo;
-webkit-animation-duration: 6s;
-webkit-animation-delay: 9.5s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 2;
animation-name: gogogo;
animation-duration: 6s;
animation-delay: 9.5s;
animation-timing-function:ease;
animation-iteration-count: 2;
}
.talkBox01 {
position: absolute;
top: 0;
left: 115px;
width: 150px;
height: 22px;
}
.talkBox01 ul {
top: 22px;
-webkit-animation-name: talk01;
-webkit-animation-duration: 9.5s;
-webkit-animation-delay: 0.5s;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
animation-name: talk01;
animation-duration: 9.5s;
animation-delay: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
.talkBox01 ul li{
color: #6978e6;
}
.ufoBox .ufoTop {
margin: 0 auto;
width: 35px;
height: 15px;
border-radius: 13px 13px 0 0;
background-color: #b37de6;
}
.ufoBox .ufoBody {
width: 100px;
height: 25px;
margin-top: -2px;
font:13px/25px Microsoft YaHei;
border-radius: 50%;
background-color: #eb5C7e;
}
@-webkit-keyframes talk01
{
0% {
top: 22px;
}
15% {
top: 0;
}
30% {
top: -22px;
}
45% {
top: -44px;
}
60%,85% {
top: -66px;
}
95% {
top: -88px;
}
100% {
top: -110px;
}
}
@keyframes talk01
{
0% {
top: 22px;
}
15% {
top: 0;
}
30% {
top: -22px;
}
45% {
top: -44px;
}
60% {
top: -66px;
}
90%, 95% {
top: -88px;
}
100% {
top: -110px;
}
}
@-webkit-keyframes gogogo
{
0%,10% {
-webkit-transform: rotate(0);
}
30%{
left: 0;
top: 0;
-webkit-transform: rotate(30deg);
}
50%{
left: 400px;
top: 55px;
-webkit-transform: rotate(0);
}
70%{
left: 400px;
-webkit-transform: rotate(0);
}
100%{
left:0;
-webkit-transform: rotate(-360deg);
}
}
@keyframes gogogo
{
0%,10 {
transform: rotate(0);
}
30%{
left: 0;
top: 0;
transform: rotate(30deg);
}
50%{
left: 400px;
top: 55px;
transform: rotate(0);
}
70%{
left: 400px;
transform: rotate(0);
}
100%{
left:0;
transform: rotate(-360deg);
}
}
.box02 {
position: relative;
height: 72px;
border-bottom: 1px solid #ccc;
}
.box02 .hill {
position: absolute;
left: 300px;
bottom: 0;
width: 0;
height: 0;
border-style: solid;
border-color: transparent #ccc #ccc transparent;
border-width: 35px 60px;
}
.carBox {
position: absolute;
left: 0;
bottom: 0;
width: 122px;
height: 60px;
-webkit-animation-name: boxGo;
-webkit-animation-duration: 5s;
-webkit-animation-delay: 8.5s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-fill-mode: forwards;
animation-name: boxGo;
animation-duration: 5s;
animation-delay: 8.5s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
.carBox .carBody {
position: relative;
width: 120px;
height: 40px;
background-color: #59c4e6;
border: 1px solid #2094aa;
border-radius: 16px 40px 2px 2px;
}
.carBody .carDoorBox {
position: absolute;
top: 10px;
left: 37px;
width: 37px;
height: 22px;
background-color: #000;
}
.carBody .carDoor {
position: absolute;
left: 0;
top: 0;
display: inline-block;
width: 35px;
height: 20px;
border: 1px solid #2094aa;
background-color: #59c4e6;
-webkit-animation-name: doorGo;
-webkit-animation-duration: 0.5s;
-webkit-animation-delay: 12.5s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-fill-mode: forwards;
animation-name: doorGo;
animation-duration: 0.5s;
animation-delay: 12.5s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
.carBox .carWheel {
position: absolute;
bottom: 0;
display: inline-block;
width: 22px;
height: 22px;
font: 14px/22px Simsun;
color: #2094aa;
text-align: center;
border: 1px solid #2094aa;
border-radius: 50%;
-webkit-animation-name: wheelGo;
-webkit-animation-duration: 2.5s;
-webkit-animation-delay: 8.5s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count: 3;
animation-name: wheelGo;
animation-duration: 2.5s;
animation-delay: 8.5s;
animation-timing-function: ease-in;
animation-iteration-count: 3;
}
.carBox .front { left: 11px; }
.carBox .back { right: 18px; }
.talkBox02 {
top: -10px;
left: 115px;
width: 240px;
height: 22px;
color: #1f9fbe;
}
.talkBox02 ul {
left: 240px;
height: 22px;
width: 9999px;
-webkit-animation-name: talk02;
-webkit-animation-duration: 8s;
-webkit-animation-delay: 2s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-fill-mode: forwards;
animation-name: talk02;
animation-duration: 8s;
animation-delay: 2s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
.talkBox02 ul li {
float: left;
width: 220px;
margin-right: 20px;
}
.talkBox03 {
top: -10px;
width: 150px;
height: 44px;
left: 785px;
overflow: visible;
opacity: 0;
-webkit-animation-name: talk03;
-webkit-animation-duration: 4s;
-webkit-animation-delay: 14s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-fill-mode: forwards;
animation-name: talk03;
animation-duration: 4s;
animation-delay: 14s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
.talkBox03 ul li {
color: #f30;
font-weight: 800;
white-space: nowrap;
}
.talkBox03 ul li:first-child {
-webkit-transform: rotate(-17deg);
-webkit-transform-origin: 10% 50%;
transform: rotate(-17deg);
transform-origin: 10% 50%;
}
.talkBox03 ul li:last-child {
-webkit-transform: rotate(17deg);
-webkit-transform-origin: 10% 50%;
transform-origin: 10% 50%;
transform: rotate(17deg);
}
@-webkit-keyframes talk02 {
0% {
left: 240px;
}
5%, 25% {
left: 0;
}
30%, 50% {
left: -240px;
}
55%, 75% {
left: -480px;
}
80%,100% {
left: -720px;
}
}
@keyframes talk02 {
0% {
left: 240px;
}
5%, 25% {
left: 0;
}
30%, 50% {
left: -240px;
}
55%, 75% {
left: -480px;
}
80%,100% {
left: -720px;
}
}
@-webkit-keyframes talk03 {
0% {
opacity: 0;
}
30%,70% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes talk03 {
0% {
opacity: 0;
}
30%,70% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes boxGo {
0% {
-webkit-transform: rotate(0);
}
30% {
left: 205px;
bottom: 0;
-webkit-transform: rotate(0);
}
40% {
left: 240px;
bottom: 12px;
-webkit-transform: rotate(-20deg);
}
45% {
-webkit-transform: rotate(-28deg);
-webkit-transform-origin: 55% 20%;
}
52% {
-webkit-transform: rotate(-28deg);
}
60% {
bottom: 68px;
left: 350px;
-webkit-transform: rotate(-28deg);
-webkit-transform-origin: 52% 50%;
}
70% {
left: 450px;
-webkit-transform: rotate(90deg);
}
78% {
left: 520px;
bottom: 0;
-webkit-transform: rotate(180deg);
}
82% {
bottom: 18px;
-webkit-transform: rotate(200deg);
}
100% {
left: 650px;
bottom: 0;
-webkit-transform: rotate(180deg);
}
}
@keyframes boxGo {
0% {
transform: rotate(0);
}
30% {
left: 205px;
bottom: 0;
transform: rotate(0);
}
40% {
left: 240px;
bottom: 12px;
transform: rotate(-20deg);
}
45% {
transform: rotate(-28deg);
transform-origin: 55% 20%;
}
52% {
transform: rotate(-28deg);
}
60% {
bottom: 68px;
left: 350px;
transform: rotate(-28deg);
transform-origin: 52% 50%;
}
70% {
left: 450px;
transform: rotate(90deg);
}
78% {
left: 520px;
bottom: 0;
transform: rotate(180deg);
}
82% {
bottom: 18px;
transform: rotate(200deg);
}
100% {
left: 650px;
bottom: 0;
transform: rotate(180deg);
}
}
@-webkit-keyframes wheelGo {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes wheelGo {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes doorGo {
0% {
top: 0;
-webkit-transform: rotate(0deg);
}
80% {
top:3px;
}
100% {
top: 3px;
left: 18px;
width: 17px;
height: 20px;
-webkit-transform: skew(0,-20deg);
}
}
@keyframes doorGo {
0% {
top: 0;
transform: rotate(0deg);
}
80% {
top:3px;
}
100% {
top: 3px;
left: 18px;
width: 17px;
height: 20px;
transform: skew(0,-20deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="talkBox talkBox01">
<ul>
<li>马：看见下面那辆车了吗？</li>
<li>黄：看见了，老大。</li>
<li>马：等会飞过去，撞他！</li>
<li>黄：遵命，老大!</li>
<li>黄.马：go！</li>
</ul>
</div>
<div class="ufoBox">
<div class="ufoTop"></div>
<div class="ufoBody">灰机</div>
</div>
</div>
<div class="box02">
<div class="hill">
</div>
<div class="talkBox talkBox02">
<ul>
<li>董：今天我们学习如何飞跃凤凰山哈！</li>
<li>陈：嗯好哒！</li>
<li>陈.董：油门飚起来~~~</li>
</ul>
</div>
<div class="talkBox talkBox03">
<ul>
<li>董：啊！！！雅蠛蝶~~~</li>
<li>陈：救命！救命！</li>
</ul>
</div>
<div class="carBox">
<div class="carBody">
<div class="carDoorBox"><span class="carDoor"></span></div>
</div>
<span class="carWheel front">+</span>
<span class="carWheel back">+</span>
</div>
</div>
</body>
</html>
只支持主流浏览器哈，让低版本IE见鬼去吧~~~
