css实现右下角悬浮按钮鼠标放上去上方弹出子菜单图标代码
代码语言:html
所属分类:菜单导航
代码描述:css实现右下角悬浮按钮鼠标放上去上方弹出子菜单图标代码
代码标签: css 右下角 悬浮 按钮 鼠标 放上去 上方 弹出 子菜单 图标 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <style> @import url("https://fonts.googleapis.com/css?family=Roboto"); @-webkit-keyframes come-in { 0% { transform: translatey(100px); opacity: 0; } 30% { transform: translateX(-50px) scale(0.4); } 70% { transform: translateX(0px) scale(1.2); } 100% { transform: translatey(0px) scale(1); opacity: 1; } } @keyframes come-in { 0% { transform: translatey(100px); opacity: 0; } 30% { transform: translateX(-50px) scale(0.4); } 70% { transform: translateX(0px) scale(1.2); } 100% { transform: translatey(0px) scale(1); opacity: 1; } } * { margin: 0; padding: 0; } html, body { background: #111; font-family: "Roboto", sans-serif; } .floating-container { position: fixed; width: 100px; height: 100px; bottom: 0; right: 0; margin: 35px 25px; } .floating-container:hover { height: 300px; } .floating-container:hover .floating-button { box-shadow: 0 10px 25px rgba(244, 67, 54, 0.6); transform: translatey(5px); transition: all 0.3s; } .floating-container:hover .element-container .float-element:nth-child(1) { -webkit-animation: come-in 0.4s forwards 0.2s; animation: come-in 0.4s forwards 0.2s; } .floating-container:hover .element-container .float-element:nth-child(2) { -webkit-animation: come-in 0.4s forwards 0.4s; animation: come-in 0.4s forwards 0.4s; } .floating-container:hover .element-container .float-element:nth-child(3) { -webkit-animation: come-in 0.4s forwards 0.6s; ani.........完整代码请登录后点击上方下载按钮下载查看
网友评论0