Css3 tooltip设计实践

来源：互联网发布：qr是什么软件编辑：程序博客网时间：2024/05/21 07:08
@charset "utf-8";@import "reset.css";@import url('http://fonts.googleapis.com/css?family=Lato:100');/* tooltip.css ---------------------------------------------------------------- *//* ///////////////////////////////////////// =基本样式///////////////////////////////////////// */body{padding:150px;background:#2b2b2b url(../images/bg-title.jpg);}h1{margin-bottom:40px;font-family:'Lato','Sans-Serief';color:#fff;}/* ///////////////////////////////////////// =.gallery-nav///////////////////////////////////////// */.gallery-nav li{float:left;margin-right:100px;}/* ///////////////////////////////////////// =.tooltip///////////////////////////////////////// */a.tooltip{position:relative;display:block;width:100px;height:100px;border:5px solid #4b4b4b;border-radius:55px;-webkit-border-radius:55px;-khtml-border-radius:55px;-moz-border-radius:55px;background:#fff no-repeat center;background-size:cover;}a.tooltip .tooltip-box{position:absolute;opacity:0;width:150px;height:150pxpadding:8em;background:#111;bottom:100px;left:50%;margin-left:-10.4em;border-radius:15px 0px;-moz-border-radius:15px 15px;transition:all .4s ease-in .3s;}a.tooltip .tooltip-box:before{content:'';position:absolute;bottom:-10px;left:120px;border-top:10px solid #111;border-left:10px solid transparent;border-right:10px solid transparent;}a.tooltip .tooltip-title{color:#fff;}a.tooltip .tooltip-desc{margin-bottom:0;font-size:11px;text-align:justify;color:#bcbcbc;}a.tooltip:hover .tooltip-box,a.tooltip:focus .tooltip-box{opacity:1;bottom:90px;}a.tooltip:hover,a.tooltip:focus{border-color:#fff;}a.tooltip.photo1{background-image:url(../images/111.jpg);}a.tooltip.photo2{background-image:url(../images/1021-1.jpg);}a.tooltip.photo3{background-image:url(../images/480320.jpg);}/* ///////////////////////////////////////// =Global Classes///////////////////////////////////////// */
0 0