分享 9 个与反馈提示组件相关的 CSS 代码片段
2022-02-27 08:01:01 来源：程序员客栈
大家好，今天给大家分享 9 个常用的反馈提示组件相关的 CSS 代码片段，本文尽量用最简单的CSS布局编写，也许你有其他的写法，期待你在评论区的分享。
1、Modal（弹出框/层）模态弹出框/层是一个很常用的场景，比如提醒用户确认，在弹出层里输入信息等，如下图示意所示：
.modal{/*边框*/border:1pxsolidrgba(0,0,0.3);border-radius:4px;}.modal__header{display:flex;justify-content:space-between;/*头部边框*/border-bottom:1pxsolidrgba(0,0,0.3);}.modal__footer{display:flex;/*底部内容：比如按钮*/justify-content:flex-end;/*Border*/border-top:1pxsolidrgba(0,0,0.3);}2、Notification（通知警告）
操作成功或失败，弹出一个提示信息告知用户操作的结果，如下图所示，可以点击右上角关闭提示：
.notification{display:flex;justify-content:space-between;}3、Popover arrow（带箭头的提示层）
有时候我们需要做一些文本的提示效果，鼠标经过链接或本文时，会有个带箭头指示的弹出层，用来介绍对应的内容，比如下图，我们做了一个各个方向的箭头指示效果，你根据需要，选择适合的方向即可：
.container{/*Border*/border:1pxsolidrgba(0,0,0,0.3);/*Usedtopositionthearrow*/position:relative;}.container__arrow{/*Size*/height:16px;width:16px;background-color:#fff;position:absolute;}.container__arrow--tl{/*Positionatthetopleftcorner*/left:32px;top:0px;/*Border*/border-left:1pxsolidrgba(0,0,0,0.3);border-top:1pxsolidrgba(0,0,0,0.3);transform:translate(50%,-50%)rotate(45deg);}.container__arrow--tc{/*Positionatthetopcenter*/left:50%;top:0px;/*Border*/border-left:1pxsolidrgba(0,0,0,0.3);border-top:1pxsolidrgba(0,0,0,0.3);transform:translate(-50%,-50%)rotate(45deg);}.container__arrow--tr{/*Positionatthetoprightcorner*/right:32px;top:0px;/*Border*/border-left:1pxsolidrgba(0,0,0,0.3);border-top:1pxsolidrgba(0,0,0,0.3);transform:translate(-50%,-50%)rotate(45deg);}.container__arrow--rt{/*Positionattherighttopcorner*/right:0;top:32px;/*Border*/border-right:1pxsolidrgba(0,0,0,0.3);border-top:1pxsolidrgba(0,0,0,0.3);transform:translate(50%,50%)rotate(45deg);}.container__arrow--rc{/*Positionattherightcenter*/right:0;top:50%;/*Border*/border-right:1pxsolidrgba(0,0,0,0.3);border-top:1pxsolidrgba(0,0,0,0.3);transform:translate(50%,-50%)rotate(45deg);}.container__arrow--rb{/*Positionattherightbottomcorner*/bottom:32px;right:0;/*Border*/border-right:1pxsolidrgba(0,0,0,0.3);border-top:1pxsolidrgba(0,0,0,0.3);transform:translate(50%,-50%)rotate(45deg);}.container__arrow--bl{/*Positionatthebottomleftcorner*/bottom:-16px;left:32px;/*Border*/border-bottom:1pxsolidrgba(0,0,0,0.3);border-right:1pxsolidrgba(0,0,0,0.3);transform:translate(50%,-50%)rotate(45deg);}.container__arrow--bc{/*Positionatthebottomcenter*/bottom:-16px;left:50%;/*Border*/border-bottom:1pxsolidrgba(0,0,0,0.3);border-right:1pxsolidrgba(0,0,0,0.3);transform:translate(-50%,-50%)rotate(45deg);}.container__arrow--br{/*Positionatthebottomrightcorner*/bottom:-16px;right:32px;/*Border*/border-bottom:1pxsolidrgba(0,0,0,0.3);border-right:1pxsolidrgba(0,0,0,0.3);transform:translate(-50%,-50%)rotate(45deg);}.container__arrow--lt{/*Positionatthelefttopcorner*/left:0;top:32px;/*Border*/border-bottom:1pxsolidrgba(0,0,0,0.3);border-left:1pxsolidrgba(0,0,0,0.3);transform:translate(-50%,50%)rotate(45deg);}.container__arrow--lc{/*Positionattheleftcenter*/left:0;top:50%;/*Border*/border-bottom:1pxsolidrgba(0,0,0,0.3);border-left:1pxsolidrgba(0,0,0,0.3);transform:translate(-50%,-50%)rotate(45deg);}.container__arrow--lb{/*Positionattheleftbottomcorner*/bottom:32px;left:0;/*Border*/border-bottom:1pxsolidrgba(0,0,0,0.3);border-left:1pxsolidrgba(0,0,0,0.3);transform:translate(-50%,-50%)rotate(45deg);}4、Progress bar（水平进度条）
进度条不用多说吧，这个需求很常见，如下图所示：
.container{/*Colors*/background-color:rgba(0,0,0,0.1);/*Roundedborder*/border-radius:9999px;}.container__progress{/*Centerthecontent*/align-items:center;display:flex;justify-content:center;/*Colors*/background-color:#357edd;color:#fff;/*Roundedborder*/border-radius:9999px;}5、圆形进度条
圆形进度条也是常见的需求，尤其在大数据看板的需求场景（实现逻辑就是靠两个半圆旋转），如下图所示：
.container{position:relative;}.container__percentages{align-items:center;display:flex;justify-content:center;border:12pxsolidrgba(0,0,0,0.3);border-radius:9999px;height:128px;width:128px;}.container__curve{/*相对父容器*/left:0;position:absolute;top:0;/*占满父容器*/height:100%;width:100%;/*如果进度小与50%,裁剪显示右半边*/clip:rect(0px,128px,128px,64px);/*如果进度大于50%，显示全部*/clip:rect(auto,auto,auto,auto);}.container__half{/*占满父容器*/height:100%;position:absolute;width:100%;/*Backgroundcolorofcurve.注意：需要和父容器的边框粗细保持一致*/border:12pxsolidrgb(0,68,158);border-radius:9999px;}.container__half--first{/*Position*/clip:rect(0px,64px,128px,0px);transform:rotate(162deg);/*旋转的度数=百分比*360/100*/}.container__half--second{/*Position*/clip:rect(0px,64px,128px,0px);/*如果小与50%*/transform:rotate(0deg);/*如果大于50%*/transform:rotate(180deg);}6、Resizable element（拖拽边框的样式）
拖拽效果也是一个常见的需求，比如你要拖拽一个元素，其周围会有8个小方块，鼠标放上去会提示用户可以拖动，如下图所示：
.container{/*Border*/border:1pxdashedrgba(0,0,0,0.3);/*Usedtopositionthesquares*/position:relative;}.container__resizer{/*Border*/border:1pxsolidrgba(0,0,0,0.3);position:absolute;/*Size*/height:12px;width:12px;}.container__resizer--tl{/*Resizecursor*/cursor:nwse-resize;/*Positionedatthetopleftcorner*/left:0px;top:0px;transform:translate(-50%,-50%);}.container__resizer--tc{/*Resizecursor*/cursor:ns-resize;/*Positionedatthemiddleoftopside*/left:50%;top:0px;transform:translate(-50%,-50%);}.container__resizer--tr{/*Resizecursor*/cursor:nesw-resize;/*Positionedatthetoprightcorner*/right:0px;top:0px;transform:translate(50%,-50%);}.container__resizer--rc{/*Resizecursor*/cursor:ew-resize;/*Positionedatthemiddleofrightside*/right:0px;top:50%;transform:translate(50%,-50%);}.container__resizer--rb{/*Resizecursor*/cursor:nwse-resize;/*Positionedattherightbottomcorner*/bottom:0px;right:0px;transform:translate(50%,50%);}.container__resizer--bc{/*Resizecursor*/cursor:ns-resize;/*Positionedatthemiddleofbottomside*/bottom:0px;right:50%;transform:translate(50%,50%);}.container__resizer--bl{/*Resizecursor*/cursor:nesw-resize;/*Positionedatthebottomleftcorner*/bottom:0px;left:0px;transform:translate(-50%,50%);}.container__resizer--lc{/*Resizecursor*/cursor:ew-resize;/*Positionedatthemiddleofleftside*/left:0px;top:50%;transform:translate(-50%,-50%);}7、Presence indicator（状态指示）
有时候，我们需要在头像的右下角显示个小圆圈，用不同的颜色代表用户的状态，如下图所示：
.container{position:relative;}.container__indicator{/*显示在右下角*/bottom:0,position:absolute;right:0;transform:translate(50%,50%);/*圆圈*/border-radius:9999px;height:16px;width:16px;/*背景*/background-color:#FF4136;}8、Tooltip（浮动提示框）
tooltip (提示框) 是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失，如下图所示：
HTML部分
.container{/*Usedtopositionthearrow*/position:relative;}/*鼠标移动显示弹出层*/.container:hover.container__arrow,.container:hover.container__content{opacity:1;pointer-events:initial;}.container__arrow{/*Invisiblebydefault*/opacity:0;/*Topreventaccidentalinteractionswithotherelements*/pointer-events:none;/*Border*/border:8pxsolidtransparent;/*显示向下的箭头*/border-top-color:#00439e;/*Position*/bottom:100%;left:50%;position:absolute;transform:translate(-50%,8px);/*Zerosize*/height:0;width:0;/*Displayedontopofotherelement*/z-index:10;}.container__content{/*Invisiblebydefault*/opacity:0;/*Topreventaccidentalinteractionswithotherelements*/pointer-events:none;/*Backgroundcolor,mustbethesameasthebordercolorofarrow*/background-color:#00439e;border-radius:2px;/*Position*/bottom:100%;left:50%;position:absolute;transform:translate(-50%,-8px);/*Displayedontopofotherelement*/z-index:10;}9、Validation icon（验证提示图标）
输入表单也是我们经常做的需求，输入正确需要给用户一个正确的提示，输入错误有个叉号的提示，如下图所示：
.container{/*输入框对应的父容器*/position:relative;}.container__input{border:1pxsolidrgba(0,0,0,0.3);border-radius:4px;/*占满父容器*/width:100%;/*防止输入框输入的内容覆盖图标位置*/padding-right:24px;}.container__icon{/*图标显示在输入框的最右边*/position:absolute;right:8px;top:50%;transform:translate(0,-50%);z-index:10;}总结
今天的文章就分享到这里，希望对你日常的业务有所帮助，感谢你的阅读。
相关阅读内容来源：https://github.com/1milligram/csslayout
分享 10 个常见的 CSS 页面布局代码片段
