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

2022-09-23 19:51:46

【源码实例】纯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规则或动画属性。

那就这样吧！

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

码农公寓