anime实现悬浮分享按钮点击弹出更多分享效果代码
代码语言:html
所属分类:菜单导航
代码描述:anime实现悬浮分享按钮点击弹出更多分享效果代码
下面为部分代码预览,完整代码请点击下载或在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.5.11.2.css"> <style> @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400"); html { min-height:100%; display:grid } body { display:grid; background:#D0D8DB } .box { margin:auto; width:100px; height:50px } .share { position:absolute; width:120px; height:50px; border-radius:30px; outline:0; border:0; background:#2A4870; overflow:hidden; transition:all .5s ease; box-shadow:3px 5px 10px rgba(42,72,112,0.5) } .scale { transform:scale(1.1); transition:all .5s ease } .line,.line2,.line3 { width:13px; height:60px; position:absolute; transform:rotate(15deg) } .line { right:22px; top:-5px; background:#9ECE92 } .line2 { right:10px; background:#33A8CC } .line3 { right:-3px; background:#1E73B5 } .icon { user-select:none; position:absolute; color:#D0D8DB; left:15px; top:6px } .icon h1 { font-family:"Open Sans",sans-serif; text-transform:uppercase; letter-spacing:5px; font-size:.9em } .icon .btn { position:absolute; right:-27px; background:rgba(208,216,219,0.9); color:#2A4870; top:7px; padding:3px 7px; border-radius:50% } .active { z-index:-2; margin-top:-10px; margin-left:-60px; position:absolute; opacity:0; transition:all .7s ease } .active li { list-style-type:none; width:40px; height:40px; color:#D0D8DB; border-radius:50%; background:#2A4870; position:absolute; box-shadow:2px 2px 6px rgba(42,72,112,0.5) } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0