css悬浮按钮点击散开子多彩菜单按钮效果代码
代码语言:html
所属分类:菜单导航
代码描述:css悬浮按钮点击散开子多彩菜单按钮效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <meta charset="UTF-8"> <style> html { background: #f8f7f2; } .menu, .button { width: 100px; height: 100px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .menu { margin-top: 50px; margin-left: 150px; -webkit-transition: -webkit-transform 1.125s cubic-bezier(0.39, 1.52, 0.46, 0.92); transition: -webkit-transform 1.125s cubic-bezier(0.39, 1.52, 0.46, 0.92); transition: transform 1.125s cubic-bezier(0.39, 1.52, 0.46, 0.92); transition: transform 1.125s cubic-bezier(0.39, 1.52, 0.46, 0.92), -webkit-transform 1.125s cubic-bezier(0.39, 1.52, 0.46, 0.92); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -webkit-transform-origin: top left; transform-origin: top left; cursor: pointer; } .button { position: absolute; top: 0; left: 0; border-radius: 50%; mix-blend-mode: multiply; background-position: center center; background-repeat: no-repeat; background-size: 33%; font: 25px/100px Alegreya Sans, sans-serif; -webkit-transition: -webkit-transform 0.75s cubic-bezier(0.39, 1.52, 0.46, 0.92); transition: -webkit-transform 0.75s cubic-bezier(0.39, 1.52, 0.46, 0.92); transition: transform 0.75s cubic-bezier(0.39, 1.52, 0.46, 0.92); transition: transform 0.75s cubic-bezier(0.39, 1.52, 0.46, 0.92), -webkit-transform 0.75s cubic-bezier(0.39, 1.52, 0.46, 0.92); will-change: transform; } .button.closed { -webkit-transform: translate3d(0, 0, 0) !important; transform: translate3d(0, 0, 0) !important; } .main { color: #030f01; text-align: center; mix-blend-mode: normal; line-height: 100px; -webkit-box-shadow: 0 0 0 5px rgba(3, 15, 1, 0.1); box-shadow: 0 0 0 5px rgba(3, 15, 1, 0.1); -webkit-transition: border-color 0.75s, color 0.75s; transition: border-color 0.75s, color 0.75s; will-change: color, border-color, background; } .closed .main { color: #f8f7f2; -webkit-box-shadow: 0 0 0 5px rgba(3, 15, 1, 0); box-shadow: 0 0 0 5px rgba(3, 15, 1, 0); } .home { background-color: #1ba5cd; top: 0%; left: 225%; -webkit-transition-duration: 0.525s; transition-duration: 0.525s; } .closed .home { -webkit-transform: translate3d(-225%, -10%, 0) rotate(-180deg); transform: translate3d(-225%, -10%, 0) rotate(-180deg); } .music { background-colo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0