0
0

前端必学的CSS3波浪效果演示

目录

前言

  1.     随着前端技术的不断发展与进步，界面交互的样式要求和美感也越来越高，很多网页的交互都加上了css3动画,这里作者给大家分享一个前端开发必掌握的一个CSS3波浪效果，赶紧学起来吧，加在自己开发网页的底部，给页面增加一点活泼的气息~

CSS3波浪效果

** **

  1.     这是使用 SVG 和 CSS 动画制作的波浪效果，上半部分是蓝色（可修改成其他颜色）渐变的背景颜色，下半部分就是波浪，有四条波浪在不停的来回起伏，非常逼真。该波浪效果可用于大部分页面的底部，使页面增加一点活泼的气息。。

1.Html构建

代码如下（示例）：

填充蓝色（可修改成其他颜色）渐变的背景颜色
这部分就是波浪的svg，有四条波浪在不停的来回起伏，效果非常逼真 
  2.         <div class="header">
  3.             <div class="inner-header flex">
  4.                 <h1>简单的 CSS3 波浪效果</h1>
  5.             </div>
  6.             <div>
  7.                 <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  8.                     viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
  9.                     <defs>
  10.                         <path id="gentle-wave"
  11.                             d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
  12.                     </defs>
  13.                     <g class="parallax">
  14.                         <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
  15.                         <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
  16.                         <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
  17.                         <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
  18.                     </g>
  19.                 </svg>
  20.             </div>
  21.         </div>

2.CSS编写

代码如下（示例）：

这里通过CSS3的animation动画属性来控制四条线条在不停的来回起伏，形成波浪效果

  2. .header {
  3.     position: relative;
  4.     text-align: center;
  5.     background: linear-gradient(60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100%);
  6. /*     background: #FFAFBD;  
  7.     background: -webkit-linear-gradient(to right, #ffc3a0, #FFAFBD);  
  8.     background: linear-gradient(to right, #ffc3a0, #FFAFBD); 
  9.  */
  10.     color: white;
  11. }
  13. .inner-header {
  14.     height: 65vh;
  15.     width: 100%;
  16.     margin: 0;
  17.     padding: 0;
  18. }
  20. .waves {
  21.     position: relative;
  22.     width: 100%;
  23.     height: 15vh;
  24.     margin-bottom: -7px; /*Fix for safari gap*/
  25.     min-height: 100px;
  26.     max-height: 150px;
  27. }
  29. .content {
  30.     position: relative;
  31.     height: 20vh;
  32.     text-align: center;
  33.     background-color: white;
  34. }
  36. .content a {
  37.     margin: 0 5px;
  38.     font-size: 12px;
  39.     color: #333;
  40. }
  42. .content a:hover {
  43.     color: #000;
  44. }
  46. /* Animation */
  48. .parallax > use {
  49.     animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
  50. }
  51. .parallax > use:nth-child(1) {
  52.     animation-delay: -2s;
  53.     animation-duration: 7s;
  54. }
  55. .parallax > use:nth-child(2) {
  56.     animation-delay: -3s;
  57.     animation-duration: 10s;
  58. }
  59. .parallax > use:nth-child(3) {
  60.     animation-delay: -4s;
  61.     animation-duration: 13s;
  62. }
  63. .parallax > use:nth-child(4) {
  64.     animation-delay: -5s;
  65.     animation-duration: 20s;
  66. }
  67. @keyframes move-forever {
  68.     0% {
  69.         transform: translate3d(-90px, 0, 0);
  70.     }
  71.     100% {
  72.         transform: translate3d(85px, 0, 0);
  73.     }
  74. }
  75. /*Shrinking for mobile*/
  76. @media (max-width: 768px) {
  77.     .waves {
  78.         height: 40px;
  79.         min-height: 40px;
  80.     }
  81.     .content {
  82.         height: 30vh;
  83.     }
  84.     h1 {
  85.         font-size: 24px;
  86.     }
  87. }

3.完整代码

