css实现可拖动带阴影的箭头泡泡提示框效果代码
代码语言:html
所属分类:弹出层
代码描述:css实现可拖动带阴影的箭头泡泡提示框效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Concert+One" rel="stylesheet"> <style> @keyframes a1 { 0% { opacity: 0; transform: translate(-50%, -50%) scaleY(0); } 100% { opacity: 1; transform: translate(-50%, -50%) scaleY(1); } } html, body { background: #4fd6e0; background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12); } .point, .point-br { contentEditable: -webkit-user-modify; animation: a1 0.25s; font-size: 22px; font-weight: bold; padding: 8px 15px; position: absolute; top: 20%; left: 50%; background: #fff; border-radius: 8px; box-shadow: 0 2px 20px 0px rgba(0, 0, 0, 0.5); } .point:after, .point-br:after { content: ""; position: absolute; bottom: 14px; right: -14px; transform: translateY(100%) rotate(-45deg); width: 0; height: 0; border-style: solid; border-width: 0 20px 35px 0; border-color: transparent #fff transparent transparent; } .point:before, .point-br:before { content: ""; position: absolute; bottom: 8px; right: -7px; background: blue; transform: translateY(100%) rotate(-45deg); width: 2px; height: 15px; box-shadow: 0 4px 20px 3px rgba(0, 0, 0, 0.5); } .point-tr.point-dark { color: #fff; background: #000; } .point-tr.point-dark:after { border-color: transparent transparent #000 transparent; } .point-bl { top: 40%; } .point-bl:after { left: -14px; transform: translateY(100%) rotate(45deg); border-width: 35px 20px 0 0; border-color: #fff transparent transparent transparent; } .point-bl:before { left: -7px; background: blue; transform: translateY(100%) rotate(45deg); box-shadow: 0 4px 20px 3px rgba(0, 0, 0, 0.5); } .point-tl { top: 60%; } .point-tl:after { top: 14px; left: -14px; transform: translateY(-100%) rotate(-45deg); border-width: 35px 0 0 20px; border-color: transparent transparent transparent #fff; } .point-tl:before { top: 12px; left: -8px; background: blue; transform: translateY(-100%) rotate(-45deg); box-shadow: -3px -4px 20px 2px rgba(0, 0, 0,.........完整代码请登录后点击上方下载按钮下载查看
网友评论0