小庚资源网 · 免费提供绿色软件、活动线报以及其他网络资源，好货不私藏！
XML地图/ 广告合作/ 我要投稿
当前位置：网站首页 > 网站源码 > 只有源码 >正文

在网站的底部添加海浪背景

作者：小编日期：2023-05-04浏览：6802分类：只有源码

效果展示： 

HTML部分

建立一个div，id为wavesDIV，之后使用svg绘制一个图形出来，此时这个图形还是不会懂的，我们需要使用animation来让他动起来

  1. <div id="wavesDIV" style="display: block;">

  2.         <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">

  3.             <defs>

  4.                 <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>

  5.             </defs>

  6.             <g class="parallax">

  7.                 <use xlink:href="#gentle-wave" x="48" y="-2" fill="rgba(125,165,191,0.3)"></use>

  8.                 <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(125,165,191,0.5)"></use>

  9.                 <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(125,165,191,0.7)"></use>

  10.                 <use xlink:href="#gentle-wave" x="48" y="12" fill="rgba(125,165,191,1)"></use>

  11.             </g>

  12.         </svg>

  13.     </div>

复制代码

CSS部分
使用@keyframes设定动画，使用animation调用

  1. #wavesDIV{

  2.   position: fixed;

  3.   bottom: 0;

  4.   width: 100%;

  5.   display:block;

  6.   height:20vh;

  7.   background-color:rgb(125,165,191);

  8.   animation: move-out 2s cubic-bezier(0,.98,.97,1) forwards;

  9. }

  10. .waves {

  11.   position:relative;

  12.   width: 100%;

  13.   height:15vh;

  14.   margin-top:-15vh;

  15.   min-height:100px;

  16.   max-height:150px;

  17. }

  18. .parallax > use {

  19.   animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;

  20. }

  21. .parallax > use:nth-child(1) {

  22.   animation-delay: -2s;

  23.   animation-duration: 7s;

  24. }

  25. .parallax > use:nth-child(2) {

  26.   animation-delay: -3s;

  27.   animation-duration: 10s;

  28. }

  29. .parallax > use:nth-child(3) {

  30.   animation-delay: -4s;

  31.   animation-duration: 13s;

  32. }

  33. .parallax > use:nth-child(4) {

  34.   animation-delay: -5s;

  35.   animation-duration: 20s;

  36. }

  37. @keyframes move-forever {

  38.   0% {

  39.     transform: translate3d(-90px, 0, 0);

  40.   }

  41.   100% { transform: translate3d(85px, 0, 0);

  42.   }

  43. }

  44. @keyframes move-out {

  45.   0% {

  46.     transform: translateY(400%);

  47.   }

  48.   100% { transform: translateY(0%);

  49.   }

  50. }

  51. home.php?mod=space&uid=945662 (max-width: 768px) {

  52.   .waves {

  53.     height:40px; min-height:40px;

  54.   }

  55. }

复制代码

当然如果在中间加多点，譬如说10%,20%,30%,40%,50%,60%，动态会更强烈


相关文章

暂无评论，来添加一个吧。

取消回复欢迎你发表评论:

协助本站优化一下
    协助本站seo优化一下，谢谢！
最近发表

Copyright© XGW9.COM版权所有〖小庚资源网〗
〖恒创科技〗为本站提供专业云计算服务  
本站发布的内容来源于互联网，如果有侵权内容，请联系我们删除！E-mail：xgzyw6@outlook.com
关于我们|我要投稿|免责声明|XML地图