【css笔记整理~】

皮皮皮皮克斯

于 2020-11-04 16:07:11 发布

阅读量90

点赞数 1

文章标签： css

本文链接：https://blog.youkuaiyun.com/weixin_43996362/article/details/109492489

版权

本文介绍两种实用的CSS技巧：一是实现文本的闪烁效果，通过定义关键帧动画控制元素透明度的变化；二是限制文本显示行为，包括如何让超出部分隐藏并以省略号显示（一行或多行）。这些技巧有助于改善网页的视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 闪烁效果

<h1 class="animateMsg">{{ msg }}</h1>

  .animateMsg {
    animation: blink 1s infinite;
    -webkit-animation: blink 1s infinite;
  }
  @keyframes blink {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 100;
    }
    100% {
      opacity: 0;
    }
  }
  @-webkit-keyframes blink {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 100;
    }
    100% {
      opacity: 0;
    }
  }

2. 两行显示超出隐藏

// 超出一行 隐藏
 	white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
// 超出两行 隐藏
  display: -webkit-box;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;