RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 829853
Accepted
Demon __
Demon __
Asked:2020-05-18 22:00:17 +0000 UTC2020-05-18 22:00:17 +0000 UTC 2020-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 3 个回答
  • 10 Views

3 个回答

  • Voted
  1. Air
    2020-05-19T05:03:54Z2020-05-19T05:03:54Z

    好像是这样。

    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. 4 редакции, 2 участника
    2020-05-18T22:52:15Z2020-05-18T22:52:15Z

    动画由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
    Demon __
    2020-05-19T03:31:41Z2020-05-19T03:31:41Z

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

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

    根据其他给出的链接回答

    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

相关问题

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    是否可以在 C++ 中继承类 <---> 结构?

    • 2 个回答
  • Marko Smith

    这种神经网络架构适合文本分类吗?

    • 1 个回答
  • Marko Smith

    为什么分配的工作方式不同?

    • 3 个回答
  • Marko Smith

    控制台中的光标坐标

    • 1 个回答
  • Marko Smith

    如何在 C++ 中删除类的实例?

    • 4 个回答
  • Marko Smith

    点是否属于线段的问题

    • 2 个回答
  • Marko Smith

    json结构错误

    • 1 个回答
  • Marko Smith

    ServiceWorker 中的“获取”事件

    • 1 个回答
  • Marko Smith

    c ++控制台应用程序exe文件[重复]

    • 1 个回答
  • Marko Smith

    按多列从sql表中选择

    • 1 个回答
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Suvitruf - Andrei Apanasik 什么是空? 2020-08-21 01:48:09 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5