點選彈出不佔位置的框體提示
阿新 • • 發佈：2019-02-05
效果圖
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小例子</title> <style type="text/css"> .profile-card-wrap .content:before, .profile-card-wrap .link-info .photo:after{ content:; position:absolute; } .profile-card-wrap{ top:50%; left:50%; width:300px; height:125px; -webkit-perspective:800px; perspective:800px; position:absolute; margin-left:-250px; margin-top:-137.5px; } .profile-card-wrap .content{ width:205px; padding:20px; height:inherit; position:relative; font-family: "Microsoft YaHei"; -webkit-backface-visibility:hidden; backface-visibility:hidden; background:rgba(255,255,255,.8); border:1px solid rgba(0,0,0,.35); -webkit-transform:rotateY(180deg); transform:rotateY(180deg); -webkit-transition:-webkit-transform .4s ease-in-out 0s; transition:transform .4s ease-in-out 0s; } .profile-card-wrap .content:before{ top:50%; right:40px; height:30px; font-size:18px; border:inherit; padding:2px 8px; margin-top:-10px; line-height:24px; background:inherit; content:attr(data-text); -webkit-backface-visibility:visible; backface-visibility:visible; -webkit-transform:rotateY(-180deg) scale(1); transform:rotateY(-180deg) scale(1); -webkit-transition:-webkit-transform .4s ease-in-out 0s; transition:transform .4s ease-in-out 0s; text-shadow:1px 1px 0 rgba(255,255,255,.45); } .profile-card-wrap .content .title{ font-size:24px; font-weight:500; margin-bottom:25px; } .profile-card-wrap .content p{ margin:0; max-width:190px; line-height:24px; text-align:center; } .profile-card-wrap .link-info{ top:50%; right:35px; width:180px; height:180px; margin-top:-90px; position:absolute; } .profile-card-wrap .link-info .social{ top:50%; right:50%; z-index:1; width:35px; height:35px; position:absolute; margin-top:-17.5px; margin-right:-17.5px; } .profile-card-wrap .link-info .social .link{ color:#fff; width:35px; height:35px; -webkit-transform:none; -ms-transform:none; transform:none; line-height:33px; text-align:center; position:absolute; border-radius:50%; border:1px solid #444; box-shadow:0 3px 4px rgba(47,66,81,.75); -webkit-transition:all .3s cubic-bezier(0.680, 1.550, 0.265, 1); transition:all .3s cubic-bezier(0.680, 1.550, 0.265, 1); } .profile-card-wrap .link-info .social .de1{ background:#3b5a9a; border-color:#384f76; } .profile-card-wrap .link-info .social .de2{ background:#29a9e1; border-color:#2a7a9b; } .profile-card-wrap .link-info .social .de3{ background:#df4b38; border-color:#474848; } .profile-card-wrap .link-info .social .de4{ background:#cd2129; border-color:#942825; } .profile-card-wrap .link-info .social .de5{ background:#117bb8; border-color:#1c5d7d; } .profile-card-wrap .link-info .social .de6{ background:#cb312e; border-color:#933532; } .profile-card-wrap .link-info .social .de7{ background:#df4b38; border-color:#974336; } .profile-card-wrap .link-info .social .de8{ background:#29a9e1; border-color:#974336; } .profile-card-wrap .link-info .social .de9{ background:#3b5a9a; border-color:#974336; } .profile-card-wrap .link-info .photo{ z-index:2; width:inherit; height:inherit; overflow:hidden; position:relative; border-radius:50%; border:5px solid #fff; -webkit-transform:scale(.6); -ms-transform:scale(.6); transform:scale(.6); background:url(/static/index/im/mm.jpg) #fff no-repeat center / cover; box-shadow:0 0 2px, 0 5px 5px rgba(47,66,81,.75); -webkit-transition:-webkit-transform .5s ease-in-out 0s; transition:transform .5s ease-in-out 0s; } .profile-card-wrap .link-info .photo:after{ width:170px; height:170px; border-radius:inherit; background:rgba(54,106,157,.2); } .profile-card-wrap .toggle{ top:50%; z-index:5; left:-20px; width:40px; height:40px; color:#f2f2f2; cursor:pointer; font-size:28px; line-height:40px; text-align:center; margin-top:-15px; border-radius:50%; position:absolute; background:#fff; -webkit-user-select:none; box-shadow:0 4px 4px #333; -webkit-transition:color, background, -webkit-transform .1s ease-in-out 0s; transition:color, background, transform .1s ease-in-out 0s; } .profile-card-wrap .toggle{ color:#fff; background:#117BB8; -webkit-transform:rotate(135deg); -ms-transform:rotate(135deg); transform:rotate(135deg); box-shadow:2px -2px 4px #333; } .profile-card-wrap .content{ -webkit-transform:rotateX(0); transform:rotateX(0); } .profile-card-wrap .content:before{ -webkit-backface-visibility:hidden; backface-visibility:hidden; -webkit-transform:rotateX(-180deg) scale(0); transform:rotateX(-180deg) scale(0); } .profile-card-wrap .content + .link-info .link{ -webkit-transform:none; -ms-transform:none; transform:none; } .profile-card-wrap .content + .link-info .link:nth-child(1){ -webkit-transform:translate(80px,-80px); -ms-transform:translate(80px,-80px); transform:translate(80px,-80px) } .profile-card-wrap .content + .link-info .link:nth-child(2){ -webkit-transform:translate(120px,-70px); -ms-transform:translate(120px,-70px); transform:translate(120px,-70px) } .profile-card-wrap .content + .link-info .link:nth-child(3){ -webkit-transform:translate(155px,-50px); -ms-transform:translate(155px,-50px); transform:translate(155px,-50px) } .profile-card-wrap .content + .link-info .link:nth-child(4){ -webkit-transform:translate(180px,-15px); -ms-transform:translate(180px,-15px); transform:translate(180px,-15px) } .profile-card-wrap .content + .link-info .link:nth-child(5){ -webkit-transform:translate(200px,20px); -ms-transform:translate(200px,20px); transform:translate(200px,20px) } .profile-card-wrap .content + .link-info .link:nth-child(6){ -webkit-transform:translate(180px,55px); -ms-transform:translate(180px,55px); transform:translate(180px,55px) } .profile-card-wrap .content + .link-info .link:nth-child(7){ -webkit-transform:translate(155px,90px); -ms-transform:translate(155px,90px); transform:translate(155px,90px) } .profile-card-wrap .content + .link-info .link:nth-child(8){ -webkit-transform:translate(120px,110px); -ms-transform:translate(120px,110px); transform:translate(120px,110px) } .profile-card-wrap .content + .link-info .link:nth-child(9){ -webkit-transform:translate(80px,120px); -ms-transform:translate(80px,120px); transform:translate(80px,120px) } .profile-card-wrap .content + .link-info .photo{ -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1); -webkit-animation:bounceIn .4s; animation:bounceIn .4s; } .fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} </style> </head> <body> <div class="profile-card-wrap" id="markername+DIV"> <label for="check" class="toggle" onclick="$(\#markername+DIV\).hide()"> + </label> <div class="content" id="markername+Content"> </div> <div class="link-info" id="idmarkername+"> <div class="social"> <a class="link de1" href="#" onclick="return detail(1)"> <i class="fa layui-icon" style="font-size: 24px;margin-top:5px" title="1">1</i> </a> <a class="link de2" href="#" onclick="return detail(2)"> <i class="fa layui-icon" style="font-size: 24px;margin-top:5px" title="2">2</i> </a> <a class="link de3" href="#" onclick="return detail(3)"> <i class="fa layui-icon" style="font-size: 24px;margin-top:5px" title="3">3</i> </a> <a class="link de4" href="#" onclick="return detail(4)"> <i class="fa layui-icon" style="font-size: 24px;margin-top:5px" title="4">4</i> </a> <a class="link de5" href="#" onclick="return detail(5)"> <i class="fa layui-icon" style="font-size: 24px;margin-top:5px" title="5">5</i> </a> <a class="link de6" href="#" onclick="return detail(6)"> <i class="fa layui-icon" style="font-size: 24px;margin-top:5px" title="6">6</i> </a> <a class="link de7" href="#" onclick="return detail(7)"> <i class="fa layui-icon" style="font-size: 24px;margin-top:5px" title="7">7</i> </a> <a class="link de8" href="#" onclick="return detail(8)"> <i class="fa layui-icon" style="font-size: 24px;margin-top:5px" title="8">8</i> </a> <a class="link de9" href="#" onclick="return detail(9)"> <i class="fa layui-icon" style="font-size: 24px;margin-top:5px" title="9測試">9</i> </a> </div> </div> </div> </body> </html>