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

未完待续