css+div实现炫酷按钮悬浮动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：悬停
代码描述：css+div实现炫酷按钮悬浮动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        @import url(https://fonts.googleapis.com/css?family=Open+Sans);
    /* psuedo element animations */
    @-webkit-keyframes downloadBounce {
      to {
        -webkit-transform: translateY(0px) rotate(50deg);
      }
    }
    @-moz-keyframes downloadBounce {
      to {
        -moz-transform: translateY(0px) rotate(50deg);
      }
    }
    @keyframes downloadBounce {
      to {
        -webkit-transform: translateY(0px) rotate(50deg);
        -moz-transform: translateY(0px) rotate(50deg);
        -ms-transform: translateY(0px) rotate(50deg);
        -o-transform: translateY(0px) rotate(50deg);
        transform: translateY(0px) rotate(50deg);
      }
    }
    @-webkit-keyframes downloadBounce2 {
      to {
        -webkit-transform: translateY(0px) rotate(-50deg);
      }
    }
    @-moz-keyframes downloadBounce2 {
      to {
        -moz-transform: translateY(0px) rotate(-50deg);
      }
    }
    @keyframes downloadBounce2 {
      to {
        -webkit-transform: translateY(0px) rotate(-50deg);
        -moz-transform: translateY(0px) rotate(-50deg);
        -ms-transform: translateY(0px) rotate(-50deg);
        -o-transform: translateY(0px) rotate(-50deg);
        transform: translateY(0px) rotate(-50deg);
      }
    }
    body {
      background: #D6DCE4;
      text-align: center;
      padding: 4em 0;
      font-family: "Open Sans", sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    
    a {
      text-decoration: none;
    }
    
    .download {
      /* rounded corner overflow mask fix */
      -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
      overflow: hidden;
      border-radius: 5px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      background: #007ccd;
      border: 2px solid #007ccd;
      color: white;
      padding: 26px 0 26px 28px;
      width: 220px;
      display: inline-block;
      position: relative;
      -webkit-transition: all 300ms ease;
      -moz-transition: all 300ms ease;
      transition: all 300ms ease;
      margin-right: 20px;
    }
    .download span {
      display: block;
      position: relative;
      z-index: 1;
      -webkit-transform: translate(0, 0);
      -moz-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      -o-transform: translate(0, 0);
      transform: translate(0, 0);
    }
    .download span:after, .download span:before {
      content: "";
      width: 1px;
      height: 16px;
      background: #007ccd;
      opacity: 0;
      position: absolute;
      left: 50%;
      top: 100%;
      -webkit-transition: all 10ms ease-out;
      -moz-transition: all 10ms ease-out;
      transition: all 10ms ease-out;
      -webkit-transform-origin: center bottom;
      -moz-transform-origin: center bottom;
      -ms-transform-origin: center bottom;
      -o-transform-origin: center bottom;
      transform-origin: center bottom;
      -webkit-transform: translateY(0) rotate(0deg);
      -moz-transform: translateY(0) rotate(0deg);
      -ms-transform: translateY(0) rotate(0deg);
      -o-transform: translateY(0) rotate(0deg);
      transform: translateY(0) rotate(0deg);
      -webkit-animation: 0;
      -moz-animation: 0;
      animation: 0;
    }
    .download svg {
      z-index: 0;
      fill: white;
      position: absolute;
      left: 20%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%) rotate(0deg) scale(0.04857);
      -moz-transform: translate(-50%, -50%) rotate(0deg) scale(0.04857);
      -ms-transform: translate(-50%, -50%) rotate(0deg) scale(0.04857);
      -o-transform: translate(-50%, -50%) rotate(0deg) scale(0.04857);
      transform: translate(-50%, -50%) rotate(0deg) scale(0.04857);
      -webkit-transition: all 350ms ease-out;
      -moz-transition: all 350ms ease-out;
      transition: all 350ms ease-out;
      height: 700px;
    }
    .download svg#linux {
      -webkit-transform: translate(-50%, -50%) rotate(0deg) scale(0.05857);
      -moz-transform: translate(-50%, -50%) rotate(0deg) scale(0.05857);
      -ms-transform: translate(-50%, -50%) rotate(0deg) scale(0.05857);
      -o-transform: translate(-50%, -50%) rotate(0deg) scale(0.05857);
      transform: translate(-50%, -50%) rotate(0deg) scale(0.05857);
    }
    .download:hover {
      padding: 26px 0;
      color: #007ccd;
    }
    .download:hover svg {
      left: 50%;
      -webkit-transform: translate(-50%, -50%) rotate(60deg) scale(1);
      -moz-transform: translate(-50%, -50%) rotate(60deg) scale(1);
      -ms-transform: translate(-50%, -50%) rotate(60deg) scale(1);
      -o-transform: translate(-50%, -50%) rotate(60deg) scale(1);
      transform: translate(-50%, -50%) rotate(60deg) scale(1);
    }
    .download:hover svg#windows {
      -webkit-transform: translate(-50%, -10%) rotate(60deg) scale(1);
      -moz-transform: translate(-50%, -10%) rotate(60deg) scale(1);
      -ms-transform: translate(-50%, -10%) rotate(60deg) scale(1);
      -o-transform: translate(-50%, -10%) rotate(60deg) scale(1);
      transform: translate(-50%, -10%) rotate(60deg) scale(1);
    }
    .download:hover svg#linux {
      -webkit-transform: translate(-120%, -125%) rotate(60deg) scale(6);
      -moz-transform: translate(-120%, -125%) rotate(60deg) scale(6);
      -ms-transform: translate(-120%, -125%) rotate(60deg) scale(6);
      -o-transform: translate(-120%, -125%) rotate(60deg) scale(6);
      transform: translate(-120%, -125%) rotate(60deg) scale(6);
    }
    .download:hover span {
      -webkit-transform: translate(0, -10px) scale(1.1);
      -moz-transform: translate(0, -10px) scale(1.1);
      -ms-transform: translate(0, -10px) scale(1.1);
      -o-transform: translate(0, -10px) scale(1.1);
      transform: translate(0, -10px) scale(1.1);
      -webkit-transition: -webkit-transform 400ms ease-out 400ms;
      -moz-transition: -moz-transform 400ms ease-out 400ms;
      transition: transform 400ms ease-out 400ms;
    }
    .download:hover span:after, .download:hover span:before {
      opacity: 1;
      -webkit-transition: all 400ms ease-out 400ms, -webkit-transform 300ms ease-in 100ms;
      -moz-transition: all 400ms ease-out 400ms, -moz-transform 300ms ease-in 100ms;
      transition: all 400ms ease-out 400ms, transform 300ms ease-in 100ms;
    }
    .download:hover span:after {
      -webkit-transform: translateY(7px) rotate(50deg);
      -moz-transform: translateY(7px) rotate(50deg);
      -ms-transform: translateY(7px) rotate(50deg);
      -o-transform: translateY(7px) rotate(50deg);
      transform: translateY(7px) rotate(50deg);
      -webkit-animation: downloadBounce 800ms linear alternate infinite;
      -moz-animation: downloadBounce 800ms linear alternate infinite;
      animation: downloadBounce 800ms linear alternate infinite;
    }
    .download:hover span:before {
      -webkit-transform: translateY(7px) rotate(-50deg);
      -moz-transform: translateY(7px) rotate(-50deg);
      -ms-transform: translateY(7px) rotate(-50deg);
      -o-transform: translateY(7px) rotate(-50deg);
      transform: translateY(7px) rotate(-50deg);
      -webkit-animation: downloadBounce2 800ms linear alternate infinite;
      -moz-animation: downloadBounce2 800ms linear alternate infinite;
      animation: downloadBounce2 800ms linear alternate infinite;
    }
    </style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <a href="#" class="download">
        <svg width="700px" height="700px" viewBox="0 0 40 48" version="1.1" id="android">
                <path d="M27.4703377,4.19382178 L29.9390848,0.715960396 C30.0856739,0.509227723 30.0491797,0.237861386 29.8575239,0.109544554 C29.666113,-0.0180594059 29.3915493,0.045029703 29.2460623,0.252 L26.6803239,3.8649505 C24.9894667,3.21873267 23.1118522,2.85861386 21.1328377,2.85861386 C19.1538232,2.85861386 17.2757188,3.21837624 15.5849841,3.8649505 L13.019613,0.251881188 C12.8725341,0.0451485149 12.5984601,-0.0181782178 12.4069268,0.109425743 C12.2153935,0.237386139 12.1790217,0.508871287 12.3256109,0.715841584 L14.7952152,4.19370297 C10.8686594,5.96590099 8.11506159,9.33350495 7.7642029,13.263802 L34.5000029,13.263802 C34.1503688,9.33350495 31.3966486,5.9660198 27.4703377,4.19382178 Z M26.7168181,9.67580198 C25.9002297,9.67580198 25.2381906,9.03338614 25.2381906,8.24067327 C25.2381906,7.44784158 25.9002297,6.80542574 26.7168181,6.80542574 C27.5342638,6.80542574 28.196058,7.44807921 28.196058,8.24067327 C28.196058,9.03326733 27.5340188,9.67580198 26.7168181,9.67580198 Z M15.5475101,9.67580198 C14.7303094,9.67580198 14.0681478,9.03338614 14.0681478,8.24067327 C14.0681478,7.44807921 14.729942,6.80542574 15.5475101,6.80542574 C16.3640986,6.80542574 17.0260152,7.44784158 17.0260152,8.24067327 C17.0261377,9.03326733 16.3640986,9.67580198 15.5475101,9.67580198 Z" id="Shape"></path>
                <path d="M6.04762826,29.6552079 C6.04762826,31.2532277 4.71228333,32.5487525 3.06502319,32.5487525 L3.06502319,32.5487525 C1.41788551,32.5487525 0.0825405797,31.2532277 0.0825405797,29.6552079 L0.0825405797,17.9512871 C0.0825405797,16.3532673 1.41788551,15.0577426 3.06502319,15.0577426 L3.06502319,15.0577426 C4.71228333,15.0577426 6.04762826,16.3532673 6.04762826,17.9512871 L6.04762826,29.6552079 L6.04762826,29.6552079 Z" id="Shape"></path>
                <path d="M7.76371304,15.1472079 L7.76371304,36.2856238 C7.76371304,37.5409901 8.81273768,38.5588515 10.1070572,38.5588515 L12.8787797,38.5588515 L12.8787797,45.0630891 C12.8787797,46.6612277 14.2140022,47.9566337 15.8612623,47.9566337 C17.5085225,47.9566337 18.8438674,46.6612277 18.8438674,45.0630891 L18.8438674,38.5588515 L23.4204609,38.5588515 L23.4204609,45.0630891 C23.4204609,46.6612277 .........完整代码请登录后点击上方下载按钮下载查看