标签：order pac flex margin splay osi ado text rgb
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>提示弹框</title> <style type="text/css"> *,*::before,*::after{box-sizing:border-box;} .body{ display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 100vh; border:0px solid red;} .tooltip { position: relative; background:#999999; padding: 5px 12px; margin: 5px; font-size: 15px; color: #FFF; } .tooltip:before, .tooltip:after { position: absolute; content: ‘‘; opacity: 0; transition: all 0.4s ease; } .tooltip:before { top: -22px; transform: translateY(20px); z-index:2; content: ""; width: 12px; height: 12px; display: block; background-color: whitesmoke; border-right:1px solid #bdbdbd; border-bottom:1px solid #bdbdbd; } .tooltip:after { content: attr(data-tooltip); background:whitesmoke; color:#333333; width: 160px; height: 40px; font-size: 13px; font-weight: 300; top: -54px; left: -90px; padding: 10px; border-radius: 5px; letter-spacing: 1px; transform: translateY(20px); box-shadow: 1px -1px 5px rgba(0,0,0,0.2); border:1px solid #bdbdbd; z-index:-1;} .tooltip:hover::before, .tooltip:hover::after { opacity: 1; transform: translateY(-2px); } .tooltip:hover::before{transform:rotate(45deg); } </style> </head> <body class="body"> <span class="tooltip" data-tooltip="不能发送空白信息">发送</span> </body> </html>
标签：order pac flex margin splay osi ado text rgb
原文地址：https://www.cnblogs.com/jiunie/p/11792040.html
