怎么使用纯css制作裁剪图像动画? - css笔记

因为有了CSS3的属性,我们不只可以裁剪,我们还可以用裁剪的属性来做图片的动态效果

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

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

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

怎么使用纯css制作裁剪图像动画? - css笔记-Npcink
效果演示

实现原理:

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

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

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

四、最后加上object-fit: coverobject-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 — 过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。

下载权限

查看
  • 免费下载
    评论后下载
    登录后下载

  • {{attr.name}}:
您当前的等级为
您有每天免费下载所有资源次的特权,今日剩余 已取得下载权限
2020-05-30
css

怎么用纯CSS实现瀑布流布局? - CSS笔记

2020-5-30 9:18:30

css

怎么自定义列表符号? - css笔记

2020-5-31 9:53:48

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索