jquery+TweenMax实现按钮点击交互动画效果代码-html代码-BFW代码库

jquery+TweenMax实现按钮点击交互动画效果代码

代码语言：html

所属分类：其他

代码描述：jquery+TweenMax实现按钮点击交互动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Raleway'>
    <style>
        body{  
    background: #ED4264;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #FFEDBC, #ED4264);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #FFEDBC, #ED4264); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
    
    .content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: block;
    }
    
    .scalecircle{
      display:none;
      top:50px;
      height:50px;
      width:50px;
      border-radius:50%;
      background-color:#EC3A48;
      position:absolute;
      left:-20px;
      top:0px;
      z-index:-1;
      transform-origin:50% 50%;
      animation: scaled 1s infinite;
      -webkit-animation:scaled 1s infinite;
      -moz-animation:scaled 1s infinite;
    }
    
    button:focus{
      outline:none;
    }
    
    button {
      height: 50px;
      width: 340px;
      left:-170px;
      background-color: #EC3A48;
      position: absolute;
      border: 0;
      border-radius: 10px;
      color: white;
      font-family: 'Raleway', sans-serif;
      font-size: 16px;
      transform-origin: 50% 50%;
    }
    
    .btnhover:hover {
      opacity: 0.8;
      cursor: pointer;
    }
    
    @keyframes scaled{
      0%{
        transform:scale(1);
        opacity:1;
      }
      
      100%{
        transform:scale(2);
        opacity:0.3;
      }
    }
    
    @-webkits-keyframes scaled{
      0%{
        transform:scale(1);
        opacity:1;
      }
 .........完整代码请登录后点击上方下载按钮下载查看