准备好需要用到的图标文字。

新建html文档。

书写hmtl代码。

书写css代码。  center; vertical-align: middle; transition: background 0.6s ease-out 0s }.social-share .social-share-icon:hover { background: #666; color: #fff }.social-share .icon-tencent { color: #56b6e7; border-color: #56b6e7 }.social-share .icon-tencent:hover { background: #56b6e7 }.social-share .icon-qq { color: #56b6e7; border-color: #56b6e7 }.social-share .icon-qq:hover { background: #56b6e7 }.social-share .icon-qzone { color: #FDBE3D; border-color: #FDBE3D }.social-share .icon-qzone:hover { background: #FDBE3D }.social-share .icon-douban { color: #33b045; border-color: #33b045 }.social-share .icon-douban:hover { background: #33b045 }.social-share .icon-linkedin { color: #0077B5; border-color: #0077B5 }.social-share .icon-linkedin:hover { background: #0077B5 }.social-share .icon-diandian { color: #307DCA; border-color: #307DCA }.social-share .icon-diandian:hover { background: #307DCA }.social-share .icon-wechat { position: relative; color: #7bc549; border-color: #7bc549 }.social-share .icon-wechat:hover { background: #7bc549 }

书写并添加js代码。  

代码整体结构。

查看效果。