svg+css实现电磁波动画效果代码

代码语言:html

所属分类:动画

代码描述:svg+css实现电磁波动画效果代码

代码标签: svg css 电磁波 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
body {
  background: radial-gradient(at center, #222, black), #111;
  height: 100vh;
  width: 100vw;
  display: grid;
  place-items: center;
  color: #a4eaf8;
}
</style>


</head>

<body >
  <svg xmlns="http://www.w3.org/2000/svg" width="450" height="100" viewBox="0 0 450 100">
  <path id="wave" fill="none" stroke="currentColor" stroke-width="2" />
  <path id="wave2" fill="none" stroke="currentColor" stroke-width="2" transform="translate(150 0)" />
  <path id="wave3" fill="none" stroke="currentColor" stroke-width="2" transform="translate(300 0)" />

  <animate xlink:href="#wave" attributeName="d" repeatCount="indefinite" 
           from.........完整代码请登录后点击上方下载按钮下载查看

网友评论0