css+div实现聊天输入框左侧按钮伸缩弹出子菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:css+div实现聊天输入框左侧按钮伸缩弹出子菜单效果代码
代码标签: css div 聊天 输入框 左侧 按钮 伸缩 弹出 菜单
下面为部分代码预览,完整代码请点击下载或在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.6.1.css"> <style> :root { --lavender: #f0ebff; --violet: #643cff; } body { margin: 0; background: var(--lavender); display: flex; justify-content: center; align-items: center; height: 100vh; width: 100wh; } .container { overflow: hidden; width: 300px; height: 80px; background: var(--violet); border-radius: 50px; position: relative; box-shadow: 0px 40px 100px -25px #643cff; transform-origin: 10% 50%; } .container > * { height: 50px; width: 50px; border-radius: 50px; background: rgba(255, 255, 255, 0.2); position: absolute; top: 15px; left: 20px; display: flex; justify-content: center; align-items: center; color: white; } #message-box { left: 90px; width: 150px; height: 30px; outline: none; border: 0; color: #fff; padding: 10px 20px; transform-origin: -100% -100%; transition: 0.2s ease-in-out } #message-box::placeholder { color: #fff; opacity: 0.5; word: 5px; } .container > .video, .container > .camera, .container > .image { transition: 0.2s ease-in-out; transform: rotate(60deg); transform-origin: -100% 100%; transition-delay: 0.2s; } .container > .camera { transform-origin: -130% 130%; transition-delay: 0.3s; } .container > .image { transform-origin: -160% 160%; transition-delay: 0.4s; } label > i.attach { padding: 20px; transition: 0.2s ease-out; transform: rotate(0deg); } label { z-index: 2; top: -28px; left: -26px; position: absolute; } .video { left: 90px; } .camera { left: initial; right: 90px; } .image { left: initial; right: 20px; } #attach { display: none; } .wrapper { position: relative; } .ripple { width: 50px; height: 50px; top: -25px; left: -25px; position: absolute; border-radius: 50%; z-index: 1; } #attach:checked ~ label > i { transform: rotate(315deg); transition: 0.2s ease-in } @keyframes rippleeffect { 0% { box-shadow: 0px 0px 2px 5px rgba(0, 0, 0, 0); } 50% { width: 50px; height: 50px; top: -25px; left: -25px; box-shadow: 0px 0px 2px 10px rgba(0, 0, 0, 0); } 90% { width: 64px; height: 64px; top: -32px; left: -32px; box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.1); } 100% { box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0); } } @keyframes negativeRotate { 0% { transform: rotate(0deg); } 30% { transform: rotate(-7deg); } 100% { transform: rotate(0deg); } } @keyframes positiveRotate { 0% { transform: rotate(.........完整代码请登录后点击上方下载按钮下载查看
网友评论0