HTML Web中没有材质按钮动画

Material button animation does not come in HTML Web

本文关键字：按钮 动画 Web HTML      更新时间：2023-09-26

我试图使我的网站按钮材料设计与它的动画为这个，但只有按钮作为结果，没有动画!我猜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>

这里有两个问题:

Jquery javascript不包括在内。你可以让谷歌为你托管它，或者把它放在你的项目中并引用它。并不是javascript没有被"检测到"，而是页面上还没有jquery。点击你发布的链接中的settings按钮，然后点击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>

相关文章：