CSS3过渡与动画

• transform: scale(1.05) 用于缩放一个元素的大小。在这个值中，1.05是缩放因子。这意味着元素的大小将被放大到原始大小的1.05倍。
  例如，如果一个元素原本的宽度是100像素，应用这个transform属性后，它的宽度将变为105像素。

// 效果：鼠标移入图片放大1.05倍，可以用一个块包裹并设置 overflow: hidden;
img{
  width: 200px;
  height: 100px;
  &:hover {
    transform: scale(1.05);
  }
}

• filter: drop-shadow(10px 24px 34px rgba(0, 0, 255, 0.8)); 用于给元素添加一个阴影效果。这个函数接受四个参数：水平偏移、垂直偏移、模糊半径、颜色

// 效果：鼠标移入出现一个阴影效果
img {
  width: 200px;
  height: 100px;
  &:hover {
    filter: drop-shadow(10px 24px 34px rgba(0, 0, 255, 0.8));
  }
}

• linear-gradient(90deg, #06338E 0%, rgba(6, 51, 142, 0) 100%) 用于给块设置一个 渐变背景，从深蓝色 (#06338E) 开始，然后逐渐变为透明（左 => 右），90deg为零的时候是 从上 => 下

div{
  width: 200px;
  height: 100px;
  background: linear-gradient(90deg, #06338E 0%, rgba(6, 51, 142, 0) 100%);
}

• transform: rotate(-2deg); 用于对元素进行转换操作，如旋转、缩放；rotate(-2deg) 表示元素会逆时针旋转 -2 度。注意这里的负号表示逆时针方向

p{
  &:hover{
    transition: 0.4s;
    transform: rotate(-2deg);
  }
}
//   -ms-transform:rotate(250deg);  /* IE 9 */
//   -moz-transform:rotate(250deg);     /* Firefox 兼容-moz-引擎浏览器*/
//   -webkit-transform:rotate(250deg); /* Safari 和 Chrome *兼容-webkit-引擎浏览器**/
//   -o-transform:rotate(250deg); 

• 块从隐藏放大到正常显示

img{
  animation: hideDiv 1s infinite linear;
  animation-iteration-count: 1; // 作用是规定动画只执行一次
}
@keyframes hideDiv {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
  

• 图片镜像 css3
scale(x,y)，x表示元素沿着水平方向（X轴）缩放的倍数，y表示元素沿着垂直方向（Y轴）缩放的倍数；基础为1，大于一是放大，小于一是缩小，负一为镜像。

    transform: scaleX(-1);
    filter: fliph; /*IE*/
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1); 
    -o-transform: scaleX(-1);

• 图片无缝滚动

html
<div class="wrap">
  <ul class="list">
    <li> 1 </li>
    <li> 2 </li>
    <li> 3 </li>
    <li> 4 </li>
    <li> 5 </li>
    <li> 1 </li>
    <li> 2 </li>
    <li> 3 </li>
    <li> 4 </li>
    <li> 5 </li>
  </ul>
</div>
css
* {
    margin:0;
    padding:0;
}
.wrap {
    overflow:hidden;
    width:500px;
    height:100px;
    border:1px solid #000;
    margin:50px auto;
}
.list {
    position:relative;
    top:0px;
    left:0px;
    width:200%;
    height:100%;
    border:1px solid #f00;
    list-style:none;
    animation:mymove 5s infinite linear;
}
.list li {
    width:98px;
    height:98px;
    border:1px solid white;
    background:blue;
    float:left;
    vertical-align:middle;
    text-align:center;
    line-height:98px;
    color:white;
    font-weight:600;
}
@-webkit-keyframes mymove {
    from {
      left:0px;
        }
        to {
      left:-500px;
        }
}