老師，為什么我一加scale，小尖尖<tooltip-content::affter>就跟著圖標<i>消失掉了？
.nav{
?? ?width:800px;
?? ?height:300px;
?? ?margin:200px auto;
}
.nav li{
?? ?display:inline-block;
?? ?margin:0 1em;
}
.tooltip{
?? ?display:inline-block;
?? ?font-weight:700;
?? ?color:rgba(0,0,0,0.3);
?? ?padding:0.15em 0.25em 0 0;
?? ?position:relative;
?? ?z-index:999;
}
/*qipao */
.tooltip-content{
?? ?position:absolute;
?? ?z-index:9999;
?? ?width:80px;
?? ?height:80px;
?? ?border-radius:50%;
?? ?background:#fff;
?? ?bottom:100%;
?? ?left:50%;
?? ?margin-left:-40px;
?? ?margin-bottom:20px;
?? ?text-align:center;
?? ?padding-top:25px;
?? ?color:#47c9af;
?? ?
}
.tooltip-content ::after{
?? ?display:block;
?? ?content:'';
?? ?width:30px;
?? ?height:20px;
?? ?background:url(../images/tooltip1.svg) no-repeat center center;
?? ?position:absolute;
?? ?top:100%;
?? ?left:50%;
?? ?margin-left:-15px;?? ?
?? ?margin-top:-7px;
}
.tooltip-effect-1 .tooltip-content{
?? ?-webkit-transform:translate3d(0,10px,0) rotate3d(1,1,1,45deg);
?? ?transform:translate3d(0,10px,0) rotate3d(1,1,1,45deg);
?? ?-webkit-transform-origin:center bottom;
??? transform-origin:center bottom;
}
.tooltip-effect-1 .tooltip-content i{
?? ?-webkit-transform:scale3d(0,0,1);
?? ?transform:scale3d(0,0,1);
?? ?
}
2020-05-13
1. .tooltip-content ::after? ==> t 到??:: 間的空格要去掉 ".tooltip-content::after "
2. 可是沒去掉空格前,后面的小尖尖也都還在阿!! ==>那是因為后面圖標會加transform 及其屬性,等一加上后,馬上小尖尖會變不見,不信的話可以試著設置第二個圖標的transform
2016-02-15
.tooltip-effect-1 .tooltip-content i {-webkit-transform: scale3d(0,0,1);transform: scale3d(0,0,1);-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;transition: opacity 0.3s, transform 0.3s;} 你再試試