css悬浮菜单打开搜索动画效果代码
代码语言:html
所属分类:菜单导航
代码描述:css悬浮菜单打开搜索动画效果代码,包含圆圈菜单、下拉菜单、全屏搜索菜单等效果。
下面为部分代码预览,完整代码请点击下载或在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.15.3.css"> <style> /* start of the css code*/ * { margin: 0; padding: 0; box-sizing: border-box; } body { background: rgb(235, 234, 234); height: 100vh; display: grid; place-items: center; } /* main wrapper and its layout */ .wrapper { width: 200px; border-radius: 30px; height: 50px; background: white; box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.281); display: flex; justify-content: space-evenly; align-items: center; z-index: 5; position: relative; } .item { cursor: pointer; } .linee { width: 20px; height: 3px; background: rgb(201, 198, 198); margin-top: 3px; border-radius: 5px; transition: all 0.2s; } .linee1 { width: 15px; transform: translateX(5px); } .linee1::before { content: ""; display: block; transform: translateX(-5px); width: 3px; height: 3px; background: rgb(201, 198, 198); transition: width 0.2s ease 0.1s, transform 0.2s; } .linee3::after { content: ""; display: block; transform: translateX(17px); width: 0px; height: 3px; background: rgb(201, 198, 198); transition: width 0.2s ease 0.1s; } .linee3 { width: 13px; } .gallery { display: grid; grid-template-columns: repeat(3, 5px); grid-auto-rows: 5px; grid-gap: 4px; transform: translateY(3px); } .dot { border: 1px solid rgb(139, 136, 136); border-radius: 50%; } .add { width: 38px; height: 38px; border-radius: 50%; background: rgb(201, .........完整代码请登录后点击上方下载按钮下载查看
网友评论0