css实现Entity实体图标实现悬浮图标抖动动画效果代码-html代码-BFW代码库

css实现Entity实体图标实现悬浮图标抖动动画效果代码

代码语言：html

所属分类：悬停

代码描述：css实现Entity实体图标实现悬浮图标抖动动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <style>
        @charset "UTF-8";

        
        .button {
          display: inline-block;
          font-family: "Montserrat", Helvetica, sans-serif;
          /* Button is responsive to font size.*/  
          font-size: 18px;
          -webkit-font-smoothing: antialiased;
          position: relative;
          padding: 0.8em 1.5em;
          border: none;
          color: white;
          transition: 0.2s;
          text-decoration: none;
          border: white solid 1px;
          text-transform: uppercase;
          letter-spacing: 1px;
            /* Setting opacity so button isn't so bright.  Could use a filter. */  
           opacity: 0.95;
        /* Setting right padding for button 
        to push text away from the icon which is
        positioned as absolute to enable animations. 
        No need to declare button max/min width as button
        is responsive to font size.
        */  
           padding-right: 3.5em;
          cursor: pointer;
          
        }
        .button:before,
        .button:after {
          position: absolute;
          padding-top: inherit;
          padding-bottom: inherit;
          font-size: inherit;
          top: 0;
          bottom: 0;
          right: 0;
          width: 2.8em;
          transition: 0.2s;
          transform-origin: 50% 60%;
          
          /*  Uncomment below to set icon background color.  Set as black 
        in example with RGB opacity to  make it stand out a bit more.   */
          
          /*  background: rgba(0,0,0,0.10); */
         
        }
        
        
        /* Arrow Button Markup  */
        
        .arrow {
          background: #3c3b6e;
        }
        .arrow:hover {
          background: #b22234;
        }
        .arrow:active,
        .arrow:focus {
          background: #b22234;
        }
        /* Entity Icon   */
        .arrow:after {
          content: "\2794";
        }
        /* Set Arrow Icon Bounce Animation   */
        .arrow:hover:after {
          -webkit-animation: bounceright .........完整代码请登录后点击上方下载按钮下载查看