CSS3动画第二式--组合动画
接第一式之后的进阶招式，加入一些组合动画，剧情、动画啥的都是随意瞎想的，纯粹是为了熟悉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见鬼去吧~~~
CSS3动画第二式--组合动画的更多相关文章
- CSS3鼠标滑过动画线条边框特效
基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/ ...
- css3实现循环执行动画，且动画每次都有延迟
一.最终效果 需求:gift图片的小动画每隔2s执行一次. 需求就一句话,我们看一下实现过程. 二.实现过程 1.网页结构 <!DOCTYPE html> <html lang=&q ...
- 使用 CSS3 动感的图片标题动画效果【附源码下载】
在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...
- jQuery+CSS3实现404背景动画特效
效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: ...
- css3中变形与动画（三）
transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...
- css3 实现逐帧动画
css3 实现逐帧动画 实现逐帧动画需要使用到的是Animation动画,该CSS3的Animation有八个属性:分别是如下:1: animation-name2: animation-durati ...
- 纯css3 加载loading动画特效
最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...
- css3动画和jquery动画使用中要注意的问题
前一阵子写demo的时候遇到这样一个问题,就是给元素添加css3或者jquery动画时,在动画结束前不能准确取到元素的css属性. 1. css3动画讨论 先看代码: html: <div id ...
- 2款不同样式的CSS3 Loading加载动画 附源码
原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
随机推荐
- angular学习笔记(二十八)-$http(6)-使用ngResource模块构建RESTful架构
ngResource模块是angular专门为RESTful架构而设计的一个模块,它提供了'$resource'模块,$resource模块是基于$http的一个封装.下面来看看它的详细用法 1.引入 ...
- 主席树——求静态区间第k大
例题:poj2104 http://poj.org/problem?id=2104 讲解:http://blog.sina.com.cn/s/blog_6022c4720102w03t.html ht ...
- C++ "+="等运算符使用bug
昨晚写了一个程序,使用了"+="运算符,结果总不是我想要的,查了一晚没找到,今早才发现: timeInterval = tpImP.staTime - imgPara[serial ...
- [LeetCode] Shortest Word Distance II 最短单词距离之二
This is a follow up of Shortest Word Distance. The only difference is now you are given the list of ...
- nginx 虚拟主机配置
user nginx; #代表使用的用户 worker_processes auto; #工作衍生进程数,一般代表系统cpu核数一到两倍最好 error_log /var/log/nginx/erro ...
- telent对端口检测状态分析
telnet基于TCP/IP协议通信的,把远程的shell反弹回本地! yum install -y telnet apt-get install telnet ###端口被封,有墙堵住 [root ...
- Node中的定时器详解
在大多数的业务中,我们都会有一些需求,例如几秒钟实现网页的跳转,几分钟对于后台数据进行清理,node与javascript都具有将代码延迟一段时间的能力.在node中可以使用三种方式实现定时功能:超时 ...
- canvas
1. 画布可以通过两只手指上下移动,画布大小默认为屏幕大小的2倍,通过自定义View,嵌套scollview实现. Y 2. 通过处理手指触摸事件,一根手指时,使用Canvas绘制移动路径,产生直线: ...
- Linux用户管理（centos）
useradd testuser; 添加用户 testuser为用户名 passwd testuser; 修改用户密码 提示两次输入密码 赋予root权限 修改 /etc/sudoers 文件,找 ...
- ES6深入学习记录(一)class方法相关
今天学习class相关的一些使用方法,着重在于class extends class之间可以通过extends关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多. 上面的代码定义了一 ...