css 集合

最近需要处理一些css 样式，例如高光效果，抖动动画，所以，在这里记录一下，现在及以后有用到的css特效。
目前主要用的到属性有：animation（动画），transition（过渡）。transform（旋转）。@keyframes 关键帧。

1，高光效果：

在需要高光的图片外面，添加一层div，编写样式。
首先，给div 设置一个 after 的伪元素。通过 linear-gradient 设置一个高亮的样式，使用transform 将水平的高亮，旋转，达到我们需要的角度，这里是旋转了45度。在使用 animation 添加 动画的播放速度。 @keyframes定义动画的移动位置。具体代码如下：
HTML代码：

css样式：

.light{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}
.light:after{
  position: absolute;
  z-index: 1;
  left: -100%;                  
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: linear-gradient(to right,rgba(255, 255, 255, 0) 0,rgba(255, 255, 255, 0.5) 25%,rgb(255, 255, 255) 50%,rgba(255, 255, 255, 0.5) 75%,rgba(255, 255, 255, 0) 100%);
  transform: skewX(45deg);
  animation: bright 3s infinite;
}
@keyframes bright{
  0%{
    left: -100%;
  }
  100%{
    left: 500%;
  }
}

2，抖动动画

抖动动画，用的css 属性是：transform ，主要是要在不同的时刻，旋转不同的角度，达到抖动的效果。
HTML:

CSS：

.trembling{
  width: 100px;
  height: 100px;
  animation: trembling 4s linear  infinite backwards;
}
@keyframes trembling {
  26% {
    transform: rotate(0deg) scale(1);
  }
  28% {
    transform: rotate(-2deg) scale(1.04);
  }
  32% {
    transform: rotate(1deg) scale(1.01);
  }
  34% {
    transform: rotate(-2deg) scale(1.02);
  }
  36% {
    transform: rotate(3deg) scale(1);
  }
  39% {
    transform: rotate(-1deg) scale(1);
  }
  44% {
    transform: rotate(0deg) scale(1);
  }

}

3，div 移动效果：
最基础的用法，就是在需要改变的div 上 添加 transition 属性即可。代码如下：

HTML：

CSS:

.move{
  width: 100px;
  height: 200px;
  transition: width 0.5s;
  background-color: aqua
}
.move:hover{
  width: 200px;
  height: 200px;
}

在开发中，会有遇到，一开始 div 是隐藏的，鼠标拖动才会显示，并展示过渡动画。这里需要注意的是，需要先设置 display:block 再设置一个 setTimeout 延迟一定时间，在改变高度或宽度。不然transition 的过渡动画没有效果。
js代码如下：

  divObj.style.display = "block";
  setTimeout(function () {
    divObj.style.height = "20vh";
  }, 5);

---

未完待续