当前位置:首页 > 源码分享 > 技术教程 > 正文内容

转载的水波背景代码2(小问题)

zjsn2个月前 (04-30)技术教程256

这个貌似也有点问题https://www.cnblogs.com/echohye/p/17764960.html#gallery-1

3.png

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8" />

 <link rel="icon" href="/favicon.ico" />

 <meta http-equiv="X-UA-Compatible" content="IE=edge" />

 <meta name="viewport" content="width=device-width, initial-scale=1.0" />

 <meta name="keywords" content="keywords" />

 <meta name="description" content="description" />

 <title>%VITE_APP_TITLE%</title>

</head>

<body>

 <div id="app">

 <style>

 html,

 body {

 height: 100%;

 margin: 0;

 min-height: 100%;

 }

 .container {

 background: linear-gradient(60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100%);

 }

 .content {

 height: 65vh;

 width: 100%;

 margin: 0;

 padding: 0;

 }

 .waves {

 position: relative;

 width: 100%;

 height: 15vh;

 margin-bottom: -7px;

 /* 修复 Safari 等浏览器下方空隙 */

 min-height: 100px;

 max-height: 150px;

 }

 /* 动画 */

 .parallax>use {

 animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;

 }

 .parallax>use:nth-child(1) {

 animation-delay: -2s;

 animation-duration: 7s;

 }

 .parallax>use:nth-child(2) {

 animation-delay: -3s;

 animation-duration: 10s;

 }

 .parallax>use:nth-child(3) {

 animation-delay: -4s;

 animation-duration: 13s;

 }

 .parallax>use:nth-child(4) {

 animation-delay: -5s;

 animation-duration: 20s;

 }

 @keyframes move-forever {

 0% {

 transform: translate3d(-90px, 0, 0);

 }

 100% {

 transform: translate3d(85px, 0, 0);

 }

 }

 </style>

 <div>

 <div></div>

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xl

 viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">

 <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

 </defs>

 <g>

 <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />

 <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />

 <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />

 <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />

 </g>

 </svg>

 </div>

 </div>

 <!-- <script type="module" src="/src/main.js"></script> -->

</body>

</html>


版权声明:本文由指尖十年发布,如需转载请注明出处,如有问题可在下面留言。

本站提供的一切软件、教程和内容信息来自网络收集整理,版权争议与本站无关,仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系

本文链接:https://www.zjsn.net/?id=98

分享给朋友:

“转载的水波背景代码2(小问题)” 的相关文章

如何把自己支付宝免费认证为学生特权

如何把自己支付宝免费认证为学生特权

许多人知道,学生支付宝可以享受一些优惠特权,如果你不是学生,能不能享受到这些特权呢?办法总比问题多,最近外面很火的学生认证方法来啦!无需学生也可以认证!可领海底捞69折券、淘票票10元券等超多学生特权!步骤如下1、复制括号内的链接,将名字改成自己的【https://api.2xb.cn/xsrz/?...

PbootCMS后台去版权显示教程

PbootCMS后台去版权显示教程

PbootCMS是一个很不错的PHP建站系统,但后台一些明显的PbootCMS字样看着不舒服,本人在此分享下自己和其他网友总结出来的经验。特别说明,本人只是修改一些明显的碍眼字样,请大家一起尊重PbootCMS 知识产权。(一)后台登录界面明显字样去除办法:此页面模板为 apps/admin/vie...

全国各地优势产业大全一览(原产地特产)

全国各地优势产业大全一览(原产地特产)

无论你是做电商,微商,直播带货,都需要知道各地的优势产业,下面为大家分享全国各个产业带产地搜索省流助手:羽绒服:共青城、吴江、常熟睡  衣:汕头、佛山、揭阳、普宁、中山袜  子:诸暨、江阴羊毛衫:海阳(山东)羊绒衫:清河(河北)羊绒大衣:大连泳  装:葫芦岛手 ...

新版本微信内置浏览器清理缓存方法,debugx5.qq.com已失效

新版本微信内置浏览器清理缓存方法,debugx5.qq.com已失效

网上流传的安卓微信清理内置浏览器缓存方法已失效,因为微信内置浏览器据说不再是X5内核,改为使用xweb内核下面几个X5内核清理缓存网址也失效了。https://debugx5.qq.com http://debugtbs.qq.com debugmm.qq.com/?forcex5=true因为...

http和https带www不带www四个网址如何统一为一个

http和https带www不带www四个网址如何统一为一个

很早以前,站长做网站只需要http访问即可,这几年随着企业和用户对安全问题的重视,许多网站都已改为https加密访问。随之也可能出现这种情况,同一个页面内容,可以有四个不同的网站,分别是http访问,https访问,带www访问,不带www访问,作为一个SEOer,页面统一入口也成为一个不大不小的问...

百度收录网站带缩略图最新规则,如何让网站收录带缩略图

百度收录网站带缩略图最新规则,如何让网站收录带缩略图

许多站长关注自己网站的百度收录情况,可能有人和我一样每天要site:www.zjsn.net 好几次。有的人会问,为什么别人网站百度收录到的页面带缩略图,而自己的网站没带缩略图呢,如何才让自己网站也在百度内带上缩略图?就这个问题,本人做下解释什么样的网站百度收录带缩略图?通常是网站建立时间...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。