上面代码中的.wave在页面上的显示效果是一个圆形。虽然还没有添加动画，但是我们已经可以预想到，即使旋转起来，我们视觉上看来并没有在运动。这要怎么解决呢？其实很简单，只要让每一个角的弧度都不同就行了。同时，让宽高不同，可以使绘制出来的效果更好。

.wave { width: 250px; height: 300px; border-top-right-radius: 150px; border-top-left-radius: 150px; border-bottom-right-radius: 150px; border-bottom-left-radius: 140px; background: #adcbfe; }

然后通过动画使这个不规则的形状动起来。

.wave { width: 250px; height: 300px; border-top-right-radius: 150px; border-top-left-radius: 150px; border-bottom-right-radius: 150px; border-bottom-left-radius: 140px; background: #adcbfe; animation: wave 4s linear infinite; } @keyframes wave { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} }

关于 css 动画的使用，可以参考之前的一篇文章：

纯CSS实现轮播图效果

到这里，一个波浪的实现就完成了。第二个波浪的实现步骤和第一个是相同的，但是可以对width height border-raduis animation 这些属性进行修改，使两个波浪的运动节奏不同，有快有慢有高有低，这样波浪的效果就会更真实。

相关推荐：

本文主要介绍了详解CSS 3 的 calc() 方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下，希望能帮助到大家。

下面一段代码给大家介绍css3中的calc()方法，具体内容如下所示：

<p style="width:100px; height:50px; background:red;"> <p style="width:100%; height:20px; margin:5px; background:green;"></p> </p>

[Ctrl+A 全部选择 提示：您可先修改部分代码，再按运行]

如上代码，预览可以看出红色框超出了，因为在标准的 CSS 中，width 是不包含 margin 的（老 IE 中 width 是包含 margin 的）。

为了达到上述效果，我们一般会在中间再套一层 p（有人说，不是把 width:100% 取了就可以了么？冷静，我们是举例，实际有些情况下，不能取消 width:100%。）

有没有更方便的呢？用 calc() 吧。

<p style="width:100px; height:50px; background:red;"> <p style="width:calc(100% - 10px); height:20px; margin:5px; background:green;"></p> </p>

[Ctrl+A 全部选择 提示：您可先修改部分代码，再按运行]

使用说明

支持性

主流的桌面浏览器都支持。据说手机浏览器几乎不支持。

相关推荐：

文件后缀名称：sass有两种后缀名文件，一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号。而本教程中所说的所有sass文件都指后缀名为scss的文件。在此也建议使用后缀名为scss的文件，以避免sass后缀名的严格格式要求报错。

//文件后缀名为sass的语法 body background: #eee font-size:12px p background: #0982c1 //文件后缀名为scss的语法 body { background: #eee; font-size:12px; } p{ background: #0982c1; }

2. Sass、Less语法比较

2.1 Sass与Less不同之处

2.2 Sass与Less相似的地方

3. Sass语法主要功能介绍

3.1 CSS功能扩展

嵌套规则

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理，例如：

//sass style or less style #main p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; } } //css style #main p { color: #00ff00; width: 97%; } #main p .redbox { background-color: #ff0000; color: #000000; }

父选择器 &

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。

//sass style or less style a { font-weight: bold; text-decoration: none; &:hover { text-decoration: underline; } body.firefox & { font-weight: normal; } } //css style a { font-weight: bold; text-decoration: none; } a:hover { text-decoration: underline; } body.firefox a { font-weight: normal; }

属性嵌套

有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中，例如：

//sass style .funky { font: { family: fantasy; size: 30em; weight: bold; } } //css style .funky { font-family: fantasy; font-size: 30em; font-weight: bold; }

命名空间也可以包含自己的属性值，例如：

//sass style .funky { font: 20px/24px { family: fantasy; weight: bold; } } //css style .funky { font: 20px/24px; font-family: fantasy; font-weight: bold; }

3.2导入