CSS 常用效果

CSS 常用效果

JiangWen Lv4
  2020-02-28 12:15 2020-02-28 12:15 创建   2023-06-18 15:54:09 2023-06-18 15:54 更新    

  • 制造模糊文本 

    1
    2
    3
    4
    .blurry-text {
       color: transparent;
       text-shadow: 0 0 5px rgba(0,0,0,0.5);
    }

  • CSS动画实现省略号动画 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    .loading:after {
        overflow: hidden;
        display: inline-block;
        vertical-align: bottom;
        animation: ellipsis 2s infinite;
        content: "\2026"; /* ascii code for the ellipsis character */
    }

    @keyframes ellipsis {
        from {
            width: 2px;
        }
        to {
            width: 15px;
        }
    }

  • CSS悬浮提示文本 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    a { 
        border-bottom:1px solid #bbb;
        color:#666;
        display:inline-block;
        position:relative;
        text-decoration:none;
    }
    a:hover,
    a:focus {
        color:#36c;
    }
    a:active {
        top:1px; 
    }
    /* Tooltip styling */
    a[data-tooltip]:after {
        border-top: 8px solid #222;
        border-top: 8px solid hsla(0,0%,0%,.85);
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        content: "";
        display: none;
        height: 0;
        width: 0;
        left: 25%;
        position: absolute;
    }
    a[data-tooltip]:before {
        background: #222;
        background: hsla(0,0%,0%,.85);
        color: #f6f6f6;
        content: attr(data-tooltip);
        display: none;
        font-family: sans-serif;
        font-size: 14px;
        height: 32px;
        left: 0;
        line-height: 32px;
        padding: 0 15px;
        position: absolute;
        text-shadow: 0 1px 1px hsla(0,0%,0%,1);
        white-space: nowrap;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
    }
    a[data-tooltip]:hover:after {
        display: block;
        top: -9px;
    }
    a[data-tooltip]:hover:before {
        display: block;
        top: -41px;
    }
    a[data-tooltip]:active:after {
        top: -10px;
    }
    a[data-tooltip]:active:before {
        top: -42px;
    }

  • 在可打印的网页中显示URL

    1
    2
    3
    4
    5
    @media print   {  
      a:after {  
        content: " [" attr(href) "] ";  
      }  
    }

  • CSS font属性缩写

    1
    2
    3
    p {
      font: italic small-caps bold 1.2em/1.0em Arial, Tahoma, Helvetica;
    }

  • content属性

    1
  • 标题: CSS 常用效果
  • 作者: JiangWen
  • 创建于: 2020-02-28 12:15:00
  • 更新于: 2023-06-18 15:54:09
  • 链接: https://blog.jiangwen.site/2020/02/28/CSS/CSS 常用效果/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
 评论
此页目录
CSS 常用效果