SMIL加CSS实现变形动画-html代码-BFW代码库

SMIL加CSS实现变形动画

代码语言：html

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
:root {
  --backgroundColor: #232323;
  --firstColor: #00D69C;
  --secondColor: #C52AFC;
  --thirdColor: #FF1F00;
  --fourthColor: #FFD600;
  --dropShadowColor: rgba(0, 0, 0, .7);
}

html,
body {
  overflow: hidden;
  background-color: var(--backgroundColor);
}

main {
  display: grid;
  width: 100vw;
  height: 100vh;
}

.blob {
  margin: auto;
}

svg {
  transform-origin: 50% 50%;
  animation: move 24s ease-in-out infinite;
}

@keyframes move {
  0%   { transform: scale(1)   translate(0, 0) rotate(0); fill: var(--firstColor); filter: drop-shadow( 20px 14px 10px var(--dropShadowColor)); }
  25%  { transform: scale(0.8) translate(5vw, 10vh) rotate(55deg); fill: var(--secondColor); filter: drop-shadow( 14px 14px 6px var(--dropShadowColor)); }
  50%  { transform: scale(0.6) translate(15vw, 5vh) rotate(180deg); fill: var(--thirdColor); filter: drop-shadow( -16px -16px 16px var(--dropShadowColor)); }
  75%  { transform: scale(0.8) translate(5vw, 10h) rotate(55deg); fill: var(--fourthColor); filter: drop-shadow( 14px 14px 6px var(--dropShadowColor)); }
  100% { transform: scale(1)   translate(0, 0) rotate(0); fill: var(--firstColor); filter: drop-shadow( 20px 14px 10p.........完整代码请登录后点击上方下载按钮下载查看