前言

今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画。在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的。但是自从CSS3横空出世,在移动端对CSS3动画的运用越来越多。今天这个分享是PC端的案例,因为我做的是大场景来的,起因还是我无意间看到一张卡通图片。于是我突发灵感,就趁热打铁使用CSS3动画把它按照自己的想法实现了出来。接下来,就让我们一起进入这个好玩的分享吧!

预览

学习一个案例要有热情,就应该先看一下案例的效果,所以,下图为我录的gif图片,大家先看一下:

没错,上图中每一个细节都是使用CSS3制作的,有没有感觉像flash做的,哈哈!!!

此图还是有掉帧或者卡顿现象,我这里提供在线查看地址:

http://www.jr93.top/cartoonAnimation/index.html

我已经对所有主流浏览器都做了兼容,但是有时候动画太快会有模糊现象,这个我暂定认为是浏览器渲染问题。

正题

OK,接下来我将仔细分析一下这个案例的每一部分效果,但是可以看到其实场景有很多重复的小部分,比如窗户,树,山等。那么我就将选取其中一个作为此次讲解的对象。另外,这个案例的工作量还是偏多的,所以我不会每一个步骤都讲得很到位,主要还是把我的思路讲解一下,给大家自己思考吸取。文章最后我会把github地址告诉大家,方便使用这里案例。接下来就赶紧进入主题吧!

首先,肯定是搭建html结构,这个的话需要根据自己对场景的剖析,做到自己心里有数,然后就会很自然地将html结构搭建出来。本案例html代码如下:

<div class="container">
    <!-- 山 -->
    <div class="mountain">
        <div class="part_one"></div>
        <div class="part_two"></div>
        <div class="part_three"></div>
        <div class="part_four"></div>
    </div>
    <!-- 道路 -->
    <div class="load"></div>
    <!-- 石头 -->
    <div class="stone"></div>
    <!-- 太阳 -->
    <div class="sun">
        <div class="sunshine"></div>
        <div class="center_sun"></div>
    </div>
    <!-- 云朵 -->
    <div class="cloud"></div>
    <!-- 房子 -->
    <div class="house">
        <!-- 旗子部分 -->
        <div class="flag_whole">
            <!-- 旗杆 -->
            <div class="pole"></div>
            <!-- 旗面 -->
            <div class="flag">
                <span class="star"></span>
                <span class="littlestar star1"></span>
                <span class="littlestar star2"></span>
                <span class="littlestar star3"></span>
                <span class="littlestar star4"></span>
            </div>
        </div>
        <!-- 墙面 -->
        <div class="wall"></div>
        <!-- 房顶 -->
        <div class="roof"></div>
        <!-- 二楼 -->
        <div class="secondFloor">
            <!-- 窗户 -->
            <div class="window w1">
                <!-- 窗户帐篷 -->
                <div class="window_tent"></div>
                <!-- 窗体 -->
                <div class="window_body"></div>
            </div>
            <div class="window w2">
                <!-- 窗户帐篷 -->
                <div class="window_tent"></div>
                <!-- 窗体 -->
                <div class="window_body"></div>
            </div>
            <div class="window w3">
                <!-- 窗户帐篷 -->
                <div class="window_tent"></div>
                <!-- 窗体 -->
                <div class="window_body"></div>
            </div>
            <div class="window w4">
                <!-- 窗户帐篷 -->
                <div class="window_tent"></div>
                <!-- 窗体 -->
                <div class="window_body"></div>
            </div>
        </div>
        <div class="firstFloor">
            <!-- 窗户 -->
            <div class="window f-w1">
                <!-- 窗户帐篷 -->
                <div class="window_tent"></div>
                <!-- 窗体 -->
                <div class="window_body"></div>
            </div>
            <div class="window f-w2">
                <!-- 窗户帐篷 -->
                <div class="window_tent"></div>
                <!-- 窗体 -->
                <div class="window_body"></div>
            </div>
            <!-- 门 -->
            <div class="door">
                <!-- 门梁 -->
                <div class="door_over"></div>
                <!-- 门主体 -->
                <div class="door_body">
                    <div class="leftDoor"></div>
                    <div class="rightDoor"></div>
                </div>
            </div>
            <div class="window f-w3">
                <!-- 窗户帐篷 -->
                <div class="window_tent"></div>
                <!-- 窗体 -->
                <div class="window_body"></div>
            </div>
        </div>
    </div>
    <!-- 树 -->
    <div class="trees">
        <div class="leftTree"><span></span></div>
        <div class="leftTree l2"><span></span></div>
        <div class="rightTree"><span></span></div>
        <div class="rightTree r2"><span></span></div>
    </div>
    <!-- 第一辆汽车 -->
    <div class="car">
        <div class="car_body">
            <div class="car_top1"></div>
            <div class="car_top2"></div>
            <div class="car_win1"></div>
            <div class="car_win2"></div>
            <div class="car_bottom1"></div>
            <div class="car_bottom2"></div>
        </div>
        <div class="frontWheel"></div>
        <div class="endWheel"></div>
        <div class="exhaust"></div>
    </div>
    <!-- 第二辆车(浅绿色) -->
    <div class="car2">
        <div class="car2_top"></div>
        <div class="car2_win"></div>
        <div class="car2_bottom">
            <div class="car2_light1"></div>
            <div class="car2_light2"></div>
            <div class="car2_light3"></div>
        </div>
        <div class="car2_frontWheel"></div>
        <div class="car2_endWheel"></div>
    </div>
