svg+css布局枝头变色龙摇晃效果代码-html代码-BFW代码库

svg+css布局枝头变色龙摇晃效果代码

代码语言：html

所属分类：动画

代码描述：svg+css布局枝头变色龙摇晃效果代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

     <style>
     body{margin:0;padding:0; min-height:100vh;
  display:grid; place-content:center; color:white; background-color:#0c322c}

svg{height:100vh; width:100vw;}

svg * { transform-box: fill-box;}


#climbing-geeko{
  transform-origin:bottom right;
  animation: branch-sway 5s infinite
}

@keyframes branch-sway{
  0%,100%{transform: rotate(-1deg)}
  50%{  transform: rotate(1deg)}
}

#gc-leaves-1{transform-origin:top right;}
#gc-leaves-2{transform-origin:50% 100%;}
#gc-leaves-1,
#gc-leaves-2{ animation: sway 6s infinite;}
@keyframes sway{50%{transform:rotate(10deg)}}



#gc-eyelids{animation: blink 2s infinite}
@keyframes blink{
  0%,25%{stroke-width: 0}
  50%{stroke-width: 120}
  75%,100%{stroke-width: 0}
}

#gc-pupil{animation: look 4s infinite}

@keyframes look{
    0%{transform:translate(-5%, -5%)}
    50%{transform:translate(10%, 85%)}
    100%{transform:translate(-5%, -5%)}
}
      </style>
</head>
<body>
  <svg viewBox="-20 -15 1040 631.6" preserveAspectRatio="xMaxYMid meet"><defs><linearGradient id=linear-gradient x1=1057.3 x2=1103.8 y1=672.1 y2=672.1 gradientTransform="translate(-124 -300)"gradientUnits=userSpaceOnUse><stop id=stop1 offset=0 stop-color=#005a37 /><stop id=stop2 offset=.5 stop-color=#006c44 /><stop id=stop3 offset=1 stop-color=#008658 /></linearGradient><linearGradient id=linear-gradient-2 x1=1098.1 x2=1008.8 y1=700.5 y2=700.5 gradientTransform="translate(-124 -300)"gradientUnits=userSpaceOnUse><stop id=stop4 offset=0 stop-color=#008658 /><stop id=stop5 offset=.3 stop-color=#068c5c /><stop id=stop6 offset=.6 stop-color=#1a9d67 /><stop id=stop7 offset=1 stop-color=#35b677 />.........完整代码请登录后点击上方下载按钮下载查看