主页 / 问题 / 829853
Accepted
Demon __
Asked:2020-05-18 22:00:17 +0000 UTC2020-05-18 22:00:17 +0000 UTC

如何创建animejs网站按钮的悬停效果

  • 772

偶然发现了animejs网站

我真的很喜欢hover他们到处找的主按钮的效果，但我没有找到类似的效果，即使他们的网站上没有类似的效果

.btn {
    width:100px;
    height:40px;
    
    text-align:center;
    padding:5px;
    line-height:2.3;
    border:1px solid red;
}
<div class="btn">button</div>

之前效果 在此处输入图像描述 之后 在此处输入图像描述

javascript

3 个回答

  1. 好像是这样。

    let up = document.getElementById("up"),
  down = document.getElementById("down"),
  hoverBlock = document.getElementById("hover-block");

hoverBlock.addEventListener("mouseenter", function(e) {
  up.beginElement();
  console.log
});
hoverBlock.addEventListener("mouseout", function(e) {
  down.beginElement();
});
    * {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background: #222;
}

#wrap {
  position: relative;
  width: 220px;
  height: 70px;
  background: transparent;
}

#hover-block {
  cursor: pointer;
  background: rgba(0, 0, 0, 0);
  position: absolute;
  top: 20px;
  left: 20px;
  width: 180px;
  height: 30px;
  z-index: 1111;
}

p {
  position: absolute;
  width: 100%;
  height: 100%;
  color: white;
  text-align: center;
  line-height: 3.8;
  letter-spacing: 5px;
  font-size: 1.2rem;
  font-family: '';
  transition: all .3s;
}

#hover-block:hover~p {
  font-size: 1.2rem;
  transition: all .3s;
  font-size: 1.6rem;
  line-height: 2.7;
  color:orange;
}
    <div id="wrap">
  <div id="hover-block">
  </div>
  <svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="70" viewBox="0 0 220 70">
	<style>svg{background: transparent; 	position:absolute;} </style>
  <path id="pt" d="M 20 20, C20 20  100 20 200 20, L200 50, C200 50  100 50 20 50Z"  fill="none" stroke="red" stroke-width="1">
 	  <animate id="up" begin="indefinite" fill="freeze" attributeName="d" dur="0.3s" to="M 20 20, C20 20  100 10 200 20, L200 50, C200 50  100 60 20 50Z" />
       <animate id="down" begin="indefinite" fill="freeze" attributeName="d" dur="0.3s" to="M 20 20, C20 20  100 20 200 20, L200 50, C200 50  100 50 20 50Z" /> 
	</path>
</svg>
  <p>GitHub</p>
</div>

    • 10

  2. 动画由hover红色区域触发：

    #pt:hover {
  d: path("m 15,135 c 63,-16 122,-13 179,0 v 54 c -57,11 -117,14 -179,0 z");
  d: "m 15,135 c 63,-16 122,-13 179,0 v 54 c -57,11 -117,14.35755 -179,0 z";
}
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 110 500 530">
  <path id="pt" d="M 15,135 H 194 v 54 H 15 Z" fill="#ff2a2a"/>
</svg>

    • 8
  3. Best Answer

    所以，伙计们，这里是:)

    本质很清楚，没有什么复杂的

    根据其他给出的链接回答

    var createBouncyButtons = (function() {
  function createButton(el) {
    var pathEl = el.querySelector('path');
    var spanEl = el.querySelector('span');
    function hover() {
      anime.remove([pathEl, spanEl]);
      anime({
        targets: pathEl,
        d: 'M10,10 C10,10 50,7 90,7 C130,7 170,10 170,10 C170,10 172,20 172,30 C172,40 170,50 170,50 C170,50 130,53 90,53 C50,53 10,50 10,50 C10,50 8,40 8,30 C8,20 10,10 10,10 Z',
        elasticity: 700,
        offset: 0
      });
      anime({
        targets: spanEl,
        scale: 1.15,
        duration: 800,
        offset: 0
      });
    }
    function down() {
      anime.remove([pathEl, spanEl]);
      anime({
        targets: pathEl,
        d: 'M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z',
        elasticity: 700,
        offset: 0
      });
      anime({
        targets: spanEl,
        scale: 1,
        duration: 800,
        offset: 0
      });
    }
    el.onmouseenter = hover;
    el.onmousedown = down;
    el.onmouseleave = down;
  }
  var buttonEls = document.querySelectorAll('.button');

  for (var i = 0; i < buttonEls.length; i++) {
    var el = buttonEls[i];
    createButton(el);
  }
})();
    * {
  margin: 0;
  padding: 0;
}

svg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.button {
  opacity: 0;
  position: relative;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 180px;
  height: 60px;
  text-decoration: none;
}

.button.blue {
  color: #5E89FB;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
<a class="button blue" href="documentation" target="_blank" style="opacity: 1;">
        <svg viewBox="0 0 180 60">
          <path d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z"></path>
        </svg>
        <span>Documentation</span>
      </a>

    • 8

相关问题