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.........完整代码请登录后点击上方下载按钮下载查看