css实现7款不同悬浮动画阴影效果代码-html代码-BFW代码库

css实现7款不同悬浮动画阴影效果代码

代码语言：html

所属分类：悬停

代码描述：css实现7款不同悬浮动画阴影效果代码

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

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

<head>
    <meta charset="UTF-8">

    <link href="https://fonts.googleapis.com/css?family=Fira+Sans:300" rel="stylesheet">
    <style>
        /*
      https://developer.mozilla.org/en/docs/Web/CSS/box-shadow
      box-shadow: [inset?] [top] [left] [blur] [size] [color];
    
      Tips:
        - We're setting all the blurs to 0 since we want a solid fill.
        - Add the inset keyword so the box-shadow is on the inside of the element
        - Animating the inset shadow on hover looks like the element is filling in from whatever side you specify ([top] and [left] accept negative values to become [bottom] and [right])
        - Multiple shadows can be stacked
        - If you're animating multiple shadows, be sure to keep the same number of shadows on hover/focus as non-hover/focus (even if you have to create a transparent shadow) so the animation is smooth. Otherwise, you'll get something choppy.
    */
    .fill:hover,
    .fill:focus {
      box-shadow: inset 0 0 0 2em var(--hover);
    }
    
    .pulse:hover,
    .pulse:focus {
      -webkit-animation: pulse 1s;
              animation: pulse 1s;
      box-shadow: 0 0 0 2em transparent;
    }
    
    @-webkit-keyframes pulse {
      0% {
        box-shadow: 0 0 0 0 var(--hover);
      }
    }
    
    @keyframes pulse {
      0% {
        box-shadow: 0 0 0 0 var(--hover);
      }
    }
    .close:hover,
    .close:focus {
      box-shadow: inset -3.5em 0 0 0 var(--hover), inset 3.5em 0 0 0 var(--hover);
    }
    
    .raise:hover,
    .raise:focus {
      box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
      transform: translateY(-0.25em);
    }
    
    .up:hover,
    .up:focus {
      box-shadow: inset 0 -3.25em 0 0 var(--hover);
    }
    
    .slide:hover,
    .slide:focus {
      box-shadow: inset 6.5em 0 0 0 var(--hover);
    }
    
    .offset {
      box-shadow: 0.3em 0.3em 0 0 var(--color), inset 0.3em 0.3em 0 0 var(--col.........完整代码请登录后点击上方下载按钮下载查看