材料按钮动画不出现在 HTML Web 中答案

【问题标题】：Material button animation does not come in HTML Web材料按钮动画不出现在 HTML Web 中
【发布时间】：2015-07-16 04:17:00
【问题描述】：

我尝试将我的网站按钮制作为 Material Design，其动画为 this，但结果只有按钮，没有动画！我猜 JavaScript 没有被检测到。我是网页设计新手！有人请帮帮我！请在下面检查我是否犯了任何错误。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="shortcut icon" href="/files/favicon+1.ico" />
    <link rel="icon" href="/files/favicon192.png" sizes="196x196" type="image/png" />
    <title>Material Button</title>
    <style>
      html {
        background: salmon;
      }
      
      * {
        color: white;
        font-family: 'Open Sans', sans-serif;
      }
      
      .wrap {
        margin-top: 20px;
        text-align: center;
      }
      
      .button {
        display: inline-block;
        margin: 0.3em;
        padding: 1.2em 5em;
        overflow: hidden;
        position: relative;
        text-decoration: none;
        text-transform: uppercase;
        border-radius: 3px;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -ms-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
        box-shadow: 0 2px 10px rgba(0,0,0,0.5);
        border: none;
        
        font-size: 15px;
        text-align: center;
      }
      
      .button:hover {
        box-shadow: 1px 6px 15px rgba(0,0,0,0.5);
      }
      
      .green {
        background-color: #4CAF50;
        color: white;
      }
      
      .red {
        background-color: #F44336;
        color: white;
      }
      
      .blue {
        background-color: #03A9F4;
        color: white;
      }
      
      .ripple {
        position: absolute;
        background: rgba(0,0,0,.25);
        border-radius: 100%;
        transform: scale(0.2);
        opacity:0;
        pointer-events: none;
        -webkit-animation: ripple .75s ease-out;
        -moz-animation: ripple .75s ease-out;
        animation: ripple .75s ease-out;
      }
      
      @-webkit-keyframes ripple {
        from {
          opacity:1;
        }
        to {
          transform: scale(2);
          opacity: 0;
        }
      }
      
      @-moz-keyframes ripple {
        from {
          opacity:1;
        }
        to {
          transform: scale(2);
          opacity: 0;
        }
      }
      
      @keyframes ripple {
        from {
          opacity:1;
        }
        to {
          transform: scale(2);
          opacity: 0;
        }
      }
      
      
    </style>
    <script language="javascript">

 $('.button').mousedown(function (e) {
    var target = e.target;
    var rect = target.getBoundingClientRect();
    var ripple = target.querySelector('.ripple');
    $(ripple).remove();
    ripple = document.createElement('span');
    ripple.className = 'ripple';
    ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
    target.appendChild(ripple);
    var top = e.pageY - rect.top - ripple.offsetHeight / 2 -  document.body.scrollTop;
    var left = e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft;
    ripple.style.top = top + 'px';
    ripple.style.left = left + 'px';
    return false;
});

</script>
  </head>
  
  
  <body>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <div class="wrap">
      <h1>Material Design Button</h1>
      <a class="button blue" href="#">Hover Me</a>
      <a class="button red" href="#">Click Me</a>
      <a class="button green" href="#">Love Me</a>
    </div>
  </body>
</html>

【问题讨论】：

标签： javascript jquery html css web

【解决方案1】：

这有两个问题：

不包括 Jquery javascript。您可以让 google 为您托管它或将其放入您的项目中并引用它。并不是说没有“检测到”javascript，而是页面上还不存在jquery。单击您发布的链接中的设置按钮，然后单击 javascript 选项卡，您可以看到该示例在何处获取 jquery。

除此之外，按钮事件在文档准备好之前就被绑定了。

这里有一个例子，其中两个都已到位 - 脚本标记添加到按钮事件上方，按钮事件代码包含在 $(function(){ ... }); 中，这是 jQuery 文档准备功能的简写。 https://learn.jquery.com/using-jquery-core/document-ready/

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="shortcut icon" href="/files/favicon+1.ico" />
    <link rel="icon" href="/files/favicon192.png" sizes="196x196" type="image/png" />
    <title>Material Button</title>
    <style>
      html {
        background: salmon;
      }
      
      * {
        color: white;
        font-family: 'Open Sans', sans-serif;
      }
      
      .wrap {
        margin-top: 20px;
        text-align: center;
      }
      
      .button {
        display: inline-block;
        margin: 0.3em;
        padding: 1.2em 5em;
        overflow: hidden;
        position: relative;
        text-decoration: none;
        text-transform: uppercase;
        border-radius: 3px;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -ms-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
        box-shadow: 0 2px 10px rgba(0,0,0,0.5);
        border: none;
        
        font-size: 15px;
        text-align: center;
      }
      
      .button:hover {
        box-shadow: 1px 6px 15px rgba(0,0,0,0.5);
      }
      
      .green {
        background-color: #4CAF50;
        color: white;
      }
      
      .red {
        background-color: #F44336;
        color: white;
      }
      
      .blue {
        background-color: #03A9F4;
        color: white;
      }
      
      .ripple {
        position: absolute;
        background: rgba(0,0,0,.25);
        border-radius: 100%;
        transform: scale(0.2);
        opacity:0;
        pointer-events: none;
        -webkit-animation: ripple .75s ease-out;
        -moz-animation: ripple .75s ease-out;
        animation: ripple .75s ease-out;
      }
      
      @-webkit-keyframes ripple {
        from {
          opacity:1;
        }
        to {
          transform: scale(2);
          opacity: 0;
        }
      }
      
      @-moz-keyframes ripple {
        from {
          opacity:1;
        }
        to {
          transform: scale(2);
          opacity: 0;
        }
      }
      
      @keyframes ripple {
        from {
          opacity:1;
        }
        to {
          transform: scale(2);
          opacity: 0;
        }
      }
      
      
    </style>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script language="javascript">
$(function(){
 $('.button').mousedown(function (e) {
    var target = e.target;
    var rect = target.getBoundingClientRect();
    var ripple = target.querySelector('.ripple');
    $(ripple).remove();
    ripple = document.createElement('span');
    ripple.className = 'ripple';
    ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
    target.appendChild(ripple);
    var top = e.pageY - rect.top - ripple.offsetHeight / 2 -  document.body.scrollTop;
    var left = e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft;
    ripple.style.top = top + 'px';
    ripple.style.left = left + 'px';
    return false;
});
});

</script>
  </head>
  
  
  <body>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <div class="wrap">
      <h1>Material Design Button</h1>
      <a class="button blue" href="#">Hover Me</a>
      <a class="button red" href="#">Click Me</a>
      <a class="button green" href="#">Love Me</a>
    </div>
  </body>
</html>

【讨论】：