gsap+svg实现鼠标悬浮河马张开大嘴动画效果代码

代码语言:html

所属分类:悬停

代码描述:gsap+svg实现鼠标悬浮河马张开大嘴动画效果代码

代码标签: gsap svg 鼠标 悬浮 河马 张开 大嘴 动画

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

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

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

    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400'>
<style>
    html,
body {
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1e313f;
}

button {
  width: 242px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.ear-left-outer, .ear-right-outer {fill:#919191;}
.ear-left-inner, .ear-right-inner {fill:#6D6D6D;}
.eye-right-outer, .eye-left-outer, .nostril-right-outer, .nostril-left-outer, .body {fill:#AAAAAA;}
.eye-right-inner, .eye-left-inner {fill:#FFFFFF;}
.nostril-right-inner, .nostril-left-inner{fill:#8C8C8C;}
.freckle {fill:#7C7C7C;}
.tongue {fill:#FF4848;}
.tooth-left, .tooth-right {fill:#FFFFE1;}

.link {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #ffffe3;
  text-decoration: none;
  position: absolute;
  bottom: 20px;
  right: 20px;
  border: 2px solid #335067;
  padding: 10px 14px;
  border-radius: 4px;
  transition: background 0.2s;
}

.link:hover {
  background: #243a4a;
}
</style>

</head>

<body>

    <button>
  
<svg viewBox="0 0 242 109" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g class="ears">
    <g class="ear-left">
      <ellipse class="ear-left-outer" transform="matrix(0.9391 -0.3436 0.3436 0.9391 -3.6062 17.8444)" cx="48.5" cy="19.1" rx="11.4" ry="13.8"/>
      <ellipse class="ear-left-inner" transform="matrix(0.9391 -0.3436 0.3436 0.9391 -3.8876 17.4659)" cx="47.3" cy="19.7" rx="7.3" ry="11.2"/>
    </g>
    <g class="ear-right">
      <ellipse class="ear-right-outer" transform="matrix(0.3436 -0.9391 0.9391 0.3436 106.5379 189.869)" cx="189.1" cy="18.7" rx="14.4" ry="11.9"/>
      <ellipse class="ear-right-inner" transform="matrix(0.3436 -0.9391 0.9391 0.3436 106.8522 191.5127)" cx="190.4" cy="19.3" rx="11.7" ry="7.7"/>
    </g>
  </g>
  <g class="eyes">
    <defs>
      <clipPath id="eyeRightClip">
        <path d="M175,25c0-11-7.8-20-17.5-20S140,14,140,25c0,0.7,0,1.3,0.1,2h34.8 C175,26.3,175,25.7,175,25z"/>
      </clipPath>
    </defs>
    <g class="eye-right">
      <path class="eye-right-outer" d="M174.9,27H186c0-0.3,0-0.7,0-1c0-14.4-11.6-26-26-26c-14.4,0-26,11.6-26,26 c0,0.3,0,0.7,0,1h6.1H174.9z"/>
      <path class="eye-right-inner" d="M175,25c0-11-7.8-20-17.5-20S140,14,140,25c0,0.7,0,1.3,0.1,2h34.8 C175,26.3,175,25.7,175,25z"/>
      <g clip-path="url(#eyeRightClip)">
        <circle class="eye-right-pupil" cx="158" cy="18" r="5"/>
      </g>
    </g>
    <defs>
      <clipPath id="eyeLeftClip">
        <path d="M97,25c0-11-7.8-20-17.5-20S62,14,62,25c0,0.7,0,1.3,0.1,2h34.8C97,26.3,97,25.7,97,25z" />
      </clipPath>
    </defs>
    <g class="eye-left">
      <path class="eye-left-outer" d="M96.9,27h6.1c0-0.3,0-0.7,0-1c0-14.4-11.6-26-26-26C62.6,0,51,11.6,51,26 c0,0.3,0,0.7,0,1h11.1H96.9z"/>
      <path class="eye-left-inner" d="M97,25c0-11-7.8-20-17.5-20S62,14,62,25c0,0.7,0,1.3,0.1,2h34.8C97,26.3,97,25.7,97,25z" />
      <g clip-path="url(#eyeLeftClip)">
        <circle class="eye-left-pupil" cx="80" cy="17.7" r="5"/>
      </g>
    </g>
  </g>
  <g class="nostrils">
    <g class="nostril-right">
      <ellipse class="nostril-right-outer" cx="130.5" cy="27.5" rx="6.5" ry="5.5"/>
      <circle class="nostril-right-inner" cx="130" cy="28" r="4"/>
    </g>
    <g class="nostril-left">
      <ellipse class="nostril-left-outer" cx="106.5" cy="27.5" rx="6.5" ry="5.5"/>
      <circle class="nostril-left-inner" cx="107" cy="2.........完整代码请登录后点击上方下载按钮下载查看

网友评论0