HTML+CSS制作漂浮的对话框
效果图如下：
HTML部分源代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>对话框</title> <link rel="stylesheet" href="style.css"> </head> <body> <p>hello <br> world</p> </body> </html>
CSS部分源代码如下：
:root { --background-color: #f9cdad; --border-color: #7591AD; --text-color: #34495e; --color1: #ECE5CE; --color2: #83af9b; } * { margin: 0; padding: 0; } html { font-size: 14px; } body { width: 100vw; height: 100vh; background-color: var(--background-color); display: flex; justify-content: center; align-items: center; font-family: 'Montserrat', sans-serif, Arial, 'Microsoft Yahei'; } p { position: relative; padding: 50px; background-color: var(--color1); border-radius: 11px; /* 投影 */ box-shadow: 20px 20px var(--color2); /* 动画效果 50%的时候向上移动20px */ animation: animate1 4s ease-in-out infinite; } /* 实现底部横线与圆点 */ p::after, p::before { position: absolute; content: ''; height: 11px; left: 0px; background-color: var(--color1); border-radius: 11px; /* 投影 */ box-shadow: 20px 20px var(--color2); } /* 单独定义底部横线的样式，宽度为50px */ p::after { width: 50px; bottom: -25px; /* 动画效果 50%的时候向上移动10px 加上P元素向上移动20，真实移动像素为20+10px */ animation: animate2 4s ease-in-out infinite; } /* 单独定义底部圆点的样式，宽度为11px */ p::before { width: 11px; bottom: -50px; /* 动画效果 50%的时候向上移动15px 加上P元素向上移动20，真实移动像素为20+15px */ animation: animate3 4s ease-in-out infinite; } @keyframes animate1 { /* 初始化和结束状态为默认 */ 50% { transform: translateY(-20px); } } @keyframes animate2 { /* 初始化和结束状态为默认 */ 50% { transform: translateY(-10px); } } @keyframes animate3 { /* 初始化和结束状态为默认 */ 50% { transform: translateY(-15px); } }
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)