div+css实现圆形容器内水波纹动画效果代码-html代码-BFW代码库

div+css实现圆形容器内水波纹动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现圆形容器内水波纹动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
:root {
  --w: 300px;
  --wave: url('data:image/svg+xml,<svg width="1440" height="490" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" transform="rotate(0deg)" version="1.1"><defs><linearGradient id="sw-gradient-0" x1="0" x2="0" y1="1" y2="0"><stop offset="0%" stop-color="rgba(49, 96, 133, 1)"/><stop offset="100%" stop-color="rgba(49, 96, 133, 1)"/></linearGradient></defs><g class="layer"><title>Layer 1</title><path d="m-9638,343l80,-40.8c80,-41.2 240,-122.2 400,-106.2c160,16 320,131 480,155.2c160,24.8 320,-41.2 480,-40.9c160,-0.3 320,65.7 480,57.2c160,-8.5 320,-89.5 480,-122.5c160,-33 320,-16 480,-40.8c160,-24.2 320,-90.2 480,-65.4c160,24.2 320,139.2 480,187.9c160,49.3 320,32.3 480,-24.5c160,-57.2 320,-155.2 480,-196c160,-41.2 320,-24.2 480,-24.5c160,0.3 320,-16.7 480,-24.5c160,-8.2 320,-8.2 480,16.3c160,24.5 320,73.5 480,98c160,24.5 320,24.5 480,40.8c160,16.7 320,48.7 480,73.5c160,24.2 320,41.2 480,65.4c160,24.8 366,165.8 480,16.3c114,-149.5 309,-98.5 480,-179.7c171,-81.2 256,67.8 465,78.5c210,4.7 305,-94.9 495,-13.1c190,81.8 400,7.4 527,-27.4c127,-34.8 255,76.2 452,42.9c197,-33.3 301,9.3 381,-7.4l80,-16.3l0,245l-80,0c-80,0 -240,0 -400,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -480,0c-160,0 -320,0 -400,0l-80,0l0,-147z" fill="white" id="svg_1"/></g></svg>');
}
body {
  padding: 0;
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: black;
  overflow: hidden;
	filter: brightness(1) sepia(1) saturate(9) hue-rotate(95deg);
}
.scene {
  position: relative;
  width: var(--w);
  aspect-ratio: 1;
  border-radius: 50%;
  background-image: var(--wave);
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: 740.........完整代码请登录后点击上方下载按钮下载查看