关于css:css-集合

最近须要解决一些css 款式，例如高光成果，抖动动画，所以，在这里记录一下，当初及当前有用到的css特效。
目前次要用的到属性有：animation（动画），transition（过渡）。transform（旋转）。@keyframes 关键帧。

1，高光成果：

在须要高光的图片里面，增加一层div，编写款式。
首先，给div 设置一个 after 的伪元素。通过 linear-gradient 设置一个高亮的款式，应用transform 将程度的高亮，旋转，达到咱们须要的角度，这里是旋转了45度。在应用 animation 增加 动画的播放速度。 @keyframes定义动画的挪动地位。具体代码如下：
HTML代码：

<div class="light">
    <img src="" alt="">
</div>

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:

<div  class="trembling"></div>

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：
<div class="move"></div>

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);

未完待续