CSS 实现侧滑显示留言面板的网页组件功能

admin CSS 2022-02-06 00:22:54 css 侧滑面板网页组件"

大家好，不知道你们是否和我一样存在这样的困惑呢，虽然css入门容易，但是其内容太多，好多属性看了似是而非，觉得自己看懂了，到自己用的时候又很犯难了，看到漂亮的效果还是无从下手，这主要还是自己对新属性实践太少了，不能进行灵活应用，CSS总让一些人找不到感觉。其实学好CSS真的没有太多捷径，和JS编程一样，要重视对待，要多看和多练，因为现在的CSS不再是以前的CSS啦。

比如这两本书《 CSS 权威指南第四版》，1000多页，买了好几个月我到现在还没看完，文字实在太枯燥了，看完了忘，忘了继续看，实在看不下去，不知道大家有没有同样的感受呢？

好了，废话不多说，今天我们要做的一个案例就是做一个常见的例子：在不少网站右侧都有一个固定浮动的留言图标，我们点击这个图标，就会侧滑显示留言内容面板。你也许会说这个不简单吗，使用JQ就能轻松实现，但是我想说的，为了网站的性能，能用CSS实现的尽量不要用JS，因为现在CSS已足够强大。

今天这个例子，我们将使用纯CSS实现这个效果，这里我们将用到” CSS checkbox hack“的技术，效果如下图所示：

一、创建 HTML 结构

基于上面的效果图，我们要创建三个元素，一个 checkbox 元素以及对应的 label 标记，和一个表单面板元素。

这里用到了一个 CSS 特性值得大家关注下：标签的 for 属性用于指定与哪个表单元素进行关联，扩大表单元素的点击区域，我们点击 label 元素标记，其对应的表单元素将会被聚焦选中。

这个特性是我们实现这个案例的技巧之一，再结合 CSS checkbox 的伪类选择器进行留言面板的显示与隐藏，这样我们就可以摆脱 JS 来实现这个案例。

基于以上思路，我们开始动手吧，首先我们先放置 checkbox，和其对应的 label，最后添加表单面板和相关的表单元素。

我们将通过表单的 id 属性与表单中label元素的 for 值与其关联，最终我们完成了 HTML 结构如下段代码所示：


FEEDBACK

  
    Full Name
    
  
  
    Email
    
  
  
    Comment

完成后的效果图如下：

二、定义基础的样式

现在我们开始添加一些基础的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侧滑面板的资料请关注潘少俊衡其它相关文章！