css3+svg实现波浪图
css3 实现 SVG 波浪
2023-09-11 14:19:52 时间
<!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>
相关文章
- 解密Animate.css之CSS3动画实现方式大全源码(6星级)
- css3实现小箭头,各种图形
- [web前端] css3 transition属性实现3d动画效果
- js 获取和设置css3 属性值的实现方法
- 结合CSS3的布局新特征谈谈常见布局方法
- 【原】[webkit移动开发笔记]之CSS3径向渐变
- CSS3制作心形头像
- css3随着外层包裹的旋转里面的图标为正
- css3边角旋转
- CSS3实现三角形
- 第八十二节,CSS3过渡效果
- css3实现画对号动画
- 实用CSS3属性之 :target伪类实现Tab切换效果
- [CSS3] Apply Image Filter Effects With CSS
- [CSS3] All abourt responsive image
- Css3中!important的使用方法
- css3 简易时钟
- css3 实现心跳
- 【CSS3】CSS3 2D 转换 - translate 平移 ( transform: translate 样式 | 百分比移动相对于元素自身尺寸 | 百分比移动实现绝对定位的居中效果 )
- CSS3实现多列纵向滚动
- css3 翻转和旋转的差别
- js+css3简易实现2023新年快乐全屏满天星动画特效
- css3+js实现按钮水纹涟漪效果
- CSS3实现打勾(✔)效果