随笔 - 216, 文章 - 0, 评论 - 21, 阅读 - 74万
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
< 2025年1月 >
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 1
2 3 4 5 6 7 8

css3+svg实现波浪图

Posted on   人生梦想起飞  阅读(778)  评论(0编辑  收藏  举报
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>css+svg实现波浪图</title>
    <link rel=FaviconIcon href=favicon.ico type=image/x-icon>
    <meta name=viewport content="width=device-width,initial-scale=1">
    <style type="text/css">
      body{
        background: linear-gradient(180deg,#3b5998 20%,#9575cd) fixed!important;
      }
      .editorial {
        display: block;
        width: 100%;
        height: 10em;
        margin-top: -10em;
        position: fixed;
        bottom: 0;
        z-index: -1
      }
 
      .parallax>use {
        animation: move-forever 12s linear infinite
      }
 
      .parallax>use:first-child {
        animation-delay: -5s;
        animation-duration: 12s
      }
 
      .parallax>use:nth-child(2) {
        animation-delay: -3s;
        animation-duration: 8s
      }
 
      .parallax>use:nth-child(3) {
        animation-delay: -4s;
        animation-duration: 5s
      }
      @keyframes move-forever {
        0% {
          transform: translate(-90px)
        }
 
        to {
          transform: translate(85px)
        }
      }
   
    </style>
  </head>
    <body class=hold-transition>
      <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
    58-18 88-18s
    58 18 88 18
    58-18 88-18
    58 18 88 18
    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>
  </body>
</html>

  

编辑推荐:
· .NET 依赖注入中的 Captive Dependency
· .NET Core 对象分配(Alloc)底层原理浅谈
· 聊一聊 C#异步 任务延续的三种底层玩法
· 敏捷开发:如何高效开每日站会
· 为什么 .NET8线程池 容易引发线程饥饿
阅读排行:
· 终于决定:把自己家的能源管理系统开源了!
· 外部H5唤起常用小程序链接规则整理
· C#实现 Winform 程序在系统托盘显示图标 & 开机自启动
· 了解 ASP.NET Core 中的中间件
· 详解:订单履约系统规划
历史上的今天:
2014-02-28 项目经理资格证书考试网址
2013-02-28 js自定义图片提示效果
2013-02-28 js鼠标滑过小图显示大图效果
点击右上角即可分享
微信分享提示