大家好,不知道你们是否和我一样存在这样的困惑呢,虽然css入门容易,但是其内容太多,好多属性看了似是而非,觉得自己看懂了,到自己用的时候又很犯难了,看到漂亮的效果还是无从下手,这主要还是自己对新属性实践太少了,不能进行灵活应用,CSS总让一些人找不到感觉。其实学好CSS真的没有太多捷径,和JS编程一样,要重视对待,要多看和多练,因为现在的CSS不再是以前的CSS啦。
比如这两本书《 CSS 权威指南第四版》,1000多页,买了好几个月我到现在还没看完,文字实在太枯燥了,看完了忘,忘了继续看,实在看不下去,不知道大家有没有同样的感受呢?
好了,废话不多说,今天我们要做的一个案例就是做一个常见的例子:在不少网站右侧都有一个固定浮动的留言图标,我们点击这个图标,就会侧滑显示留言内容面板。你也许会说这个不简单吗,使用JQ就能轻松实现,但是我想说的,为了网站的性能,能用CSS实现的尽量不要用JS,因为现在CSS已足够强大。
今天这个例子,我们将使用纯CSS实现这个效果,这里我们将用到” CSS checkbox hack“的技术,效果如下图所示:
一、创建 HTML 结构
基于上面的效果图,我们要创建三个元素,一个 checkbox 元素以及对应的 label 标记,和一个表单面板元素。
这里用到了一个 CSS 特性值得大家关注下:<label> 标签的 for 属性用于指定与哪个表单元素进行关联,扩大表单元素的点击区域,我们点击 label 元素标记,其对应的表单元素将会被聚焦选中。
这个特性是我们实现这个案例的技巧之一,再结合 CSS checkbox 的伪类选择器进行留言面板的显示与隐藏,这样我们就可以摆脱 JS 来实现这个案例。
基于以上思路 ,我们开始动手吧,首先我们先放置 checkbox,和其对应的 label,最后添加表单面板和相关的表单元素。
我们将通过表单的 id 属性与表单中label元素的 for 值与其关联,最终我们完成了 HTML 结构如下段代码所示:
<input type="checkbox" id="mycheckbox"> <label for="mycheckbox" class="feedback-label">FEEDBACK</label> <form class="form"> <div> <label for="fullname">Full Name</label> <input type="text" id="fullname"> </div> <div> <label for="email">Email</label> <input type="email" id="email"> </div> <div> <label for="comment">Comment</label> <textarea id="comment"></textarea> </div> <div> <button type="submit">Send</button> </div> </form>
完成后的效果图如下:
二、定义基础的样式
现在我们开始添加一些基础的CSS的式,这里我们用到了CSS自定义变量,方便我们全局修改,还有一些 reset 规则,和表单的基础规则样式,示例代码如下:
:root { --white: white; --gradient: linear-gradient(-45deg, #FFA600 0%, #FF5E03 50%); --form: #eeefef; --border-radius: 4px; --form-width: 500px; --form-mob-width: 320px; } * { padding: 0; margin: 0; box-sizing: border-box; } body { font: 20px/1.5 sans-serif; background: var(--white); } h1 { font-size: 2rem; text-align: center; margin-top: 20vh; } button, label { cursor: pointer; } label { display: block; } button, input, textarea { font-family: inherit; font-size: 100%; border: none; } textarea { resize: none; }
三、 定义表单元素相关样式
1、由于 checkbox 这个元素在案例中无需显示,我们只是用其的伪类特性结合 label 控制留言面板的显示与隐藏,因此我们需要将其移出可视区域,记住这里不能用隐藏属性(display:none)。示例代码如下:
[type="checkbox"] { position: absolute; left: -9999px; }
2、接下来,我们需要添加这些CSS操作:
- 使用 fix 属性将 checkbox 对应的 label 标签元素固定在右侧的中央。
- 垂直先显示”FEEDBACK“文本。
- 隐藏表单面板,我们这里将其往右移动其宽度的 100% 的距离,并垂直居中。
对应的CSS代码如下:
/*CUSTOM VARIABLES HERE*/ .feedback-label, .form { position: fixed; top: 50%; right: 0; } .feedback-label { transform-origin: top right; transform: rotate(-90deg) translate(50%, -100%); z-index: 2; } .form { width: var(--form-width); max-height: 90vh; transform: translate(100%, -50%); padding: 30px; overflow: auto; background: var(--form); z-index: 1; }
小提示: 1、这里需要强调的是 feedback-label 样式,在其垂直变换时,我们先逆时针进行了旋转,其 x ,y 轴的方向也是随着旋转的,所以是translate(50%, -100%),将其垂直居中。
2、在 form 样式里,我们使用 transform 方法,translate(100%, -50%) 将其移出页面显示区域
3、我们继续,大家不要着急,马上就快完成了,我们需要将页面弄的漂亮些,添加一些样式,示例代码如下:
/*CUSTOM VARIABLES HERE*/ .feedback-label, .form input, .form textarea, .form button { border-radius: var(--border-radius); } .feedback-label, .form button { background: var(--gradient); color: var(--white); } .feedback-label:hover, .form button:hover { filter: hue-rotate(-45deg); } .feedback-label { padding: 5px 10px; border-radius: var(--border-radius) var(--border-radius) 0 0; } form div:not(:last-child) { margin-bottom: 20px; } form div:last-child { text-align: right; } .form input, .form textarea { padding: 0 5px; width: 100%; } .form button { padding: 10px 20px; width: 50%; max-width: 120px; } .form input { height: 40px; } .form textarea { height: 220px; }
小提示:这里我们的背景色用到了 linear-gradient() 线性渐变,实现了一个漂亮的颜色渐变背景。还有一个 CSS3 语法需要关注下:hue-rotate,色调旋转滤镜,方便我们改变当前的颜色。
四、使用CSS选择器,实现表单面板的切换和隐藏
我们通过点击 checkbox 对应的 label 标签进行切换和显示留言面板,这里我们用到了 :checked 伪类,以及 ~(后续同胞选择器)和 +(紧邻同胞选择器),辅助元素的选择进行样式变换,示例代码如下:
[type="checkbox"]:checked + .feedback-label { transform: rotate(-90deg) translate(50%, calc((var(--form-width) + 100%) * -1)); } [type="checkbox"]:focus + .feedback-label { outline: 2px solid rgb(77, 144, 254); } [type="checkbox"]:checked ~ .form { transform: translate(0, -50%); } .feedback-label, .form { transition: all 0.35s ease-in-out; }
这里有几个样式规则我们需要聊一下:
- translate(50%, calc((var(--form-width) + 100%) * -1)); 这个样式是不是有些复杂,其实也不难,就是多加了一个表单面板的宽度,由于旋转后,y轴变成了水平轴,向左移动相当Y轴往上移动,因此是负值,需要乘-1。
- 第二个选择器,我们之所以加个选中后的 outline 轮廓属性,主要是为了方便那些习惯键盘操作的用户,当其使用 Tab 键选择 feedback label元素时,然后再使用 Space 空格键就能很方便的打开留言面板进行切换。
- 第三个选择器,我们使用 transform: translate(0, -50%); 将 X 轴更改成0,恢复成最开始的位置,这样我们的留言面板内容就能显示出来。
五、处理响应式问题
最后,特别重点提示下我们做页面要考虑页面响应式适配的问题,这里我们需要针对手机设备做一些样式的调整,比如更改表单面板的宽度由原来的 500px 调整到 320px,以及初始字体的大小,调整成16px。
最终添加的响应式代码如下:
/*CUSTOM VARIABLES HERE*/ @media screen and (max-width: 600px) { body { font-size: 16px; } .form { padding: 15px; width: var(--form-mob-width); } form div:not(:last-child) { margin-bottom: 10px; } [type="checkbox"]:checked + .feedback-label { transform: rotate(-90deg) translate(50%, calc((var(--form-mob-width) + 100%) * -1)); } }
六、小节
好了,到这里,我们的案例就全部完成了,你可以欣赏下自己完成的杰作啦,实现起来是不是很简单呢,最后我还是建议大家还是亲自动手实践一遍,这样才能加深对本案例用到的CSS属性的理解。
最终完成的效果,大家可以点击以下网址进行在线体验:
https://www.qianduandaren.com/demo/feedback/
总结
以上就是CSS 实现侧滑显示留言面板的网页组件功能的详细内容,更多关于css侧滑面板的资料请关注其它相关文章!
css,侧滑,面板,网页组件
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]