前端必看的8个HTML+CSS技巧 （六） 裁剪图像的动画

在有CSS3之前裁剪图片实现也是颇有难度的。现在我们有了两个非常方便简单的CSS3属性可以实现裁剪，那就是object-fit和object-position, 这两个属性可以让我们改变图片的大小，但是不影响图片的长宽比。

当然我们可以使用图片处理工具或者使用JavaScript等插件来实现图片裁剪功能。但是因为有了CSS3的属性，我们不只可以裁剪，我们还可以用裁剪的属性来做图片的动态效果。

为了让我们的例子更加简单，我们这里使用了<input type="checkbox">复选框元素，这样我们就可以使用:checked的伪类来触发启动效果。所以在例子里面我们完全不需要JavaScript的协助。

实现原理：

一、首先给予图片一个宽高height: 1080px，width: 1920px。

二、然后用CSS选择器，锁定当input被选中后img标签的样式变化。当被选中时，给图片设定一个新的宽高，这里我们给宽高各自500像素：width: 500px，height: 500px。

三、然后我们加上了过渡效果和时间让图片改变宽高时有动画过渡效果：transition: width 2s, height 4s;。

四、最后加上object-fit: cover和object-position: left-top这两个属性来保持图片的宽高比例，这样就大功告成了！

我们来看看完成的代码：

勾选裁剪图片 
<input type="checkbox" />
<br />
<img  src="https://img-blog.csdnimg.cn/2020032122230564.png"  alt="Random"/>

input {
  transform: scale(1.5); /* 只是用来放大复选框大小 */
  margin: 10px 5px;
  color: #fff;
}


img {
  width: 1920px;
  height: 1080px;
  transition: 0s;
}


/* css选择器锁定复选框被选中时的状态 */
input:checked + br + img {
  width: 500px;
  height: 500px;
  object-fit: cover;
  object-position: left-top;
  transition: width 2s, height 4s;
}

🌟知识总结

    object-fit — CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。

    object-position — 用来切换被替换元素的内容对象在元素框内的对齐方式。

    transition — 过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。

喜欢的童鞋 🌟关注一下 谢谢