作者:宝宝彪恒 | 来源:互联网 | 2020-08-07 19:16
(0)写在前面讲述知乎上看到的一篇文章中的一个案例,让我脑洞大开,佩服至极,特意第二天找到原文赞赏了5元,原文地址https:zhuanlan.zhihu.comp27258076,案例用了很多css3的属性。(1)效果演示(2)知识点及效果<divclass"trunc-list-wrapper"id"mylist"><
(0)写在前面 讲述知乎上看到的一篇文章中的一个案例,让我脑洞大开,佩服至极,特意第二天找到原文赞赏了5元,原文地址,案例用了很多css3的属性。(1)效果演示(2)知识点及效果
.trunc-list-wrapper {height: 2.25em;overflow: hidden;padding-right: 3.5em;
}.trunc-list {
display: flex;flex-wrap: wrap;position: relative;
}.trunc-list li {
flex: 1 0 auto;
}.control {position: absolute;top: 0;right: -3.5em;width: 3.5em;height: calc((2.25em - 100%) * -1000);max-height: 2.25em;overflow: hidden;
}.control--close {display: none;
}
上述为简易代码
display: flex;使.trunc-list内部元素成为flex项目
flex-wrap: wrap; 宽度不够时内部元素将换行,所以浏览器窗口缩放到一定宽度时,.trunc-list的高度发生
变化。
看不见缩放的元素是因为.trunc-list-wrapper的 height: 2.25em;overflow: hidden;导致
元素被隐藏。
trunc-list高度发生变化使得 height: calc((2.25em - 100%) * -1000);产生作用,可以看见more了,
max-height: 2.25em;限制了最大高度。
点击more,因为
#myList是一个有效描点,下面的css生效
.trunc-list-wrapper:target .control--open { display: none;
}.trunc-list-wrapper:target .control--close { display: block;
}
同时下面的css生效
.trunc-list-wrapper:target { height: auto;
}
隐藏的元素可以看见了
点击less时,因为是无效的锚点,相对于对上述效果的清除。
4.完整的代码
以上就是做web响应式设计(不用媒体查询)实例的详细内容,更多请关注 第一PHP社区 其它相关文章!