getWeather({"success":"1","result":[{"cityno":"shanghai"}) 爱秀代码 - Powered by Discuz! Board
免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
Board logo

标题: [教学] 仿波浪动态页脚 [打印本页]
作者: icode    时间: 2020-4-6 13:32     标题: 仿波浪动态页脚

如图：
123.gif

打开footer模板找到
  1. <div id="footlink">
复制
在上边加
  1. <style>
  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.   color:white;
  7. }
  8. .inner-header {
  9.   height:65vh;
  10.   width:100%;
  11.   margin: 0;
  12.   padding: 0;
  13. }

  15. .waves {
  16.   position:relative;
  17.   width: 100%;
  18.   height:15vh;
  19.   min-height:100px;
  20.   max-height:150px;
  21. }

  23. .parallax > use {
  24.   animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
  25. }
  26. .parallax > use:nth-child(1) {
  27.   animation-delay: -2s;
  28.   animation-duration: 7s;
  29. }
  30. .parallax > use:nth-child(2) {
  31.   animation-delay: -3s;
  32.   animation-duration: 10s;
  33. }
  34. .parallax > use:nth-child(3) {
  35.   animation-delay: -4s;
  36.   animation-duration: 13s;
  37. }
  38. .parallax > use:nth-child(4) {
  39.   animation-delay: -5s;
  40.   animation-duration: 20s;
  41. }
  42. @keyframes move-forever {
  43.   0% {
  44.    transform: translate3d(-90px,0,0);
  45.   }
  46.   100% {
  47.     transform: translate3d(85px,0,0);
  48.   }
  49. }
  50. @media (max-width: 768px) {
  51.   .waves {
  52.     height:40px;
  53.     min-height:40px;
  54.   }
  55.   .content {
  56.     height:30vh;
  57.   }
  58.   h1 {
  59.     font-size:24px;
  60.   }
  61. }
  62. </style>
  63. <div class="header">
  64.                 <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">
  65.                         <defs>
  66.                                 <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" />
  67.                         </defs>
  68.                         <g class="parallax">
  69.                                 <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
  70.                                 <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
  71.                                 <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
  72.                                 <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
  73.                         </g>
  74.                 </svg>
  75. </div>
复制


图片附件: 123.gif (2020-4-6 13:28, 354.11 KB) / 下载次数 778
http://icode.258club.com/attachment.php?aid=770&k=f359eb7cfdea02475fc17113ed55a6a5&t=1714200895&sid=esQP4K

作者: 無名    时间: 2020-4-6 17:41

楼主发帖辛苦了，谢谢楼主的分享！
作者: 开心    时间: 2020-4-6 22:59

这个帖子不回对不起自己！
作者: 琼斯博士    时间: 2020-4-8 15:31

看帖回帖那是一定要的：太厉害啦！




欢迎光临 爱秀代码 (http://icode.258club.com/) Powered by Discuz! 7.2