css小技巧分享

从左至右的由白色透明至白色的渐变效果兼容处理
new Date() 在IOS上的兼容处理
如何实现文本省略
纯CSS实现单行省略
纯CSS实现多行文本省略
CSS+JS实现多行文本省略
伪类使用技巧
使用:not()伪类减少css代码
使用attr方法获取HTML元素的属性值
使用scroll-behavior属性实现平滑滚动
不定高元素实现高度transition变换
纯CSS简单实现页面阅读进度条效果
纯CSS实现灌水loading效果

从左至右的由白色透明至白色的渐变效果兼容处理

预期效果

有兼容问题的实现方式

linear-gradient(90deg, transparent 0%, white 55%);

在Android上可达到预期效果，但IOS存在兼容问题,如下

exception

原因： transparent 是rgba(0,0,0,0)的简写

兼容解决方案

linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 55%)

new Date() 在IOS上的兼容处理

在使用new Date(‘2019-04-12 17:38’)IOS存在兼容问题：new Date()中的字符串有指定的格式，比如new Date(“2019/4/12 17:38”)(必须有年月日)。例如new Date(“2019-4-12”)或者new Date(“10/12”)会返回Invalide

兼容解决方案

new Date(time.replace(/-/g, '/'))

如何实现文本省略

纯CSS实现单行省略

利用text-overflow: ellipsis;结合overflow: hidden;white-space: nowrap;即可实现。代码如下：

    <div class="wrapper">
        <div class="text">
            这里是单行省略这里是单行省略这里是单行省略这里是单行省略
            这里是单行省略这里是单行省略这里是单行省略这里是单行省略
            这里是单行省略这里是单行省略这里是单行省略这里是单行省略
        </div>
    </div>

    .wrapper {
        height: 30px;
        overflow: hidden;
    }
    .text {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

纯CSS实现多行文本省略

normal

利用-webkit-line-clamp属性实现：

-webkit-line-clamp属性是一个不规范的属性，需要组合其他外来的WebKit属性实现效果。

display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

text-overflow，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。

该方法存在兼容性问题，PC浏览器支持不好。

<div class="wrapper1">
    <span class="text1">
        这里是多行省略这里是多行省略这里是多行省略这里是多行省略
        这里是多行省略这里是多行省略这里是多行省略这里是多行省略
        这里是多行省略这里是多行省略这里是多行省略这里是多行省略
    </span>
</div>

.wrapper1 {
    height: 50px;
    overflow: hidden;
}
.text1 {
    display: -webkit-box;
    -webkit-box-orient: vertical; 
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-line-clamp: 2;
}

注意事项： webpack打包后会过滤掉-webkit-box-orient属性，导致样式不生效,解决方式如下：

    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */

CSS+JS实现多行文本省略

normal

利用伪类将“…”添加到需要省略的段落末尾。下面演示的两行省略。可以结合JS判断文本大于多少长度，再添加上样式类，进行控制多行省略。

<div class="wrapper1">
    <span class="text1">
        这里是多行省略这里是多行省略这里是多行省略这里是多行省略
        这里是多行省略这里是多行省略这里是多行省略这里是多行省略
        这里是多行省略这里是多行省略这里是多行省略这里是多行省略
    </span>
</div>

.wrapper1 {
    height: 32px;
}
.text1 {
    position: relative;
    height: 32px;
    display: block;
}
.text1:after {
    position: absolute;
    right: 0;
    bottom: 0;

    padding-left: 40px;

    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 55%);

    content: "...";
}

伪类使用技巧

使用:not()伪类减少css代码

案例描述：多行列表，除了最后一行列表，每行列表都需要有背景颜色

normal

普通实现方式

    <ul>
        <li>选择器</li>
        <li>选择器</li>
        <li>选择器</li>
    </ul>

    ul li {
        background-color: orange;
        margin-bottom: 5px;
    }

    ul li:last-child {
        background-color: transparent;
    }

:not()实现方式

    ul li:not(:last-child) {
        background-color: orange;
        margin-bottom: 5px;
    }

使用attr方法获取HTML元素的属性值

案例描述：鼠标悬浮在某段文字上时，需要tooltip展示文案

节点增加属性data-msg=”文案”,用attr(data-msg)获取值放入节点的伪类属性content。

<div class="wrapper">
    <a data-msg="伪类抓取属性值">hover</a>
</div>

.wrapper {
    position: relative;
    background-color: #f1f1f1;
    margin-bottom: 50px;
    height:50px;
    text-align: center;
    line-height: 50px;
    a:hover {
        background-color: pink;
    }
    a:hover:after {
        content: attr(data-msg); // 获取节点属性
        position: absolute;
        bottom: -22px;
        left: 0;
        font-size: 12px;
        line-height: 12px;
        color: #524f4f;
    }
}

使用scroll-behavior属性实现平滑滚动

demo https://codepen.io/yihuana/pen/oOGJmY

