SVG湍流动画

下载代码

html

css

分享到微信朋友圈

html

css

body {
  display: flex;
  background: radial-gradient(circle at center, #fff 500px, #c0cdd7);
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
body svg {
  position: absolute;
  width: 0;
  height: 0;
}
body #wrap {
  position: absolute;
  width: 600px;
  height: 600px;
  display: grid;
  grid-template-columns: repeat(3, 180px);
  grid-template-rows: repeat(3, 180px);
  grid-row-gap: 30px;
  grid-column-gap: 30px;
  z-index: 1;
}
body #wrap .inner {
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 40px -5px rgba(0, 0, 0, 0.5);
}
body #wrap .inner:nth-of-type(even) {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
body #wrap .inner:nth-of-type(3n) {
  -webkit-transform: scaleX(-1) scaleY(-1);
          transform: scaleX(-1) scaleY(-1);
}
body #wrap .inner:nth-of-type(1) .filtered .frame {
  -webkit-transform: scale(0.075);
          transform: scale(0.075);
}
body #wrap .inner:nth-of-type(1) .filtered .clouds {
  -webkit-transform: scale(0.575);
          transform: scale(0.575);
}
body #wrap .inner:nth-of-type(even) {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
body #wrap .inner:nth-of-type(3n) {
  -webkit-transform: scaleX(-1) scaleY(-1);
          transform: scaleX(-1) scaleY(-1);
}
body #wrap .inner:nth-of-type(2) .filtered .frame {
  -webkit-transform: scale(0.15);
          transform: scale(0.15);
}
body #wrap .inner:nth-of-type(2) .filtered .clouds {
  -webkit-transform: scale(0.55);
          transform: scale(0.55);
}
body #wrap .inner:nth-of-type(even) {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
body #wrap .inner:nth-of-type(3n) {
  -webkit-transform: scaleX(-1) scaleY(-1);
          transform: scaleX(-1) scaleY(-1);
}
body #wrap .inner:nth-of-type(3) .filtered .frame {
  -webkit-transform: scale(0.225);
          transform: scale(0.225);
}
body #wrap .inner:nth-of-type(3) .filtered .clouds {
  -webkit-transform: scale(0.525);
          transform: scale(0.525);
}
body #wrap .inner:nth-of-type(even) {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
body #wrap .inner:nth-of-type(3n) {
  -webkit-transform: scaleX(-1) scaleY(-1);
          transform: scaleX(-1) scaleY(-1);
}
body #wrap .inner:nth-of-type(4) .filtered .frame {
  -webkit-transform: scale(0.3);
          transform: scale(0.3);
}
body #wrap .inner:nth-of-type(4) .filtered .clouds {
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
}
body #wrap .inner:nth-of-type(even) {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
body #wrap .inner:nth-of-type(3n) {
  -webkit-transform: scaleX(-1) scaleY(-1);
          transform: scaleX(-1) scaleY(-1);
}
body #wrap .inner:nth-of-type(5) .filtered .frame {
  -webkit-transform: scale(0.375);
          transform: scale(0.375);
}
body #wrap .inner:nth-of-type(5) .filtered .clouds {
  -webkit-transform: scale(0.475);
          transform: scale(0.475);
}
body #wrap .inner:nth-of-type(even) {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
body #wrap .inner:nth-of-type(3n) {
  -webkit-transform: scaleX(-1) scaleY(-1);
          transform: scaleX(-1) scaleY(-1);
}
body #wrap .inner:nth-of-type(6) .filtered .frame {
  -webkit-transform: scale(0.45);
          transform: scale(0.45);
}
body #wrap .inner:nth-of-type(6) .filtered .clouds {
  -webkit-transform: scale(0.45);
          transform: scale(0.45);
}
body #wrap .inner:nth-of-type(even) {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
body #wrap .inner:nth-of-type(3n) {
  -webkit-transform: scaleX(-1) scaleY(-1);
          transform: scaleX(-1) scaleY(-1);
}
body #wrap .inner:nth-of-type(7) .filtered .frame {
  -webkit-transform: scale(0.525);
          transform: scale(0.525);
}
body #wrap .inner:nth-of-type(7) .filtered .clouds {
  -webkit-transform: scale(0.425);
          transform: scale(0.425);
}
body #wrap .inner:nth-of-type(even) {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
body #wrap .inner:nth-of-type(3n) {
  -webkit-transform: scaleX(-1) scaleY(-1);
          transform: scaleX(-1) scaleY(-1);
}
body #wrap .inner:nth-of-type(8) .filtered .frame {
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
}
body #wrap .inner:nth-of-type(8) .filtered .clouds {
  -webkit-transform: scale(0.4);
          transform: scale(0.4);
}
body #wrap .inner:nth-of-type(even) {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
body #wrap .inner:nth-of-type(3n) {
  -webkit-transform: scaleX(-1) scaleY(-1);
          transform: scaleX(-1) scaleY(-1);
}
body #wrap .inner:nth-of-type(9) .filtered .frame {
  -webkit-transform: scale(0.675);
          transform: scale(0.675);
}
body #wrap .inner:nth-of-type(9) .filtered .clouds {
  -webkit-transform: scale(0.375);
          transform: scale(0.375);
}
body #wrap .inner .filtered {
  position: absolute;
  width: 200%;
  height: 200%;
  overflow: hidden;
  top: -50%;
  left: -50%;
  -webkit-filter: url(#wave);
          filter: url(#wave);
}
body .frame, body .clouds {
  content: '';
  position: absolute;
  width: 900000px;
  height: 900000px;
  top: -900px;
  left: -900px;
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  -webkit-transform: scale(0.25);
          transform: scale(0.25);
  background: repeating-linear-gradient(-12deg, #c0cdd7 0px, #d773a0 150px, #c7bea5 200px, #008ec9 400px, #05419f 500px, #008ec9 700px, #c7bea5 750px, #d773a0 800px, #008ec9 850px, #c0cdd7 1100px);
}
body .clouds {
  background: repeating-linear-gradient(22deg, #05419f 100px, transparent 390px, #05419f 400px);
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg