带有弹出窗口的社交媒体图标（仅限 HTML + 纯 CSS）

带有弹出窗口的社交媒体图标（仅限 HTML + 纯 CSS）免费下载

HTML：

 <ul class="wrapper">  
 <li class="icon facebook">  
 <span class="tooltip">Facebook</span>  
 <span><i class="fab fa-facebook-f"></i></span>  
 </li>  
 <li class="icon twitter">  
 <span class="tooltip">推特</span>  
 <span><i class="fab fa-twitter"></i></span>  
 </li>  
 <li class="icon instagram">  
 <span class="tooltip">Instagram</span>  
 <span><i class="fab fa-instagram"></i></span>  
 </li>  
 <li class="icon github">  
 <span class="tooltip">Github</span>  
 <span><i class="fab fa-github"></i></span>  
 </li>  
 <li class="icon youtube">  
 <span class="tooltip">YouTube</span>  
 <span><i class="fab fa-youtube"></i></span>  
 </li>  
 </ul>

您可能还想下载： HTML 和 CSS 中列表项之间的边框

CSS：

 /*  
 作者：阿卜杜勒曼赛义德  
 */ @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); * {  
 边距：0；  
 填充：0；  
 box-sizing：边框框；  
 } *：重点，  
 *：积极的 {  
 大纲：无！重要；  
 -webkit-tap-highlight-color：透明；  
 } html,  
 身体 {  
 显示：网格；  
 高度：100%；  
 宽度：100%；  
 字体系列：“Poppins”，无衬线；  
 放置项目：中心；  
 背景：线性渐变（315度，#ffffff，#d7e1ec）；  
 } .wrapper {  
 显示：inline-flex；  
 列表样式：无；  
 } .wrapper .icon {  
 位置：相对；  
 背景：#ffffff；  
 边界半径：50%；  
 填充：15px；  
 边距：10px；  
 宽度：50px；  
 高度：50px；  
 字体大小：18px；  
 显示：弯曲；  
 证明内容：中心；  
 对齐项目：居中；  
 弹性方向：列；  
 盒子阴影：0 10px 10px rgba(0, 0, 0, 0.1);  
 光标：指针；  
 过渡：所有 0.2s 三次贝塞尔曲线（0.68，-0.55，0.265，1.55）；  
 } .wrapper .tooltip {  
 位置：绝对；  
 顶部：0；  
 字体大小：14px；  
 背景：#ffffff；  
 颜色：#ffffff；  
 填充：5px 8px；  
 边框半径：5px；  
 盒子阴影：0 10px 10px rgba(0, 0, 0, 0.1);  
 不透明度：0；  
 指针事件：无；  
 过渡：所有 0.3s 三次贝塞尔曲线（0.68，-0.55，0.265，1.55）；  
 } .wrapper .tooltip::before {  
 位置：绝对；  
 内容： ””;  
 高度：8px；  
 宽度：8px；  
 背景：#ffffff；  
 底部：-3px；  
 左：50%；  
 变换：平移（-50%）旋转（45度）；  
 过渡：所有 0.3s 三次贝塞尔曲线（0.68，-0.55，0.265，1.55）；  
 } .wrapper .icon:悬停 .tooltip {  
 顶部：-45px；  
 不透明度：1；  
 能见度：可见；  
 指针事件：自动；  
 } .wrapper .icon：悬停跨度，  
 .wrapper .icon:悬停 .tooltip {  
 文字阴影：0px -1px 0px rgba(0, 0, 0, 0.1);  
 } .wrapper .facebook：悬停，  
 .wrapper .facebook:悬停 .tooltip,  
 .wrapper .facebook:hover .tooltip::before {  
 背景：#1877F2；  
 颜色：#ffffff；  
 } .wrapper .twitter：悬停，  
 .wrapper .twitter：悬停 .tooltip，  
 .wrapper .twitter:hover .tooltip::before {  
 背景：#1DA1F2；  
 颜色：#ffffff；  
 } .wrapper .instagram：悬停，  
 .wrapper .instagram：悬停 .tooltip，  
 .wrapper .instagram:hover .tooltip::before {  
 背景：#E4405F；  
 颜色：#ffffff；  
 } .wrapper .github：悬停，  
 .wrapper .github：悬停 .tooltip，  
 .wrapper .github:hover .tooltip::before {  
 背景：#333333；  
 颜色：#ffffff；  
 } .wrapper .youtube：悬停，  
 .wrapper .youtube：悬停 .tooltip，  
 .wrapper .youtube:hover .tooltip::before {  
 背景：#CD201F；  
 颜色：#ffffff；  
 }

HTML、CSS 和 JavaScript 代码片段开启， AllWebCodes.com

完毕！享受 带有弹出窗口片段的社交媒体图标

现在下载

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/17448/11200600

标签：tooltip,HTML,wrapper,悬停,before,ffffff,CSS,图标
来源： https://www.cnblogs.com/amboke/p/16660197.html