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 > |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】博客园携手 AI 驱动开发工具商 Chat2DB 推出联合终身会员
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .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鼠标滑过小图显示大图效果