【分享】图文列表也可以错落有致，漂亮的不像样！

登录

废话不多说，直接上效果！

在线预览地址：https://marketplacedemo.app.hzgcloud.cn/notiflix/

可以看到几个特点：
1. 图文列表交错排列，更加有设计感；
2. 鼠标悬浮拥有丝滑的动画；

这里需要使用CSS实现即可，2步即可实现：
1. 将图文列表所在单元格的CSS命名为：even-sink

2. 将下方CSS放置到工程设置里

.even-sink .repeater-item {
transition: 0.3s;
}
.even-sink .repeater-item:hover {
scale: 1.05;
}
.even-sink .repeater-item:nth-child(2n) {
margin-top: 25px;
}

复制代码

这里顺便做个广告
葡萄城市场 已经上架了该官方工程
有喜欢的可以看看

小萝卜David · 小萝卜David

跟着超哥学UI

ikens · ikens

这UI太好看了吧

ifro · ifro

越来越厉害了，学习！

回复 · 137294886

越来越厉害了，感谢分享。

		自动登录	找回密码
密码			立即注册

[资源分享] 【分享】图文列表也可以错落有致，漂亮的不像样！

本帖子中包含更多资源

4 个回复

时代开发者征文活动

微信认证勋章

悬赏达人

讲师达人

活字格认证

活字格高级认证

圣诞拼拼乐