</div>

是不是够多的,我都预感博文篇幅会很长,大家要保持耐心哦!

还是需要仔细看一下html结构,因为接下来就都是CSS3干的活了:

这里先对最外层的容器做一下样式:

.container{
    width: 800px;
    height: 450px;
    margin: 20px auto;
    position: relative;
    background: rgb(187,235,255);
    border:1px solid #ddd;
    box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1);
    overflow: hidden;
}

接下来分步讲解:

第一部分:天空,陆地

这部分就太简单了,最外层容器已经设置了天空的背景色,所以只需要将陆地的部分绘制出来就行了:

.load{
    position: relative;
    top:290px;
    background: rgb(27,121,160);
    height: 160px;
}

看一下效果:

第二部分:山脉,太阳,白云

首先是山脉的绘制,从上面的动图可以看到,山脉都是一些不同夹角的三角形状,那么其实我们制作的时候没必要说非得画出一模一样的形状出来,这里我都是绘制矩形,然后通过旋转来完成的,因为陆地在山脉上面,所以就遮掉了一部分,就能达到我们看到的效果,最关键的一点是夹角的度数问题,可以看到有锐角和钝角,这个我使用了skew()方法对矩形进行倾斜,然后旋转到合适的角度就达到我自己想要的效果了,第一块山脉代码如下:

.mountain .part_one{
    width:300px;
    height: 300px;
    background: rgb(106,207,255);
    position: absolute;
    -webkit-transform:rotate(30deg) skew(-20deg) translate3d(120px,200px,0);
    -moz-transform:rotate(30deg) skew(-20deg) translate3d(120px,200px,0);
    -o-transform:rotate(30deg) skew(-20deg) translate3d(120px,200px,0);
    -ms-transform:rotate(30deg) skew(-20deg) translate3d(120px,200px,0);
    transform:rotate(30deg) skew(-20deg) translate3d(120px,200px,0);
}

白云的话,这个就简单了,一个div加上两个伪元素就搞定,不多说,代码如下:

.cloud{
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    left:-60px;
    top:20px;
}
.cloud:before{
    content: '';
    display: inline-block;
    width: 40px;
    height: 16px;
    border-radius: 16px 0 0 16px;
    background: #fff;
    position: absolute;
    bottom:;
    left:-12px;
}
.cloud:after{
    content: '';
    display: inline-block;
    width: 40px;
    height: 28px;
    border-radius: 0 28px 28px 0;
    background: #fff;
    position: absolute;
    bottom:;
    right:-16px;
}

