企业网站定制开发前端必学的CSS3波浪效果演示

目录

前言

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

CSS3波浪效果

        

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

1.Html构建

代码如下（示例）：

<div class="inner_header"> 填充蓝色（可修改成其他颜色）渐变的背景颜色
<div class="waves">这部分就是波浪的svg，有四条波浪在不停的来回起伏，效果非常逼真

  1.  
  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动画属性来控制四条线条在不停的来回起伏，形成波浪效果

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

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>
  30.  
  31.  
  32. 	</body>
  33. </html>

style.css文件

  1. body {
  2.     margin: 0;
  3. }
  4.  
  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. }
  17.  
  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. }
  35.  
  36. .inner-header {
  37.     height: 65vh;
  38.     width: 100%;
  39.     margin: 0;
  40.     padding: 0;
  41. }
  42.  
  43. .flex {
  44.     /*Flexbox for containers*/
  45.     display: flex;
  46.     justify-content: center;
  47.     align-items: center;
  48.     text-align: center;
  49. }
  50.  
  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. }
  59.  
  60. .content {
  61.     position: relative;
  62.     height: 20vh;
  63.     text-align: center;
  64.     background-color: white;
  65. }
  66.  
  67. .content a {
  68.     margin: 0 5px;
  69.     font-size: 12px;
  70.     color: #333;
  71. }
  72.  
  73. .content a:hover {
  74.     color: #000;
  75. }
  76.  
  77. /* Animation */
  78.  
  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. }

总结

        以上就是今天要讲的内容啦，给大家分享了一个css3波浪效果，谢谢观看，如果觉得对您有帮助的话，可否给博主一个小小的赞和关注~

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发