css实现一个悬浮展开的分享按钮
代码语言:html
所属分类:布局界面
代码描述:css实现一个悬浮展开的分享按钮
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/all.min.css"> <style> body { background: white; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; min-height: 100vh; margin: 0; } ul { padding: 0; margin: 0; list-style-type: none; } .share-icons { position: relative; display: -webkit-box; display: flex; box-shadow: inset 0 -6px 10px -8px rgba(0, 0, 0, 0.3), inset 0 6px 10px -8px rgba(0, 0, 0, 0.3); cursor: pointer; } .share-icons__block { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition: -webkit-transform 0.3s, -webkit-filter 0.2s; transition: -webkit-transform 0.3s, -webkit-filter 0.2s; transition: transform 0.3s, filter 0.2s; transition: transform 0.3s, filter 0.2s, -webkit-transform 0.3s, -webkit-filter 0.2s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .share-icons__block-left, .share-icons__block-right { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; width: 100%; height: 100%; backg.........完整代码请登录后点击上方下载按钮下载查看
网友评论0