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

icode

如图：

下载 (354.11 KB)

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. 
    
15. .waves {
    
16.   position:relative;
    
17.   width: 100%;
    
18.   height:15vh;
    
19.   min-height:100px;
    
20.   max-height:150px;
    
21. }
    
22. 
    
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>

复制

無名

楼主发帖辛苦了，谢谢楼主的分享！

开心

这个帖子不回对不起自己！

琼斯博士

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