备忘：记录在工作和学习中遇到的那些实用的CSS样式

文本显示2行，溢出部分显示省略号

<style>
.commodity-name {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; // 这里控制文本显示的行数
   -webkit-box-orient: vertical;
   word-break: break-all; // 可以在任意字符间进行断行
}
</style>

文字居中，文字的两边横线延长至边缘

<div class="text-wrapper">
  <span class="text">掌握完整价值投资策略</span>
</div>
<style lang="scss" scoped>
.text-wrapper {
  color: #00539b;
  font-size: 32px;
  display: flex; // 左横线，文字，右横线flex布局
  align-items: center;
  .text {
    padding: 0 10px; // 文字和左右横线的间距
  }
  // 前后的横线用before和after伪类呈现
  &::before,
  &::after {
    flex: 1;
    content: '';
    height: 1px;
    background-color: #00539b;
  }
}
</style>

效果如图

大屏尺寸响应式的解决方案

<style lang="scss" scoped >
.dashboard-bg {
  width: 100vw;
  height: 100vh;
  background: #646464;
  background-size: cover;
}
.dashboard-wrapper {
  width: 1920px;
  height: 1080px;
  position: fixed;
  transform-origin: left top;
  left: 50%;
  top: 50%;
  }
}
</style>

// 对dashboard-wrapper添加这样一层transform样式
const changeScale = () => {
  const body = document.documentElement
  const scaleW = body.clientWidth / 1920
  const scaleH = body.clientHeight / 1080
  scale = scaleW < scaleH ? scaleW : scaleH
  transform.value = `scale(${scale}) translate(-50%, -50%)`
}

数字上下翻滚动画

// 思路就是纵向排列的0-9，从0翻滚到想要到达的数字
<div class="number-item">
  <span :style="{ transform: `translate(0, -${item}0%)` }">0123456789</span>
</div>
<style scoped lang="scss">
.number-item {
  width: 72px;
  height: 72px;
  overflow: hidden;
  background-color: #0092a6;
  margin: 0 12px;
  border-radius: 4px;
  padding: 12px 0;
  span {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 64px;
    color: #fff;
    transition: transform ease-in-out;
    transition-duration: 2s;
    letter-spacing: 12px;
  }
}
</style>

鼠标hover图片的放大效果

// 这里主要是利用transform: scale(1.2)这个属性来控制图片的大小
<div class="wrapper">
  <img src="./1.png" class="img" />
</div>

<style scoped lang="scss">
.wrapper {
  width: 380px;
  height: 260px;
  overflow: hidden; // 这里限制了盒子大小，图片放大不会超过盒子
  .img {
    transition: all 0.6s;
    &:hover {
      transform: scale(1.2); // 图片放大
    }
  }
}
</style>

鼠标hover后卡片向上移动并且出现阴影边框

// 这里主要是利用transform: translateY(-5px)来实现卡片的向上平移
<div class="wrapper">
  <img src="./1.png" class="img" />
  <div>乡村振兴</div>
</div>

<style scoped lang="scss">
.wrapper {
  width: 400px;
  transition: all 0.6s;
  &:hover {
    box-shadow: 0 1px 8px #d4d4d4; // hover阴影
    transform: translateY(-5px); // 向上平移
  }
}
</style>