首页 > 编程语言> 文章详细

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

2021-04-05 15:51:24 阅读：210 来源： 互联网

标签：水波纹源码 radius CSS div border animation css 255

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

evinelong web前端开发
【源码实例】纯CSS水波纹效果和动画气泡

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

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

【源码实例】纯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水波纹效果和动画气泡

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

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

那就这样吧！

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

标签：水波纹,源码,radius,CSS,div,border,animation,css,255
来源： https://blog.51cto.com/15127524/2685976

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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