index.html文件

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>简单的CSS3波浪效果演示_dowebok</title>
  6.         <link rel="stylesheet" href="style.css" />
  7.     </head>
  8.     <body>
  9.         <div class="header">
  10.             <div class="inner-header flex">
  11.                 <h1>简单的 CSS3 波浪效果</h1>
  12.             </div>
  13.             
  14.             <div>
  15.                 <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  16.                     viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
  17.                     <defs>
  18.                         <path id="gentle-wave"
  19.                             d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
  20.                     </defs>
  21.                     <g class="parallax">
  22.                         <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
  23.                         <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
  24.                         <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
  25.                         <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
  26.                     </g>
  27.                 </svg>
  28.             </div>
  29.         </div>
  31.     </body>
  32. </html>

style.css文件

  1. body {
  2.     margin: 0;
  3. }
  5. h1 {
  6.     font-family: 'Lato', sans-serif;
  7.     font-weight: 300;
  8.     letter-spacing: 2px;
  9.     font-size: 48px;
  10. }
  11. p {
  12.     font-family: 'Lato', sans-serif;
  13.     letter-spacing: 1px;
  14.     font-size: 14px;
  15.     color: #333333;
  16. }
  18. .header {
  19.     position: relative;
  20.     text-align: center;
  21.     background: linear-gradient(60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100%);
  22. /*     background: #FFAFBD;  
  23.     background: -webkit-linear-gradient(to right, #ffc3a0, #FFAFBD);  
  24.     background: linear-gradient(to right, #ffc3a0, #FFAFBD); 
  25.  */
  26.     color: white;
  27. }
  28. .logo {
  29.     width: 50px;
  30.     fill: white;
  31.     padding-right: 15px;
  32.     display: inline-block;
  33.     vertical-align: middle;
  34. }
  36. .inner-header {
  37.     height: 65vh;
  38.     width: 100%;
  39.     margin: 0;
  40.     padding: 0;
  41. }
  43. .flex {
  44.     /*Flexbox for containers*/
  45.     display: flex;
  46.     justify-content: center;
  47.     align-items: center;
  48.     text-align: center;
  49. }
  51. .waves {
  52.     position: relative;
  53.     width: 100%;
  54.     height: 15vh;
  55.     margin-bottom: -7px; /*Fix for safari gap*/
  56.     min-height: 100px;
  57.     max-height: 150px;
  58. }
  60. .content {
  61.     position: relative;
  62.     height: 20vh;
  63.     text-align: center;
  64.     background-color: white;
  65. }
  67. .content a {
  68.     margin: 0 5px;
  69.     font-size: 12px;
  70.     color: #333;
  71. }
  73. .content a:hover {
  74.     color: #000;
  75. }
  77. /* Animation */
  79. .parallax > use {
  80.     animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
  81. }
  82. .parallax > use:nth-child(1) {
  83.     animation-delay: -2s;
  84.     animation-duration: 7s;
  85. }
  86. .parallax > use:nth-child(2) {
  87.     animation-delay: -3s;
  88.     animation-duration: 10s;
  89. }
  90. .parallax > use:nth-child(3) {
  91.     animation-delay: -4s;
  92.     animation-duration: 13s;
  93. }
  94. .parallax > use:nth-child(4) {
  95.     animation-delay: -5s;
  96.     animation-duration: 20s;
  97. }
  98. @keyframes move-forever {
  99.     0% {
  100.         transform: translate3d(-90px, 0, 0);
  101.     }
  102.     100% {
  103.         transform: translate3d(85px, 0, 0);
  104.     }
  105. }
  106. /*Shrinking for mobile*/
  107. @media (max-width: 768px) {
  108.     .waves {
  109.         height: 40px;
  110.         min-height: 40px;
  111.     }
  112.     .content {
  113.         height: 30vh;
  114.     }
  115.     h1 {
  116.         font-size: 24px;
  117.     }
  118. }

总结

  1.     以上就是今天要讲的内容啦，给大家分享了一个css3波浪效果，谢谢观看，如果觉得对您有帮助的话，可否给博主一个小小的赞和关注~
标签： 前端 css3 javascript
本文转载自: https://blog.csdn.net/m0_61243965/article/details/125268823
版权归原作者 国服第二切图仔 所有， 如有侵权，请联系我们删除。
登录后发布评论

“前端必学的CSS3波浪效果演示”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？