scroll-behavior这个属性的兼容性很不好，目前只兼容firefox、谷歌较新版本浏览器。

<div class="tab"><a href="#t1">选项1</a><a href="#t2">选项2</a><a href="#t3">选项3</a></div>
<div class="wrapper">
    <div id="t1" class="text"></div>
    <div id="t2" class="text"></div>
    <div id="t3" class="text"></div>
</div>

.wrapper {
    scroll-behavior:smooth; /*平滑属性*/
    background-color: #f1f1f1;
    margin-bottom: 50px;
    height:100px;
    overflow-y: scroll;
    .text {
        height: 100px;
    }

    #t1 {
        background-color: peru;
    }
    #t2 {
        background-color: palevioletred;
    }
    #t3 {
        background-color: powderblue;
    }
}

不定高元素实现高度transition变换

案例描述：不定高的面板展开收起时，实现transition过渡效果。

一些CSS属性可以是动画的，所以，当它的值改变时，它可以以平滑的方式改变。由于高度不固定，css无法设置展开后的height值，可以用max-height代替height来实现。

<div class="wrapper" @click="onClick1">
    <p>点击这里展开</p>
    <div :class="fold ? 'fold' : ''">通过使用 CSS 来提升工作效率！通过使用 CSS 来提升工作效率！通过使用 CSS 来提升工作效率！通过使用 CSS 来提升工作效率！通过使用 CSS 来提升工作效率！通过使用 CSS 来提升工作效率！
    </div>
</div>

.wrapper {
    margin-bottom: 50px;
    height: 150px;
    width: 200px;

    div {
        transition: maxHeight .3s ease-in-out;
        max-height: 0;
        overflow: hidden;
    }
    .fold {
        transition-timing-function: ease-in;
        max-height: 600px;
    }
}

纯CSS简单实现页面阅读进度条效果

demo: https://codepen.io/yihuana/pen/OGxrEz

利用背景渐变实现。父节点作为背景板，绘制从左下到右上的一个渐变背景色，然后用伪类绘制一个蒙层挡住，留出上面5px距离的进度条间隙。子节点里面放文案。

注意：伪类作为蒙层的堆叠顺序值(z-index)要是最小的。

<div class="progress-detail">
    <div class="wrapper">
        <p>***</p>
    </div>
</div>

.progress-detail {
    position: relative;
    padding: 5px;
    line-height: 30px;
    background-image: linear-gradient(to right top, orange 50%, #fff 50%); // 背景渐变
    background-size: 100% calc(100% - 100vh + 5px);
    background-repeat: no-repeat;
    z-index: 1;
    &::after {
        content: "";
        position: fixed;
        top: 5px;
        left: 0;
        bottom: 0;
        right: 0;
        background: #fff;
        z-index: -1;
    }
}

纯CSS实现灌水loading效果

第一种：用帧动画实现

使用这种方式实现，每一帧需要一张图片，最终图片较大。但是可实现效果的较为丰富。

第二种：用CSS属性直接实现

demo https://codepen.io/yihuana/pen/BEwGGQ

如何实现波浪效果？

利用伪类绘制两个一深一浅有弧度的盒子。
两个正方形重叠在一起，一前一后进行绕着z轴3d旋转。

波浪如何缓缓上升？

有伪类的该节点，加上一个上升的动画效果。

如何使波浪效果更真实？

两个盒子在旋转的同时，加上一个小弧度的上升下降的效果，制造一个明显的波浪感。
两个盒子的动画效果加快一点。

<div class="loading">
    <span class="loading-wave">
        <span class="wave"></span>
    </span>
    <span class="loading-img"></span>
</div>

.loading-wave {
  position: relative;
  overflow: hidden;
  margin-top: -32.5px;
  margin-left: -32.5px;
  width: 65px;
  height: 65px;
  border-radius: 25%;
  background-color: #e6e6e6;
  .wave {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    animation: translateY 3.5s infinite ease-out;
    &:before,
    &:after {
      content: "";
      position: absolute;
      left: 50%;
      width: 80px;
      height: 80px;
      background-color: #fe7765;
      animation: rotate 2s infinite linear;
    }
    &:before {
      bottom: -79px;
      border-radius: 45%;
      left: 54%;
      width: 89px;
    }
    &:after {
      bottom: -73px;
      opacity: 0.5;
      border-radius: 40%;
      animation-delay: 0.2s;
    }
  }
}
.loading-img {
  position: absolute;
  background-size: contain;
  background-image: url(../../assets//blog/assets/img/csstip/loading.png);
  background-repeat: no-repeat;
  margin-top: -37.5px;
  margin-left: -37.5px;
  width: 75px;
  height: 75px;
}

@keyframes rotate {
  0% {
    transform: translate(-50%, 0) rotateZ(0deg);
  }
  50% {
    transform: translate(-50%, -2%) rotateZ(180deg);
  }
  100% {
    transform: translate(-50%, 0%) rotateZ(360deg);
  }
}

@keyframes translateY {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-83%);
  }
}