击右上方红色按钮关注“web秀”，让你真正秀起来

前言

昨天再次收到"月球居民爱丽丝"的投稿(非常感谢"月球居民爱丽丝")，希望做一个冰淇淋加载动画，原图：

看到如此美丽的冰淇淋是否想吃了？哈哈，大冬天的，还是不要了。今天我们就用CSS来制作一个冰淇淋吧。

解析

1、 抛开动画部分，冰淇淋分为2部分，能吃的冰淇淋和下方的木棍（都是可以直接用样式画出的）

2、 动画部分，细数有4种颜色，红色、米色、蓝色、橙色。

3、 冰淇淋左上方的高光效果

通过这样的解析，你是不是也可以制作一个简单冰淇淋了呢？

下面我们按步骤实现。

第一步（结构）

<div class="ice-cream"> 
 <div class="body"></div> 
 <div class="footer"></div> 
</div>

按照解析，我们把它也分成上下结构2部分，身体（冰淇淋）、脚（木棍）。

.ice-cream{ 
 width: 50px; 
 height: 120px; 
 margin: 100px auto; 
} 
.body{ 
 margin: 0 auto; 
 width: 50px; 
 height: 100px; 
 border-radius: 30px 30px 10px 10px; 
 background: red; 
} 
.footer{ 
 width: 10px; 
 height: 15px; 
 margin: 0 auto; 
 border-radius: 0 0 4px 4px; 
 background: #a77b64; 
}

这个效果相信很多小伙伴都会实现，2部分都是通过border-radius圆角来改变形状。这里就不做多的说明了。

第二步（动画）

同理，按解析，我们添加4种颜色到冰淇淋上面。

... 
<div class="body"> 
 <div class="loading"> 
 <div class="line"></div> 
 <div class="line"></div> 
 <div class="line"></div> 
 <div class="line"></div> 
 </div> 
</div>

添加不同颜色

.body{ 
 position: relative; 
 ... 
} 
... 
.loading{ 
 position: absolute; 
 width: 200px; 
} 
.loading .line{ 
 height: 40px; 
} 
.loading .line:nth-child(1){ 
 background: #ff7632; 
} 
.loading .line:nth-child(2){ 
 background: #46b0ff; 
} 
.loading .line:nth-child(3){ 
 background: #fffce5; 
} 
.loading .line:nth-child(4){ 
 background: red; 
}

发现把我们的整个冰淇淋都个盖住了，这时只需要添加overflow: hidden;即可。

.body{ 
 ... 
 overflow: hidden; 
}

然后我们把颜色部分旋转一个角度，并且使其动起来。

.loading{ 
 position: absolute; 
 width: 200px; 
 top: -77px; 
 left: -89px; 
 transform: rotate(45deg); 
 animation: move 2.5s linear infinite; 
} 
@keyframes move{ 
 from { 
 top: -77px; 
 left: -89px; 
 } 
 to { 
 top: 9px; 
 left: -84px; 
 } 
}

这时候你会发现怎么调整，动画中间都会有断层。

所以我的解决方案是，重新copy一份颜色，让其可持续循环的。

<div class="loading"> 
 <div class="line"></div> 
 <div class="line"></div> 
 <div class="line"></div> 
 <div class="line"></div> 
 <div class="line"></div> 
 <div class="line"></div> 
 <div class="line"></div> 
 <div class="line"></div> 
</div>
.loading{ 
 position: absolute; 
 top: -213px; 
 left: -27px; 
 width: 200px; 
 transform: rotate(45deg); 
 animation: move 2.5s linear infinite; 
} 
@keyframes move{ 
 from { 
 top: -213px; 
 left: -27px; 
 } 
 to { 
 top: -46px; 
 left: -83px; 
 } 
} 
.loading .line{ 
 height: 40px; 
} 
.loading .line:nth-child(1), 
.loading .line:nth-child(5){ 
 background: #ff7632; 
} 
.loading .line:nth-child(2), 
.loading .line:nth-child(6){ 
 background: #46b0ff; 
} 
.loading .line:nth-child(3), 
.loading .line:nth-child(7){ 
 background: #fffce5; 
} 
.loading .line:nth-child(4), 
.loading .line:nth-child(8){ 
 background: red; 
}

