免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
帖子
发帖
查看: 1万|回复: 3
上一主题 下一主题 打印

[教学] 仿波浪动态页脚   [复制链接]

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

附件:您需要 登录 才可以下载或查看,没有帐号?立即注册

x
如图:
123.gif
2020-4-6 13:28


打开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. }

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

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

上一篇: 刷帖神器美化

下一篇: 插件数据库

最近看过此主题的会员

李奥
访问时间:2023-10-14 12:50
你好世界
访问时间:2022-10-28 20:49
梅子
访问时间:2021-08-21 13:05
啊这
访问时间:2021-07-30 17:55
实中网
访问时间:2021-05-10 22:17
开心
访问时间:2021-03-02 07:32
我爱建站
访问时间:2020-11-28 19:25
小可爱
访问时间:2020-10-17 16:16
唯一如风
访问时间:2020-09-29 17:44

点评
B Color Link Smilies

您还可以输入:个字符
X

 X

楼主发帖辛苦了,谢谢楼主的分享!
点评
B Color Link Smilies

您还可以输入:个字符
X

 X

TOP

这个帖子不回对不起自己!
点评
B Color Link Smilies

您还可以输入:个字符
X

 X

TOP

看帖回帖那是一定要的:太厉害啦!
点评
B Color Link Smilies

您还可以输入:个字符
X

 X

TOP

发帖
B Color Image Link Quote Code Smilies
高级模式 | 发新话题

 
您需要登录后才可以回帖 登录|立即注册 
快速
返回顶部
返回首页