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

3，高斯模糊效果：

这里用到的CSS 属性是：filter: blur();
基础使用：
在需要模糊的 div 层级使用 blur：

常用的使用方法：
先见效果图：

主要有三点：
1，中间展示的地方也要获取背景图，针对当前区域的背景进行模糊
2，使用伪类，防止模糊效果影响到当前区域的其他内容。
3， blur 所在的层级要有 background ，不然属性不生效。！！！
HTML：

<div class="bgImg">
  <div class="login">
    <div style="height:500px; width:600px">
      <h1>欢迎</h1>
    </div>
  </div>
</div>

css代码：

.bgImg {
  background-image: url("https://pic.3gbizhi.com/2019/0907/20190907025057494.jpg") 100%;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.login {
  display: flex;
  justify-content: center;
  width: 25%;
  z-index: 10;
}
.login::before {
  content: " ";
  background: inherit;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  filter: blur(10px);
  overflow: hidden;
  z-index: -1;
}

如果，觉得模糊效果比较小，可以使用： transform: scale(); 进行放大。
放大后的效果：

---

未完待续