第三步（高光效果）

这个就是在body上面添加一个圆弧。

大家应该都看过前面的CSS3动画解析抖音 LOGO制作文章了，这里面有制作圆弧的示例。

.body:before{ 
 position: absolute; 
 content: ""; 
 width: 25px; 
 height: 25px; 
 border: 5px solid #fff; 
 border-right: 5px solid transparent; 
 border-top: 5px solid transparent; 
 border-left: 5px solid transparent; 
 border-radius: 100%; 
 top: 5px; 
 left: 5px; 
 transform: rotate(120deg); 
 opacity: 0.7; 
 z-index: 10; 
}

利用border画出1/4的圆，就可以啦。

最终效果：

不知道大家有没有get到每次开发的小经验了？开发前先分析，分小步骤，完成各个功能点。

公告

喜欢小编的点击关注，了解更多知识！

源码地址和源文件下载请点击下方“了解更多”

TML中常用的布局元素：<table>、<div>+CSS

<table>标签：

<table>指的是表格，用表格来搭建界面布局，即用表格的嵌套，来搭建界面布局。

<table>布局优势：

table优势：开发时间短（使用DW开发速度快）；纯table各浏览器不会有兼容问题；内容可自适应；在搜索引擎排名能靠前；

但是 table如果布局变更，需要重新开发；如果table里有div ul 等，可能会出现浏览器兼容问题；加载速度慢；table嵌套的太多，运维是非常困难的。

<div>块级（block-level）标签：

DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。

<div>布局优势：

一.精简代码，减少重构难度。

网站使用DIV+CSS布局使代码很是精简，css文件可以在网站的任意一个页面进行调用，而若是使用table表格修改部分页面却是显得很麻烦。要是一个门户网站的话，需手动改很多页面，而且看着那些表格也会感觉很乱也很浪费时间，但是使用css+div布局只需修改css文件中的一个代码即可。

二.网页访问速度

使用了DIV+CSS布局的网页与Table布局比较，精简了许多页面代码，那么其浏览访问速度自然得以提升，也从而提升了网站的用户体验度。

三.SEO优化

采用div-css布局的网站对于搜索引擎很是友好，因此其避免了Table嵌套层次过多而无法被搜索引擎抓取的问题，而且简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。

四.浏览器兼容性

若使用table布局网页，在使用不同浏览器情况下会发生错位，而div+css则不会，无论什么浏览器，网页都不会出现变形情况。

HTML中常用的3种布局方式：

1.流动式布局：是HTML网页默认的布局方式

特点：

1.块级元素都会在所处的包含元素内自上而下按顺序处置延伸分布，且默认状态下，块级元素占整个文档流，默认宽度为100%。

2.内联元素都会在所处的包含元素内从左到右水平分布显示，不占整个文档流。

常见的块级（block）元素有：<h1-h5> 、<table>、 <ul>、<li> 、<p> 、<form>、 ol

常见的内内联（行内）元素有：<a>、<span>、<img>、<input>、<select>、<textarea>

2.浮动布局（float）

特点：

浮动布局依靠【 浮动属性 float：left/right/... 】来使标签脱离文档流，达到两个块级元素并排显示的效果。

float：left ； 浮动脱离当前文档流浮动。

同时可以依靠【展示属性display：inline/block/inline-block】来进行行内元素和块级元素的效果切换。从而达到灵活运用块级元素和行内元素布局的效果。

3.层模型布局又叫定位布局

特点：

当我们应拥div布局是，在第一层块界面上来做第二层块界面的开发时，就要用到我们所说的定位布局。

通过运用【定位属性position:absolute/relative/fixed】 来进行第二层界面的定位布局。

网页是静态的，网页上的定位

position：absolute ；绝对定位脱离文档流，不受浮动影响，就是相对于窗体（body）边界的margin定位。

position：relative； 相对定位不脱离文档流，相对于父级标签元素的位置定位。

position:fixed；固定位置，不会受任何因素影响。

优先层显示方法：【属性：z-index:0/1/2...】

特点： 数值越大，越优先显示。

注意：只有元素使用了position属性的，才具有z-index属性。

本文部分内容来自网络，如有侵权，请联系修改。