影子资源网-致力于优质软件, 活动线报, 游戏辅助, 绿色工具等资源共享, 好货不私藏!
当前位置:网站首页 > 网站源码 > 只有源码 >正文

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

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

效果展示: 

HTML部分

建立一个dividwavesDIV,之后使用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%,动态会更强烈


分享到:

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

取消回复欢迎发表评论:

Copyright© YZZY.LA版权所有〖影子资源网〗 
〖恒创科技〗为本站提供专业云计算服务
本站发布的内容来源于互联网,如果有侵权内容,请联系我们删除!E-mail:yzzy88@outlook.com
版权声明|商务合作|我要投稿|免责声明|XML地图