css3+svg实现波浪图 

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset=utf-8>
 5     <title>css+svg实现波浪图</title>
 6     <link rel=FaviconIcon href=favicon.ico type=image/x-icon>
 7     <meta name=viewport content="width=device-width,initial-scale=1">
 8     <style type="text/css">
 9       body{
10         background: linear-gradient(180deg,#3b5998 20%,#9575cd) fixed!important;
11       }
12       .editorial {
13         display: block;
14         width: 100%;
15         height: 10em;
16         margin-top: -10em;
17         position: fixed;
18         bottom: 0;
19         z-index: -1
20       }
21  
22       .parallax>use {
23         animation: move-forever 12s linear infinite
24       }
25  
26       .parallax>use:first-child {
27         animation-delay: -5s;
28         animation-duration: 12s
29       }
30  
31       .parallax>use:nth-child(2) {
32         animation-delay: -3s;
33         animation-duration: 8s
34       }
35  
36       .parallax>use:nth-child(3) {
37         animation-delay: -4s;
38         animation-duration: 5s
39       }
40       @keyframes move-forever {
41         0% {
42           transform: translate(-90px)
43         }
44  
45         to {
46           transform: translate(85px)
47         }
48       }
49    
50     </style>
51   </head>
52     <body class=hold-transition>
53       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" class="editorial"><defs><path id="gentle-wave" d="M-160 44c30 0
54     58-18 88-18s
55     58 18 88 18
56     58-18 88-18
57     58 18 88 18
58     v44h-352z"></path></defs><g class="parallax"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#gentle-wave" x="50" y="0" fill="rgba(255,255,255,.05)"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#gentle-wave" x="50" y="3" fill="rgba(255,255,255,.05)"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#gentle-wave" x="50" y="6" fill="rgba(255,255,255,.05)"></use></g></svg>
59   </body>
60 </html>

 

posted @ 2018-04-13 11:17  xili95  阅读(192)  评论(0)    收藏  举报