css布局实现黑色大气书签页面ui交互效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现黑色大气书签页面ui交互效果代码
代码标签: css 布局 黑色 大气 书签 页面 ui 交互
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css"> <style> @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"); * { outline: none; box-sizing: border-box; } :root { --theme-bg-color: #0e0e0e; --theme-color: #fff; --theme-inactive-color: #5c5c5c; --body-font: "Poppins", sans-serif; --border-color: #252424; --card-color: #131a1a; } body { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100vh; padding: 2em; color: var(--theme-color); font-family: var(--body-font); background-color: #1b1b1b; } @media (max-width: 480px) { body { padding: 0.5em; } } .app { background-color: var(--theme-bg-color); width: 100%; max-width: 1200px; height: 92vh; max-height: 900px; border-radius: 20px; overflow: hidden; display: flex; position: relative; } .sidebar { flex-basis: 284px; display: flex; flex-direction: column; height: 100%; flex-shrink: 0; overflow-y: auto; overflow-x: hidden; padding: 50px; } @media (max-width: 480px) { .sidebar { display: none; } } .sidebar-menu { display: inline-flex; flex-direction: column; padding-top: 64px; } .sidebar-menu__link { color: var(--theme-inactive-color); text-decoration: none; font-size: 20px; font-weight: 500; transition: 0.3s; } .sidebar-menu__link + .sidebar-menu__link { margin-top: 24px; } .sidebar-menu__link:hover, .sidebar-menu__link.active { color: var(--theme-color); } .user { display: flex; flex-direction: column; padding-bottom: 64px; border-bottom: 1px solid var(--border-color); } .user-photo { width: 54px; height: 54px; border-radius: 10px; -o-object-fit: cover; object-fit: cover; flex-shrink: 0; margin-bottom: 20px; } .user-mail { margin-top: 6px; color: var(--theme-inactive-color); font-size: 14px; } .toggle { position: relative; display: inline-block; width: 56px; height: 24px; margin-top: auto; } input[type=checkbox] { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #4649bd; transition: 0.3s; border-radius: 34px; } .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 6px; bottom: 4px; background-color: #fff; transition: 0.4s; border-radius: 50%; } input:checked + .slider { background-color: #489f8c; } input:checked + .slider:before { transform: translateX(28px); } .main { display: flex; flex-direction: column; flex-grow: 1; padding: 50px 50px 50px 20px; } @media (max-width: 480px) { .main { padding: 40px 20px; } } .main-header { display: flex; align-items: center; margin-bottom: 20px; } .main-header__title { font-size: 28px; font-weight: 600; margin-right: 24px; } .main-header__avatars { flex-shrink: 0; display: flex; align-items: center; } @media (max-width: 480px) { .main-header__avatars { display: none; } } .main-header__avatars .main-header__avatar { width: 36px; height: 36px; -o-object-fit: cover; object-fit: cover; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--theme-bg-color); } .main-header__avatars .main-header__avatar + .main-header__avatar { margin-left: -5px; } .main-header__avatars .add-button { background-color: transparent; border: 0; padding: 0; color: #d8d8d8; margin-left: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .main-header__avatars .add-button svg { width: 28px; height: 28px; flex-shrink: 0; } .main-header__add { background-color: #ea4e34; border: none; color: #fff; padding: 4px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; margin-left: auto; cursor: pointer; transition: 0.3s; } .main-header__add:hover { background-color: #e4361a; } .main-header__add svg { width: 20px; height: 20px; } .main-header-nav { display: flex; align-items: center; font-size: 15px; padding: 20px 0; } .main-header-nav .nav-item { color: var(--theme-inactive-color); text-decoration: none; padding-bottom: 6px; transition: 0.3s; border-bottom: 1px solid transparent; } .main-header-nav .nav-item:hover { color: #fff; } .main-header-nav .nav-item.active { border-bottom: 1px solid #fff; color: #fff; } .main-header-nav * + * { margin-left: 24px; } .main-content { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 480px) { .main-content { gap: 10px; } } .card { border-radius: 20px; overflow: hidden; max-width: 100%; contain: layout; position: relative; z-index: 1; cursor: pointer; width: auto; aspect-ratio: 1/1; } @media (max-width: 480px) { .card { aspect-ratio: 1/1.4; } } .card.clicked { position: absolute; width: 500px; height: 600px; z-index: 2; } .card.card-1 { background-image: url("//repo.bfw.wiki/bfwrepo/image/62edbe9ebb82e.png"); view-transition-name: c1; } .card.card-2 { view-transition-name: c2; background-image: url("//repo.bfw.wiki/bfwrepo/image/62edbec862163.png"); } .card.card-3 { view-transition-name: c3; background-image: url("//repo.bfw.wiki/bfwrepo/image/62edbefa20a31.png"); } .card.card-4 { background-color: #e3dfec; view-transition-name: c4; background-image: url("//repo.bfw.wiki/bfwrepo/image/62edbe9ebb82e.png"); } .card.card-5 { background-image: url("//repo.bfw.wiki/bfwrepo/image/62edbefa20a31.png"); view-transition-name: c5; } .card.card-6 { background-color: #f8d7cd; view-transition-name: c6; background-image: url("//repo.bfw.wiki/bfwrepo/image/62edbe9ebb8.........完整代码请登录后点击上方下载按钮下载查看
网友评论0