css悬浮伸缩分享按钮代码
代码语言:html
所属分类:菜单导航
代码描述:css悬浮伸缩分享按钮代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.3.0.css"> <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap" rel="stylesheet" /> <style> *, ::before, ::after { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; height: 100vh; justify-content: center; align-items: center; background-color: #afe1af; } .share-btn { position: relative; display: flex; justify-content: center; align-items: center; width: 2em; height: 2em; border-radius: 100vmax; border: 0; font-size: 2rem; background-color: #fff; color: #008000; cursor: pointer; transition: width 300ms ease-in-out; transition-delay: 50ms; z-index: 1; } .share-btn::before { content: "x"; position: absolute; left: 5px; font-size: 2.25rem; font-weight: 500; font-family: "Nunito", sans-serif; width: 1.5em; height: 1.5em; background-color: transparent; color: #fff; border-radius: inherit; z-index: -1; transition: background-color 300ms ease-in-out; } .social-icons { position: absolute; display: f.........完整代码请登录后点击上方下载按钮下载查看
网友评论0