svg+css实现背景脉冲效果代码
代码语言:html
所属分类:背景
代码描述:svg+css实现背景脉冲效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html,body{ background: #EDF9FF; display:grid; place-items:center; height: 100vh; overflow:hidden; } </style> </head> <body translate="no"> <div id="rc_pattern"> <svg width="511" height="433" viewBox="0 0 511 433" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="mask"> <g> <path d="M0.000482559 291.5V291.502H5.1683V291.5H0.000482559Z" fill="#4FBEE0" /> <path d="M10.336 291.5V281.23H15.5038V291.5H10.336Z" fill="#4FBEE0" /> <path d="M20.6695 291.5V260.413H25.8373V291.5H20.6695Z" fill="#4FBEE0" /> <path d="M31.0065 321.5V311.23H36.1744V321.5H31.0065Z" fill="#4FBEE0" /> <path d="M41.3425 321.5V300.684H46.5104V321.5H41.3425Z" fill="#4FBEE0" /> <path d="M51.6795 321.5V321.502H56.8473V321.5H51.6795Z" fill="#4FBEE0" /> <path d="M62.015 321.5V331.774H67.1828V321.5H62.015Z" fill="#4FBEE0" /> <path d="M72.3505 321.5V381.367H77.5183V321.5H72.3505Z" fill="#4FBEE0" /> <path d="M82.686 321.5V391.502H87.8539V321.5H82.686Z" fill="#4FBEE0" /> <path d="M93.0211 321.5V412.183H98.1889V321.5H93.0211Z" fill="#4FBEE0" /> <path d="M103.357 321.5V401.774H108.524V321.5H103.357Z" fill="#4FBEE0" /> <path d="M93.0211 433V427.796H98.1889V433H93.0211Z" fill="#4FBEE0" /> <path d="M93.0211 417.387V422.591H98.1889V417.387H93.0211Z" fill="#4FBEE0" /> <path d="M103.357 412.183V406.978H108.524V412.183H103.357Z" fill="#4FBEE0" /> <path d="M103.357 417.387V422.591H108.524V417.387H103.357Z" fill="#4FBEE0" /> <path d="M82.686 396.706V401.911H87.8539V396.706H82.686Z" fill="#4FBEE0" /> <path d="M82.686 412.319V407.115H87.8539V412.319H82.686Z" fill="#4FBEE0" /> <path d="M72.3505 391.639V386.435H77.5183V391.639H72.3505Z" fill="#4FBEE0" /> <path d="M72.3505 396.843V402.048H77.5183V396.843H72.3505Z" fill="#4FBEE0" /> <path d="M62.015 336.978V342.183H67.1828V336.978H62.015Z" fill="#4FBEE0" /> <path d="M62.015 352.591V347.387H67.1828V352.591H62.015Z" fill="#4FBEE0" /> <path d="M51.6795 331.911V326.706H56.8473V331.911H51.6795Z" fill="#4FBEE0" /> <path d="M51.6795 337.115V342.319H56.8473V337.115H51.6795Z" fill="#4FBEE0" /> <path d="M41.3425 306.026V311.23H46.5104V306.026H41.3425Z" fill="#4FBEE0" /> <path d="M41.3425 321.639V316.435H46.5104V321.639H41.3425Z" fill="#4FBEE0" /> <path d="M31.0065 321.639V316.435H36.1744V321.639H31.0065Z" fill="#4FBEE0" /> <path d="M31.0065 326.843V332.048H36.1744V326.843H31.0065Z" fill="#4FBEE0" /> <path d="M20.6695 265.617V270.821H25.8373V265.617H20.6695Z" fill="#4FBEE0" /> <path d="M20.6695 281.23V276.026H25.8373V281.23H20.6695Z" fill="#4FBEE0" /> <path d="M10.336 291.639V286.435H15.5038V291.639H10.336Z" fill="#4FBEE0" /> <path d="M10.336 296.843V302.048H15.5038V296.843H10.336Z" fill="#4FBEE0" /> <path d="M0.000482559 296.706V301.911H5.1683V296.706H0.000482559Z" fill="#4FBEE0" /> <path d="M0.000482559 312.319V307.115H5.1683V312.319H0.000482559Z" fill="#4FBEE0" /> <path d="M0.000482559 317.524V322.728H5.1683V317.524H0.000482559Z" fill="#4FBEE0" /> <path d="M113.464 321.5V391.365H118.631V321.5H113.464Z" fill="#4FBEE0" /> <path d="M123.799 321.5V401.774H128.967V321.5H123.799Z" fill="#4FBEE0" /> <path d="M134.27 321.5V370.411H139.302V321.5H134.27Z" fill="#4FBEE0" /> <path d="M144.47 321.5V391.502H149.638V321.5H144.47Z" fill="#4FBEE0" /> <path d="M154.806 321.5V381.23H159.973V321.5H154.806Z" fill="#4FBEE0" /> <path d="M165.139 321.5V360.413H170.307V321.5H165.139Z" fill="#4FBEE0" /> <path d="M175.476 321.5V381.23H180.644V321.5H175.476Z" fill="#4FBEE0" /> <path d="M185.812 321.5V370.684H190.98V321.5H185.812Z" fill="#4FBEE0" /> <path d="M196.149 321.5V391.502H201.317V321.5H196.149Z" fill="#4FBEE0" /> <path d="M206.485 321.5V401.774H211.652V321.5H206.485Z" fill="#4FBEE0" /> <path d="M216.82 321.5V381.367H221.988V321.5H216.82Z" fill="#4FBEE0" /> <path d="M227.156 321.5V391.502H232.323V321.5H227.156Z" fill="#4FBEE0" /> <path d="M237.491 321.5V412.183H242.658V321.5H237.491Z" fill="#4FBEE0" /> <path d="M247.826 321.5V401.774H252.994V321.5H247.826Z" fill="#4FBEE0" /> <path d="M134.133 375.615V380.819H139.301V375.615H134.133Z" fill="#4FBEE0" /> <path d="M237.491 433V427.796H242.658V433H237.491Z" fill="#4FBEE0" /> <path d="M237.491 417.387V422.591H242.658V417.387H237.491Z" fill="#4FBEE0" /> <path d="M247.826 412.183V406.978H252.994V412.183H247.826Z" fill="#4FBEE0" /> <path d="M247.826 417.387V422.591H252.994V417.387H247.826Z" fill="#4FBEE0" /> <path d="M227.156 396.706V401.911H232.323V396.706H227.156Z" fill="#4FBEE0" /> <path d="M227.156 412.319V407.115H232.323V412.319H227.156Z" fill="#4FBEE0" /> <path d="M216.82 391.639V386.435H221.988V391.639H216.82Z" fill="#4FBEE0" /> <path d="M216.82 396.843V402.048H221.988V396.843H216.82Z" fill="#4FBEE0" /> <path d="M206.485 406.978V412.183H211.652V406.978H206.485Z" fill="#4FBEE0" /> <path d="M206.485 422.591V417.387H211.652V422.591H206.485Z" fill="#4FBEE0" /> <path d="M196.149 401.911V396.706H201.317V401.911H196.149Z" fill="#4FBEE0" /> <path d="M196.149 407.115V412.319H201.317V407.115H196.149Z" fill="#4FBEE0" /> <path d="M185.812 376.026V381.23H190.98V376.026H185.812Z" fill="#4FBEE0" /> <path d="M185.812 391.639V386.435H190.98V391.639H185.812Z" fill="#4FBEE0" /> <path d="M175.476 391.639V386.435H180.644V391.639H175.476Z" fill="#4FBEE0" /> <path d="M175.476 396.843V402.048H180.644V396.843H175.476Z" fill="#4FBEE0" /> <path d="M165.139 365.617V370.821H170.307V365.617H165.139Z" fill="#4FBEE0" /> <path d="M165.139 381.23V376.026H170.307V381.23H165.139Z" fill="#4FBEE0" /> <path d="M154.806 391.639V386.435H159.973V391.639H154.806Z" fill="#4FBEE0" /> <path d="M154.806 396.843V402.048H159.973V396.843H154.806Z" fill="#4FBEE0" /> <path d="M144.47 396.706V401.911H149.638V396.706H144.47Z" fill="#4FBEE0" /> <path d="M144.47 412.319V407.115H149.638V412.319H144.47Z" fill="#4FBEE0" /> <path d="M144.47 417.524V422.728H149.638V417.524H144.47Z" fill="#4FBEE0" /> <path d="M134.133 391.228V386.023H139.301V391.228H134.133Z" fill="#4FBEE0" /> <path d="M123.799 412.183V406.978H128.967V412.183H123.799Z" fill="#4FBEE0" /> <path d="M123.799 417.387V422.591H128.967V417.387H123.799Z" fill="#4FBEE0" /> <path d="M113.464 396.569V401.774H118.631V396.569H113.464Z" fill="#4FBEE0" /> <path d="M113.464 412.183V406.978H118.631V412.183H113.464Z" fill="#4FBEE0" /> <path d="M252.994 321.5V41.635H247.826L247.826 321.5H252.994Z" fill="#4FBEE0" /> <path d="M242.658 321.5L242.658 31.2264H237.491L237.491 321.5H242.658Z" fill="#4FBEE0" /> <path d="M232.187 321.5V62.5895H227.155L227.156 321.5H232.187Z" fill="#4FBEE0" /> <path d="M221.988 321.5L221.987 41.4982H216.82L216.82 321.5H221.988Z" fill="#4FBEE0" /> <path d="M211.652 321.5L211.652 51.7697H206.484L206.485 321.5H211.652Z" fill="#4FBEE0" /> <path d="M201.318 321.5V72.5874H196.151V321.5H201.318Z" fill="#4FBEE0" /> <path d="M190.981 321.5V51.7697H185.814V321.5H190.981Z" fill="#4FBEE0" /> <path d="M180.645 321.5V62.3157H175.478V321.5H180.645Z" fill="#4FBEE0" /> <path d="M170.308 321.5V41.4982H165.141V321.5H170.308Z" fill="#4FBEE0" /> <path d="M159.973 321.5L159.973 31.2264H154.805L154.806 321.5H159.973Z" fill="#4FBEE0" /> <path d="M149.638 321.5L149.637 51.6329H144.47L144.47 321.5H149.638Z" fill="#4FBEE0" /> <path d="M139.302 321.5L139.302 41.4982H134.134V321.5H139.302Z" fill="#4FBEE0" /> <path d="M128.967 321.5L128.967 20.8173H123.799L123.799 321.5H128.967Z" fill="#4FBEE0" /> <path d="M118.631 321.5V31.2264H113.464V321.5H118.631Z" fill="#4FBEE0" /> <path d="M232.324 57.3852V52.1808H227.157V57.3852H232.324Z" fill="#4FBEE0" /> <path d="M128.967 0V5.2044H123.799V0H128.967Z" fill="#4FBEE0" /> <path d="M128.967 15.613V10.4086H123.799V15.613H128.967Z" fill="#4FBEE0" /> <path d="M118.631 20.8173V26.0216H113.464V20.8173H118.631Z" fill="#4FBEE0" /> <path d="M118.631 15.613V10.4086H113.464V15.613H118.631Z" fill="#4FBEE0" /> <path d="M139.302 36.2935V31.0891H134.134V36.2935H139.302Z" fill="#4FBEE0" /> <path d="M139.302 20.6805V25.8849H134.134V20.6805H139.302Z" fill="#4FBEE0" /> <path d="M149.637 41.361V46.5654H144.47V41.361H149.637Z" fill="#4FBEE0" /> <path d="M149.637.........完整代码请登录后点击上方下载按钮下载查看
网友评论0