太阳的制作主要还是太阳的光圈,这里我采用的是比较卡通的做法,显得比较可爱,而且形象地体现出天气阳光明媚。具体我使用了渐变背景,再加上一个阴影,然后实现动画效果,看起来有活力一些,代码如下:

.sun{
    position: relative;
}
.sun .center_sun{
    width:40px;
    height:40px;
    background: rgb(255,255,123);
    border-radius: 50%;
    position: absolute;
    top:-120px;
    right:160px;
}
.sun .sunshine{
    width:60px;
    height:60px;
    background: #f67e28; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #f67e28 0%, #f67e28 50%, #f4bf9a 60%, #f4bf9a 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#f67e28), color-stop(50%,#f67e28), color-stop(60%,#f4bf9a), color-stop(100%,#f4bf9a)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, #f67e28 0%,#f67e28 50%,#f4bf9a 60%,#f4bf9a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, #f67e28 0%,#f67e28 50%,#f4bf9a 60%,#f4bf9a 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, #f67e28 0%,#f67e28 50%,#f4bf9a 60%,#f4bf9a 100%); /* IE10+ */
    background: radial-gradient(ellipse at center, #f67e28 0%,#f67e28 50%,#f4bf9a 60%,#f4bf9a 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f67e28', endColorstr='#f4bf9a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    position: absolute;
    top:-130px;
    right:150px;
    border-radius:50%;
    box-shadow: 0 0 2px 4px rgba(246,126,40,0.3);
}

效果图如下:

第三部分:房子和树

房子这一部分基本就是布局了,没什么难度,但是也有很多技巧,可让html结构更精简。

房子我分成房顶,旗子,墙,二楼,一楼:

1.墙:这是房子的基本,就是一个矩形,这里不赘述。

2.房顶:这里就是一个小正方形加上边框,旋转45度,也简单,不赘述。

3.旗子:难点其实在于旗面的五角星,比较烦,由于在场景中显示比较小,所以五角星的绘制不需要精准到位,大概形状像五角星就行,特别是旁边四个小星星。

4.二楼:我这里给二楼设置了高度,然后设置它的上下边框以实现一二楼的遮出层,窗户的话,要巧用两个伪元素,特别是窗户上面的遮篷部分,四个白色竖条就是使用两个伪元素的左右边框实现的。

5.一楼:一楼基本跟二楼差不多,门的绘制道理都相通,不赘述。

树的话,跟白云的绘制一样简单,不赘述。

效果图如下:

由于这一块的代码量有点多,我就不放上来了,直接到github下载吧。

第四部分:两辆汽车和石头

汽车本身的绘制关键也是使用了skew()方法,其他都是布局的问题,我就直接给代码:

.stone{
    width:30px;
    height: 16px;
    background: #333;
    border-radius: 16px 16px 5px 5px;
    position: absolute;
    top:410px;
    left:550px;
    box-shadow: 1px 1px 1px #333;
}
.car{
    position: absolute;
    left:900px;
    top:340px;
    z-index:;
}
.car .car_body{
    position: absolute;
}
.car .car_top1,.car .car_top2{
    width:45px;
    height: 35px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    background: rgb(246,126,40);
    position: absolute;
    left:;
    top:;
    -webkit-transform:skew(24deg);
    -moz-transform:skew(24deg);
    -o-transform:skew(24deg);
    -ms-transform:skew(24deg);
    transform:skew(24deg);
}
.car .car_top1{
    left:-29px;
    top:0px;
    -webkit-transform:skew(-24deg);
    -moz-transform:skew(-24deg);
    -o-transform:skew(-24deg);
    -ms-transform:skew(-24deg);
    transform:skew(-24deg);
}
.car .car_win1,.car .car_win2{
    width:24px;
    height:24px;
    background: #fff;
    border-top-left-radius:10px;
    position: absolute;
    left:13px;
    top:6px;
    -webkit-transform:rotate(80deg) skew(-10deg);
    -moz-transform:rotate(80deg) skew(-10deg);
    -o-transform:rotate(80deg) skew(-10deg);
    -ms-transform:rotate(80deg) skew(-10deg);
    transform:rotate(80deg) skew(-10deg);
}
.car .car_win1{
    left:-22px;
    -webkit-transform:rotate(0deg) skew(-10deg);
    -moz-transform:rotate(0deg) skew(-10deg);
    -o-transform:rotate(0deg) skew(-10deg);
    -ms-transform:rotate(0deg) skew(-10deg);
    transform:rotate(0deg) skew(-10deg);
}
.car .car_win1:after,.car .car_win2:after{
    content:'';
    display:inline-block;
    width:10px;
    height: 24px;
    background: #fff;
    position: absolute;
    left:16px;
    top:;
    -webkit-transform:skew(10deg);
    -moz-transform:skew(10deg);
    -o-transform:skew(10deg);
    -ms-transform:skew(10deg);
    transform:skew(10deg);
}
.car .car_win2:after{
    top:9px;
    left:7px;
    -webkit-transform:rotate(-90deg) skew(-10deg);
    -moz-transform:rotate(-90deg) skew(-10deg);
    -o-transform:rotate(-90deg) skew(-10deg);
    -ms-transform:rotate(-90deg) skew(-10deg);
    transform:rotate(-90deg) skew(-10deg);
}
.car .car_bottom1,.car .car_bottom2{
    width:74px;
    height:33px;
    background: rgb(246,126,40);
    border-top-left-radius: 24px 20px;
    border-bottom-left-radius: 3px;
    border-bottom:8px solid rgb(186,188,187);
    position: absolute;
    top:34px;
    left:-66px;
    -webkit-transform:skew(-4deg);
    -moz-transform:skew(-4deg);
    -o-transform:skew(-4deg);
    -ms-transform:skew(-4deg);
    transform:skew(-4deg);
}
.car .car_bottom2:before{
    content: 'JR';
    font-size:12px;
    font-weight: bolder;
    color:#fff;
    position: absolute;
    top:5px;left:45px;
}
.car .car_bottom1:after{
    content: '';
    display: inline-block;
    background: rgb(247,244,111);
    width:10px;
    height: 16px;
    border-radius: 6px/8px;
    position: absolute;
    top:11px;
    left:6px;
}
.car .car_bottom2{
    height: 36px;
    border-top-left-radius:;
    border-top-right-radius: 13px 17px;
    border-bottom-right-radius: 3px;
    left:0px;
    top:31px;
    -webkit-transform:skew(8deg);
    -moz-transform:skew(8deg);
    -o-transform:skew(8deg);
    -ms-transform:skew(8deg);
    transform:skew(8deg);
}
.car .frontWheel,.car .endWheel{
    width:34px;
    height:34px;
    border-radius: 50%;
    background:#333;
    position: absolute;
    top:55px;
    left:-40px;
}
.car .endWheel{
    left:20px;
}
.car .frontWheel:after,.car .endWheel:after{
    content: '';
    display: inline-block;
    width:14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top:50%;
    left:50%;
    margin-top: -7px;
    margin-left: -7px;
}
.car .exhaust{
    width:18px;
    height:18px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px 8px 8px 1px;
    position: absolute;
    left:80px;
    top:55px;
    opacity:;
}
.car2{
    position: absolute;
    left:900px;
    top:250px;
    z-index:;
}
.car2 .car2_top{
    width:55px;
    height: 40px;
    border-top-left-radius:15px;
    border-top-right-radius:10px;
    background: rgb(117,191,135);
    position: absolute;
    left:-29px;
    top:0px;
    -webkit-transform:skew(-20deg);
    -moz-transform:skew(-20deg);
    -o-transform:skew(-20deg);
    -ms-transform:skew(-20deg);
    transform:skew(-20deg);
}
.car2_top:after{
    content: '';
    display: inline-block;
    width:12px;
    height: 40px;
    background: rgb(117,191,135);
    -webkit-transform:skew(20deg);
    -moz-transform:skew(20deg);
    -o-transform:skew(20deg);
    -ms-transform:skew(20deg);
    transform:skew(20deg);
    position: absolute;
    left:48px;
}
.car2 .car2_win{
    width:42px;
    height:30px;
    background: #fff;
    border-top-left-radius:10px;
    position: absolute;
    top:5px;
    left:-22px;
    -webkit-transform:rotate(0deg) skew(-20deg);
    -moz-transform:rotate(0deg) skew(-20deg);
    -o-transform:rotate(0deg) skew(-20deg);
    -ms-transform:rotate(0deg) skew(-20deg);
    transform:rotate(0deg) skew(-20deg);
}
.car2_win:after{
    content: '';
    display: inline-block;
    width:12px;
    height: 30px;
    background: #fff;
    -webkit-transform:skew(20deg);
    -moz-transform:skew(20deg);
    -o-transform:skew(20deg);
    -ms-transform:skew(20deg);
    transform:skew(20deg);
    position: absolute;
    left:36px;
}
.car2 .car2_bottom{
    width: 180px;
    height: 56px;
    background: rgb(117,191,135);
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    position: absolute;
    top:39px;
    left:-60px;
}
.car2 .car2_bottom .car2_light1{
    width:14px;
    height: 20px;
    background: rgb(229,230,88);
    border-radius: 20px/30px;
    position: absolute;
    left:-3px;
    top:18px;
}
.car2 .car2_bottom .car2_light2,.car2 .car2_bottom .car2_light3{
    width:12px;
    height: 12px;
    background: rgb(229,230,88);
    border-radius: 50%;
    position: absolute;
    right:-8px;
    top:12px;
}
.car2 .car2_bottom .car2_light3{
    top:36px;
}
.car2 .car2_frontWheel,.car2 .car2_endWheel{
    width:40px;
    height:40px;
    background: #333;
    border-radius: 50%;
    position: absolute;
    top:75px;
    left:-30px;
}
.car2 .car2_endWheel{
    left:60px;
}
.car2 .car2_frontWheel:after,.car2 .car2_endWheel:after{
    content: '';
    display: inline-block;
    width:20px;
    height: 20px;
    background: rgb(216,107,82);
    border-radius: 50%;
    position: absolute;
    top:50%;
    left:50%;
    margin-left: -10px;
    margin-top: -10px;
}

主要还是讲解一下动画效果实现的原理:

1.浅绿色货车就没什么好说的了,直接改变left值,一直开过去就行了。

2.橙色汽车动画步骤分析:首先汽车比较快地从远处往餐厅方向开过来,不小心磕碰到路面上的石头,由于汽车速度有点快,惯性大,所以汽车后半身往上翘,同时汽车往前推行了一点点,当汽车掉下来的时候,由于重力的原因,车身会有缓动的效果,表现为掉落时车身向下压,然后回弹,此车司机撞懵了一下,然后重启汽车,开始汽车前行有点故障,然后过一小会就恢复正常,最后就开走了。大致思路就是这样,具体实现肯定是慢慢琢磨的过程了,要让动画效果合乎常理而又不失趣味性,才是真正考验的地方。

以上所有步骤完成了的话,那么久实现了最初预览时的效果了。

如果想学习整个案例的话,可以前往我提供的github地址下载:

https://github.com/JR93/cartoonAnimation

希望对大家学习CSS3有所帮助!

若需转载,请注明出处,谢谢合作!

纯CSS3制作卡通场景汽车动画效果的更多相关文章

  1. css3动画特效:纯css3制作win8加载动画特效

    Windows 8     完整效果如上图:这个里面可能是css冲突,喜欢的可以自己去体征一下:   css特效代码: <style type="text/css"> ...

  2. 分享9款用HTML5/CSS3制作的动物人物动画

    1.纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分享一个利用纯CSS3绘制的蚱蜢动画,非常可爱. 在线演示 源码下载 2.HTML5 Canvas头发飘逸动画 很酷的HTML5动画 HTML5 ...

  3. 用css3制作旋转加载动画的几种方法

    以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...

  4. 7款纯CSS3实现的炫酷动画应用

    1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...

  5. 学习使用 CSS3 制作网站面包屑导航效果

    作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...

  6. 基于CSS3制作的鼠标悬停动画菜单

    之前分享了好多款css3实现的鼠标悬停效果.今天再给大家带来一款基于CSS3制作的鼠标悬停动画菜单.这款菜单适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界 ...

  7. 实用CSS3的transform实现多种动画效果

    查看效果:http://keleyi.com/a/bjad/b6x9q8gs.htm 以下是代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. ...

  8. html5+css3第一屏滚屏动画效果

    详细内容请点击 在线预览立即下载 html5+css3第一屏滚屏动画效果. 转载自:http://tympanus.net/codrops/2014/05/22/inspiration-for-art ...

  9. 7款纯CSS3实现的炫酷动画应用|慕课网只学有用的!

    关于我们 | 时尚廊 ♦ 时尚廊,中国大陆地区首家以"Lounge"为概念的艺文空间 ♦  7款纯CSS3实现的炫酷动画应用|慕课网只学有用的! 7款纯CSS3实现的炫酷动画应用

随机推荐

  1. springMVC异常&amp;&amp;重定向&amp;&amp;转发

    SpringMVC核心技术---转发和重定向 当处理器对请求处理完毕后,向其他资源进行跳转时,有两种跳转方式:请求转发与重定向.而根据要跳转的资源类型,又可分为两类:跳转到页面与跳转到其他处理器.对于 ...

  2. canvas九宫格跑马灯

    canvas九宫格跑马灯抽奖 之前用dom写了一版,部分 安卓机会卡顿,换用canvas dom版本九宫格抽奖

  3. linux部署pxe+kickstart批量安装linux操作系统

    环境 系统 centos6.6 无图形界面 ip 192.168.2.1 系统 centos7.2 有图形界面 以下命令在centos6.6上执行 1. yum -y install dhcp* tf ...

  4. python基础之数据类型(二)

    Python3 元组 Python 的元组与列表类似,不同之处在于元组的元素不能修改. 元组使用小括号,列表使用方括号. 元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可. 不可变的tupl ...

  5. response.sendRedirect的细节

    今天敲书上的例子的时候无意间发现,response中的sendRedirect()重定向到另一个servlet时,调用的是doget方法,不明所以,百度得知,原来还牵扯到http协议的细节问题,原文如 ...

  6. CoreData的使用

    #import "ViewController.h" #import "Person.h" @interface ViewController () <U ...

  7. 安装vmall5:从ebak恢复数据,需要配置php.ini

    上传vmall5源码到服务器后访问ebak目录,发现网页不显示.用xshell登录到服务器手动执行ebak/index.php查看输出,发现这样一个错误: PHP Parse Error: synta ...

  8. C++11的模板新特性-变长参数的模板

    这个特性很赞,直接给例子吧,假如我要设计一个类,CachedFetcher内部可能使用std::map也可能使用std::unordered_map,也可能是其它的map,怎么设计呢?没有C++11变 ...

  9. 理解angularjs的作用域

    <!doctype html> <html ng-app="myApp"> <head> <script src="http:/ ...

  10. resultMap / resultType

    ===================resultMap:实体类的属性和通过resultMap映射后的property属性一致 <resultMap id="workerSelect& ...