使盒子有光影效果

实现光影效果的步骤：

1.采用为类选择器，准备一个与标准盒子a重合的光影盒子b。用旋转的skewx（）属性，使X轴旋转-25度，将光影盒子调整为一个平行四边形；

2.使光影盒子先位于标准盒子a左方的100%宽度，设置背景渐变（渐变由3段构成，两边透明，中间部分不透明）的效果；

3.鼠标经过标准盒子时，光阴盒子b向右移动200%的宽度，即从水平方向-100%的宽度，移动至100%的位置（移动至left：0位置的时候，光影盒子与标准盒子重叠在一起），并添加过渡效果；

4.鼠标经过标准盒子a的时候，标准盒子向上移动，并且有盒子阴影效果 ；

/*body部分代码如下*/
<div class="card container">
    <div class="row">
      <div class="col-md-3 col-sm-6 col-xs-12">
      /*其中一个标准盒子*/
        <a href="#">
          <img src="./images/omi.png" alt="">
          <h2>OMI</h2>
          <p>开放现代的Web组件化框架</p>
        </a>
        
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="#">
          <img src="./images/alloyimage.png" alt="">
          <h2>AlloyImage</h2>
          <p>HTML5专业级图像处理引擎</p>
        </a>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="#">
          <img src="./images/alloytouch.png" alt="">
          <h2>AlloyTouch</h2>
          <p>丝般顺滑的触摸运动方案</p>
        </a>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="#">
          <img src="./images/soda.png" alt="">
          <h3>Soda</h3>
          <p>高性能模版引擎</p>
        </a>
      </div>

/*css代码如下*/

.card {
  height: 200px;
}

.card .row  div a {
/*给标准盒子设置溢出隐藏，隐藏光影盒子的溢出部分*/
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  height: 200px;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}
/*给标准盒子里面放置图片及文字内容*/
.card .row img{
  display: inline-block;
  height:60px;
}
.card .row a h2 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 24px;
}
.card .row a p {
  margin: 0 0 10px;
}

.card .row div:nth-child(1) a {
  background-color: #70c3ff;
}
.card .row div:nth-child(2) a {
  background-color: #fd6a7f;
}
.card .row div:nth-child(3) a {
  background-color: #7f8ea0;
}
.card .row div:nth-child(4) a {
  background-color: #89d04f;
}

/*使用伪元素选择器，将光影盒子放在标准盒子的左边，子绝父相*/
.card .row a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 200px;
  /* skewx()： 指定对象X轴的（水平方向）扭曲  */
  transform: skewX(-25deg);
   /* 背景渐变的效果  */
  background-image: -webkit-linear-gradient(
    0deg,
    hsla(0, 0%, 100%, 0),
    hsla(0, 0%, 100%, 0.5),
    hsla(0, 0%, 100%, 0));
    cursor: pointer;
}
 /* 鼠标经过标准盒子时，光影盒子向右移动2倍的宽度  */
.card .row a:hover::before {
  left: 100%;
  transition: all 0.3s;
}
.card .row a:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 40px -24px rgb(0 36 100 / 50%);
}