演示Demo

?

5種效果的主要css如下：

/* transform:向元素應用2D或3D轉換; transform-origin屬性只有在定義了transform以后才生效 */ .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:50% 100%;transform-origin:50% 100%; /* 等價于transform-origin:center bottom; */ }.tooltip-effect-1 .tooltip-content i{-webkit-transform:scale3d(0,0,1);transform:scale3d(0,0,1); }.tooltip-effect-2 .tooltip-content{-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0); }.tooltip-effect-2 .tooltip-content i{-webkit-transform:translate3d(0,15px,0);transform:translate3d(0,15px,0); }.tooltip-effect-3 .tooltip-content{-webkit-transform:translate3d(0,10px,0) rotate3d(0,1,0,90deg);transform:translate3d(0,10px,0) rotate3d(0,1,0,90deg);-webkit-transform-origin:50% 100%;transform-origin:50% 100%; }.tooltip-effect-3 .tooltip-content i{-webkit-transform:scale3d(0,0,1);transform:scale3d(0,0,1); }.tooltip-effect-4 .tooltip-content{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0); }.tooltip-effect-4 .tooltip-content i{-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0); }.tooltip-effect-5 .tooltip-content{-webkit-transform:scale3d(0,0,1);transform:scale3d(0,0,1);-webkit-transform-origin:50% 100%;transform-origin:50% 100%; }.tooltip-effect-5 .tooltip-content i{-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0); } View Code

?

效果里面的小圖標引用到了一個第三方庫：fontawesome

源代碼下載

轉載于:https://www.cnblogs.com/Lanjerry/p/4388083.html

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的CSS3实现漂亮ToolTips的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。