css布局实现网站右侧悬浮菜单返回顶部app下载微信公众号效果代码
代码语言:html
所属分类:菜单导航
代码描述:css布局实现网站右侧悬浮菜单返回顶部app下载微信公众号效果代码
代码标签: 网站 右侧 悬浮 菜单 返回 顶部 app 下载 微信 公众 号 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; border: none; zoom: 1; } ul li { list-style: none; } .box { width: 52px; height: 162px; border: 1px solid #ccc; margin-left: 30%; margin-top: 10%; position: relative } .box ul li { width: 48px; display: block; height: 50px; padding: 2px; overflow: hidden } .weixin { background: url(//repo.bfw.wiki/bfwrepo/icon/60d2b3a74ff65.png) no-repeat; background-position: 0 77%; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; } .weixin:hover { background-position: 0 88% } .weixin:hover .weixin-logo { width: 170px; height: 204px; } .idea { background: url(//repo.bfw.wiki/bfwrepo/icon/60d2b3a74ff65.png) no-repeat; background-position: 0 43.8%; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; } .idea:hover { background-position: 0 55%; } .app { background: url(//repo.bfw.wiki/bfwrepo/icon/60d2b3a74ff65.png) no-repeat; background-position: 0 21.5%; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; } .app:hover { background-p.........完整代码请登录后点击上方下载按钮下载查看
网友评论0