【源码实例】纯CSS水波纹效果和动画气泡

evinelong web前端开发

Knowlegde can change your fate and English can accomplish your future.
知识改变命运，英语成就未来。

正在分享另一个纯CSS实验工作的例子，在波形或纹波效应的水中创建动画气泡，而不使用任何图像或JavaScript。这些动画气泡也具有弹奏效果。所有这些Lab元素都是由Pure CSS创建和动画的。

以前，我用同样的概念分享了“ 纯粹的CSS ”，“ 持续不断的动画气泡 ”。那时候，我已经用了一个简单的图像用于装满半液体的锥形瓶。但是，在本教程中，我已经通过CSS创建了所有这些元素。

如果您是化学学生或访问过任何化学实验室，您可以轻松识别这些物体，如烧瓶，液体和气泡。

HTML＆CSS - 玻璃瓶

起初，我们将创建一个Flask。圆底烧瓶包括开口，颈部和具有球形底部。为了在Flask中创建一个逼真的Glass效果，我已经使用了一些CSS渐变与alpha。

这是HTML代码：

<div class =“css-jar”> <div class =“flask-mouth”> </ div> <div class =“flask-neck”> </ div> <div class =“flask-base”> </ div></ div>

这是Flask的CSS代码：

.css-jar {  position: relative;  width: 195px;  margin: 49px auto 0;  text-align: center;  transform:scale(2.5);}.css-jar .flask-mouth {  background: radial-gradient(circle at 50% 55%, rgba(240, 245, 255, 0.9), rgba(240, 245, 255, 0.9) 40%, rgba(225, 238, 255, 0.8) 60%, rgba(43, 130, 255, 0.4));  width: 40px;  height: 10px;  margin: 0 auto -1px;  border-right: 1px solid rgb(43, 130, 255);  border-left: 1px solid rgb(43, 130, 255);  border-radius: 19px;  -o-border-radius: 19px;  -ms-border-radius: 19px;  -webkit-border-radius: 19px;  -moz-border-radius: 19px;}.css-jar .flask-neck {  width: 34px;  height: 46px;  margin: 0 auto -7px;  z-index: 7;  position: relative;  border-right: 1px solid rgb(43, 130, 255);  border-left: 1px solid rgb(43, 130, 255);  background: radial-gradient(circle at 50% 55%, rgba(240, 245, 255, 0.9), rgba(240, 245, 255, 0.9) 40%, rgba(225, 238, 255, 0.8) 60%, rgba(43, 130, 255, 0.4));}.css-jar .flask-base {  margin: auto;  width: 117px;  height: 97px;  border: 1px solid rgb(43, 130, 255); border-top:0 solid #FFF;  border-radius: 50%;  -o-border-radius: 50%;  -ms-border-radius: 50%;  -webkit-border-radius: 50%;  -moz-border-radius: 50%;  overflow: hidden;  position: relative;  z-index: 5;  background: radial-gradient(circle at 50% 55%, rgba(240, 245, 255, 0.9), rgba(240, 245, 255, 0.9) 40%, rgba(225, 238, 255, 0.8) 60%, rgba(43, 130, 255, 0.4));}

现在，我们创造了一个空的圆底玻璃瓶。我们必须填充液体。

用波纹涟漪创造液体/水

为了创造现实的水，我们必须在掩蔽液体层的顶部添加纹波或波浪效应。对于这个动画的液体效果，我用了两个元素。首先是水或液体，第二是波浪或波纹。

Html部分动画液体代码：

<div class="css-liquid"></div><div class="css-wave"></div>

我们将把这个html添加到div中，用“flask-base”类来创建一个装满的瓶子。现在，更新的HTML代码如下：

<div class =“css-jar”>  <div class =“flask-mouth”> </ div>  <div class =“flask-neck”> </ div>  <div class =“flask-base”>  <div class =“css-liquid”> </ div>  <div class =“css-wave”> </ div>  <div class =“css-wave”> </ div>  <div class =“css-bubble”> </ div>  <div class =“css-bubble”> </ div>  </ div>  <div class =“css-bubble”> </ div>  <div class =“css-bubble”> </ div></ div>

为了在液体中创建动画波形效果，我们更新的CSS如下：

.css-jar .css-liquid {  height: 39px;  background-color: rgb(53,238,251);  position: absolute;  bottom: 0;  left: 0;  right: 0;}.css-jar .css-wave {  width: 58px;  height: 19px;  position: absolute;  background-color: rgb(53,238,251);  left: 0;  top: 56px;  animation: css-wave 1.15s linear 1.15s infinite alternate;  -o-animation: css-wave 1.15s linear 1.15s infinite alternate;  -ms-animation: css-wave 1.15s linear 1.15s infinite alternate;  -webkit-animation: css-wave 1.15s linear 1.15s infinite alternate;  -moz-animation: css-wave 1.15s linear 1.15s infinite alternate;  border-radius: 50%;  -o-border-radius: 50%;  -ms-border-radius: 50%;  -webkit-border-radius: 50%;  -moz-border-radius: 50%;}.css-jar .css-wave + .css-wave {  left: auto;  right: 0;}

用于创建动画气泡

现在，它转向创造动画气泡。为此，我们创建了一个带有“css-bubble”类的div。对于这个新的“泡泡”元素，我已经写了一些CSS动画。

.css-jar .flask-base .css-bubble {  left: 15px;  top: 49px;  animation: css-bounce 2.65s linear 0s infinite alternate;  -o-animation: css-bounce 2.65s linear 0s infinite alternate;  -ms-animation: css-bounce 2.65s linear 0s infinite alternate;  -webkit-animation: css-bounce 2.65s linear 0s infinite alternate;  -moz-animation: css-bounce 2.65s linear 0s infinite alternate;}.css-jar .flask-base .css-bubble + .css-bubble {  left: 73px;  top: 39px;  animation-duration: 3.45s;  -o-animation-duration: 3.45s;  -ms-animation-duration: 3.45s;  -webkit-animation-duration: 3.45s;  -moz-animation-duration: 3.45s;}

所有动画的CSS

所有的动画都是用高级CSS 3制作的。

@keyframes css-wave { from { transform: translateX(97px); } to { transform: translateX(-97px); }}@keyframes css-bounce { 0% { transform: translate(5px, 15px); } 50% { transform: translate(0, -15px); } 100% { transform: translate(-5px, -36px); opacity: 1; }}@keyframes css-buble { 0% { transform: translate(3px, 10px); } 25% { transform: translate(0, 0px); } 50% { transform: translate(-3px, -24px); } 75% { transform: translate(0, -49px); opacity: 1; } 100% { transform: translate(3px, -97px); opacity: 0; }}

浏览器兼容性

正如我们前面提到的，这项技术是用CSS开发的，所以几乎所有的主流浏览器都支持这种技术。在未来版本的浏览器中可能会更改语法和行为。 Chrome和Safari需要在css中使用前缀-webkit。对于今天，它被以下浏览器的所支持：
❶Chrome
❷Firefox
❸Safari
❹IE 10+
❺Opera

重要提示：Internet Explorer 9和早期版本不支持@keyframe规则或动画属性。

那就这样吧！

我希望你喜欢这篇文章和我使用的技术。请点击下面的分享栏分享。
如果您有任何更多建议要添加，请随时在以下内容发表评论。

【源码实例】纯CSS水波纹效果和动画气泡