css实现7种Material Design风格悬浮按钮点击弹出子菜单动画效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现7种Material Design风格悬浮按钮点击弹出子菜单动画效果代码
代码标签: css Material Design 风格 悬浮 按钮 点击 弹出 子菜单 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css"> <style> *, *:after, *:before { box-sizing: border-box; } body { margin: 0; background-color: #262626; } section { background: #eceff1; width: 100%; padding: 50px; min-height: 200px; } .btn-float { width: 50px; height: 50px; line-height: 50px; display: inline-block; border: none; font-size: 18px; color: #fff; text-align: center; position: relative; -webkit-transition: 0.3s; transition: 0.3s; border-radius: 50%; cursor: pointer; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.11); } .btn-float:hover { text-decoration: none; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15), 0 4px 15px rgba(0, 0, 0, 0.13); } .btn-float:active, .btn-float:focus { outline: none; } .btn-float + .btn-float { margin-left: 5px; } .yellow { background: #ffa000; } .blue { background: #40c4ff; } .green { background: #00e676; } .purple { background: #8e24aa; } .pink { background: #e91e63; } .icon-bars { background: #fff; height: 1px; width: 22px; margin: auto; display: block; position: relative; -moz-transition: 0.3s 0.3s; -o-transition: 0.3s 0.3s; -webkit-transition: 0.3s; -webkit-transition-delay: 0.3s; -webkit-transition: 0.3s 0.3s; transition: 0.3s 0.3s; } .icon-bars:after { content: ''; position: absolute; height: 22px; width: 1px; background: #fff; top: -10px; } .float-btn-group { position: relative; float: right; -webkit-transition: 0.3s; transition: 0.3s; } .float-btn-group .btn-triger { z-index: 15; float: left; } .float-btn-group .btn-list { position: absolute; right: 0; -webkit-transition: 0.3s; transition: 0.3s; } .float-btn-group .btn-list li { display: inline-block; } .float-btn-group.open .icon-bars { -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .model-0 .float-btn-group { width: 65px; padding-left: 15px; min-height: 65px; overflow: hidden; } .model-0 .float-btn-group .btn-list { opacity: 0; width: 215px; } .model-0 .float-btn-group.open { width: 285px; } .model-0 .float-btn-group.open .btn-list { opacity: 1; } .model-1 { background: #cfd8dc; } .model-1 .float-btn-group { margin: auto; float: none; width: 50px; } .model-1 .float-btn-group .icon-bars { -webkit-transition: 0.3s; transition: 0.3s; } .model-1 .float-btn-group .btn-list { background: rgba(0, 0, 0, 0.2); width: 50px; height: 50px; overflow: hidden; left: 0; top: 0; opacity: 0; -moz-transition: 0.3s 0.3s; -o-transition: 0.3s 0.3s; -webkit-transition: 0.3s; -webkit-transition-delay: 0.3s; -webkit-transition: 0.3s 0.3s; transition: 0.3s 0.3s; border-radius: 50%; } .model-1 .float-btn-group .btn-list .btn-float { position: absolute; background: none; box-shadow: none; -ms-transform: scale(0, 0); -webkit-transform: scale(0, 0); transform: scale(0, 0); margin: auto; } .model-1 .float-btn-group .btn-list .btn-float:nth-child(1) { left: 0; right: 0; top: 10px; } .model-1 .float-btn-group .btn-list .btn-float:nth-child(2) { left: 10px; top: 0; bottom: 0; } .model-1 .float-btn-group .btn-list .btn-float:nth-child(3) { left: 0; right: 0; bottom: 10px; } .model-1 .float-btn-group .btn-list .btn-float:nth-child(4) { right: 10px; top: 0; bottom: 0; } .model-1 .float-btn-group.open .btn-list { width: 200px; height: 200px; left: -75px; top: -75px; opacity: 1; } .model-1 .float-btn-group.open .btn-list .btn-float { -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); -moz-transition: 0.3s 0.6s; -o-transition: 0.3s 0.6s; -webkit-transition: 0.3s; -webkit-transition-delay: 0.6s; -webkit-transition: 0.3s 0.6s; transition: 0.3s 0.6s; } .model-1 .float-btn-group.open .btn-list .btn-float:hover { -webkit-transition: 0.3s; transition: 0.3s; text-shadow: 1px 4px 1px #666; } .model-2 { background: #b0bec5; } .model-2 .float-btn-group { float: left; } .model-2 .float-btn-group .icon-bars { -webkit-transition: 0.3s; transition: 0.3s; } .model-2 .float-btn-group .btn-list .btn-float { position: absolute; right: 0; top: 0; opacity: 0; -ms-transform: scale(0, 0); -webkit-transform: scale(0, 0); transform: scale(0, 0); } .model-2 .float-btn-group .btn-list .btn-float:nth-child(1) { -moz-transition: 0.2s 0.3s; -o-transition: 0.2s 0.3s; -webkit-transition: 0.2s; -webkit-transition-delay: 0.3s; -webkit-transition: 0.2s 0.3s; transition: 0.2s 0.3s; } .model-2 .float-btn-group .btn-list .btn-float:nth-child(2) { -moz-transition: 0.2s 0.5s; -o-transition: 0.2s 0.5s; -webkit-transition: 0.2s; -webkit-transition-delay: 0.5s; -webkit-transition: 0.2s 0.5s; transition: 0.2s 0.5s; } .model-2 .float-btn-group .btn-list .btn-float:nth-child(3) { -moz-transition: 0.2s 0.7s; -o-transition: 0.2s 0.7s; -webkit-transition: 0.2s; -webkit-transition-delay: 0.7s; -webkit-transition: 0.2s 0.7s; transition: 0.2s 0.7s; } .model-2 .float-btn-group .btn-list .btn-float:nth-child(4) { -moz-transition: 0.2s 0.92s; -o-transition: 0.2s 0.92s; -webkit-transition: 0.2s; -webkit-transition-delay: 0.92s; -webkit-transition: 0.2s 0.92s; transition: 0.2s 0.92s; } .model-2 .float-btn-group.open .btn-list .btn-float { opacity: 1; -ms-transform: scale(0.9, 0.9); -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); } .model-2 .float-btn-group.open .btn-list .btn-float:nth-child(1) { top: -220px; -moz-transition: 0.2s 0.9s; -o-transition: 0.2s 0.9s; -webkit-transition: 0.2s; -webkit-transition-delay: 0.9s; -webkit-transition: 0.2s 0.9s; transition: 0.2s 0.9s; } .model-2 .float-btn-group.open .btn-list .btn-float:nth-child(2) { top: -165px; -moz-transition: 0.2s 0.7s; -o-transition: 0.2s 0.7s; -webkit-transition: 0.2s; -webkit-transition-delay: 0.7s; -webkit-transition: 0.2s 0.7s; transition: 0.2s 0.7s; } .model-2 .float-btn-group.open .btn-list .btn-float:nth-child(3) { top: -110px; -moz-transition: 0.2s 0.5s; -o-transition: 0.2s 0.5s; -webkit-transition: 0.2s; -webkit-transition-delay: 0.5s; -webkit-transition: 0.2s 0.5s; transition: 0.2s 0.5s; } .model-2 .float-btn-group.open .btn-list .btn-float:nth-child(4) { top: -55px; -moz-transition: 0.2s 0.3s; -o-transition: 0.2s 0.3s; -webkit-transition: 0.2s; -webkit-transition-delay: 0.3s; -webkit-transition: 0.2s 0.3s; transition: 0.2s 0.3s; } .model-3 { background: #90a4ae; } .model-3 .float-btn-group { float: none; width: 50px; margin: auto; } .model-3 .float-btn-group .icon-bars { -webkit-transition: 0.3s; transition: 0.3s; } .model-3 .float-btn-group .btn-list { background: #fff; border-radius: 50px; width: 50px; height: 50px; left: 0; overflow: hidden; opacity: 0; } .model-3 .float-btn-group .btn-list .btn-float { -webkit-transition: 0.2s; transition: 0.2s; position: absolute; top: 0; left: 0; -ms-transform: scale(0, 0); -webkit-transform: scale(0, 0); transform: scale(0, 0); } .model-3 .float-btn-group .btn-list .btn-float:nth-child(2) { left: 50px; } .model-3 .float-btn-group .btn-list .btn-float:nth-child(3) { left: 160px; } .model-3 .float-btn-group .btn-list .btn-float:nth-child(4) { left: 215px; } .model-3 .float-btn-group.open .btn-list { width: 270px; left: -110px; opacity: 1; } .model-3 .float-btn-group.open .btn-list .btn-float { -moz-transition: 0.2s 0.3s; -o-transition: 0.2s 0.3s; -webkit-transition: 0.2s; -webkit-transition-delay: 0.3s; -webkit-transition: 0.2s 0.3s; transition: 0.2s 0.3s; -ms-transform: scale(0.9, 0.9); -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); } .model-4 { background: #78909c; } .model-4 .float-btn-group .icon-bars { -webkit-transition: 0.3s; transition: 0.3s; } .model-4 .float-btn-group .btn-list .btn-float { position: absolute; right: 0; top: 0; opacity: 0; } .model-4 .float-btn-group .btn-list .btn-float:nth-child(1) { -moz-transition: 0.3s 1.2s; -o-transition: 0.3s 1.2s; -webkit-transition: 0.3s; -webkit-transition-delay: 1.2s; -webkit-transition: 0.3s 1.2s; transition: 0.3s 1.2s; } .model-4 .float-btn-group .btn-list .btn-float:nth-child(2) { -moz-transition: 0.3s 0.9s; -o-transition: 0.3s 0.9s; -webkit-transition: 0.3s; -webkit-transition-delay: 0.9s; -webkit-transition: 0.3s 0.9s; transition: 0.3s 0.9s; } .model-4 .float-btn-group .btn-list .btn-float:nth-child(3) { -moz-transition: 0.3s 0.6s; -o-transition: 0.3s 0.6s; -webkit-transition: 0.3s; -webkit-transition-delay: 0.6s; -webkit-transition: 0.3s 0.6s; transition: 0.3s 0.6s; } .model-4 .float-btn-group .btn-list .btn-float:nth-child(4) { -moz-transition: 0.3s 0.3s; -o-transition: 0.3s 0.3s; -webkit-transition: 0.3s; -webkit-transition-delay: 0.3s; -webkit-transition: 0.3s 0.3s; transition: 0.3s 0.3s; } .model-4 .float-btn-group.open .btn-list .btn-float { opacity: 1; } .model-4 .float-btn-group.open .btn-list .btn-float:nth-child(1) { right: 230px; -moz-transition: 0.3s 0.3s; -o-transition: 0.3s 0.3s; -webkit-transition: 0.3s; -webkit-transition-delay: 0.3s; -webkit-transition: 0.3s 0.3s; transition: 0.3s 0.3s; } .model-4 .float-btn-group.open .btn-list .btn-float:nth-child(2) { right: 165px; -moz-transition: 0.3s 0.6s; -o-transition: 0.3s 0.6s; -webkit-transition: 0.3s; -webkit-transition-delay: 0.6s; -webkit-transition: 0.3s 0.6s; transition: 0.3s 0.6s; } .model-4 .float-btn-group.open .btn-list .btn-float:nth-child(3) { right: 110px; -moz-transition: 0.3s 0.9s; -o-transition: 0.3s 0.9s; -webkit-transition: 0.3s; -webkit-transition-delay: 0.9s; -webkit-transition: 0.3s 0.9s; transition: 0.3s 0.9s; } .model-4 .float-btn-group.open .btn-l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0