css布局实现简约线框型音乐app效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现简约线框型音乐app效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); *, *:after, *:before { box-sizing: border-box; } :root { --c-gray-100: #fbf8f2; --c-gray-200: #fcfdfe; --c-gray-300: #e9ebec; --c-gray-400: #e3e4ea; --c-gray-500: #5f5f5f; --c-gray-900: #1d1d1d; --c-blue-300: #a8dee2; --c-blue-500: #2ab3c0; --c-green-500: #80b895; --c-green-300: #bad5ca; --c-red-500: #ea605e; --c-yellow-300: #f8e0b1; --c-yellow-500: #f9bc73; --rotation: -3deg; } body { font-family: "Urbanist", sans-serif; line-height: 1.5; min-height: 100vh; padding-top: 5vw; padding-bottom: 5vw; background-color: var(--c-gray-400); } img { display: block; max-width: 100%; } input, button { font: inherit; } .phone { width: 460px; border-radius: 25px; overflow: hidden; padding: 2rem; box-shadow: 0 0 0 10px var(--c-gray-300), 0 0 0 11px var(--c-gray-200); background-color: #fff; position: relative; z-index: 1; margin-left: auto; margin-right: auto; } .header { display: grid; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; grid-template-columns: 1fr 2fr 1fr; } .header-logo { display: flex; justify-content: center; align-items: center; width: 48px; height: 48px; background-color: var(--c-blue-300); border: 2px solid var(--c-gray-900); border-radius: 15px; } .header-logo div { display: flex; flex-wrap: wrap; width: 24px; height: 24px; } .header-logo span { display: block; width: 12px; height: 12px; border: 2px solid var(--c-gray-900); background-color: var(--c-yellow-500); border-radius: 50%; } .header-title { font-size: 1.25rem; font-weight: 600; margin-left: auto; margin-right: auto; } .header-buttons { display: flex; align-items: center; justify-content: flex-end; } .notifications { padding: 0; border: 0; background-color: transparent; margin-right: 1rem; position: relative; transform-origin: center center; transition: 0.15s ease; cursor: pointer; } .notifications:hover, .notifications:focus { transform: rotate(10deg); } .notifications i { font-size: 1.75rem; color: #454545; } .notifications:after { right: -8px; top: 3px; content: "2"; display: flex; align-items: center; justify-content: center; position: absolute; width: 20px; height: 20px; font-size: 0.75rem; background-color: var(--c-red-500); border-radius: 50%; font-weight: 800; border: 2px solid var(--c-gray-900); } .avatar { display: flex; justify-content: center; align-items: center; width: 48px; height: 48px; padding: 0; border-radius: 15px; overflow: hidden; border: 3px solid #fff; box-shadow: 0 8px 10px -4px rgba(0, 0, 0, 0.2); transform-origin: center center; transition: 0.15s ease; cursor: pointer; } .avatar:hover, .avatar:focus { transform: translatey(-4px); box-shadow: 0 12px 14px -4px rgba(0, 0, 0, 0.3); } .title { margin-top: 1rem; } .title h1 { font-size: 1.5rem; font-weight: 700; } .title p { font-size: 1rem; color: var(--c-gray-500); margin-top: 0.375em; } .search { position: relative; z-index: 1; transition: 0.15s ease; } .search:hover, .search:focus-within { transform: translatey(-2px); } .search-inner { display: flex; align-items: center; border: 2px solid var(--c-gray-900); border-radius: 15px; height: 60px; font-size: 1rem; width: 100%; background-color: #fff; position: relative; margin-top: 2rem; } .search-inner:after { content: ""; display: block; position: absolute; z-index: -1; width: 96%; height: 100%; bottom: -9px; left: calc(50% - 48%); border-radius: 20px; border: 2px solid var(--c-gray-900); background-color: var(--c-gray-100); transition: 0.15s ease; } .search-inner:hover input::-moz-placeholder, .search-inner:focus-within input::-moz-placeholder { color: #787878; } .search-inner:hover input:-ms-input-placeholder, .search-inner:focus-within input:-ms-input-placeholder { color: #787878; } .search-inner:hover input::placeholder, .search-inner:focus-within input::placeholder { color: #787878; } .search-inner:hover:after, .search-inner:focus-within:after { transform: translatey(2px); } .search-button { display: flex; align-items: center; justify-content: center; border-radius: 15px 0 0 15px; border: 0; background-color: var(--c-gray-100); position: relative; height: 100%; border-right: 2px solid var(--c-gray-900); width: 70px; transition: 0.15s ease; cursor: pointer; } .search-button i { font-size: 1.25em; } .search-button:focus, .search-button:hover { background-color: var(--c-yellow-300); outline: 0; } .search-input { border: 0; border-radius: 0 15px 15px 0; height: 100%; background-color: #fff; width: 100%; padding-left: 1em; padding-right: 1em; } .search-input:focus { outline: 0; } .search-input::-moz-placeholder { font-weight: 600; color: var(--c-gray-900); -moz-transition: 0.15s ease; transition: 0.15s ease; } .search-input:-ms-input-placeholder { font-weight: 600; color: var(--c-gray-900); -ms-transition: 0.15s ease; transition: 0.15s ease; } .search-input::placeholder { font-weight: 600; color: var(--c-gray-900); transition: 0.15s ease; } .navigation { margin-top: 2rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--c-gray-900); display: flex; justify-content: space-between; } .navigation-item { font-size: 1.125rem; display: inline-block; padding: 0 0.5rem; text-decoration: none; color: inherit; position: relative; z-index: 1; font-weight: 500; } .navigation-item.active { font-weight: 800; } .navigation-item.active:before { background-color: var(--c-yellow-500); } .navigation-item:before { content: ""; display: block; position: absolute; width: 100%; height: 14px; background-color: transparent; z-index: -1; bottom: -2px; left: 0; transition: 0.15s ease; } .navigation-item + .navigation-item { margin-left: 1.25rem; } .navigation-item:hover:before, .navigation-item:focus { background-color: var(--c-yellow-500); } .playlists { margin-top: 1.5rem; display: flex; padding: 2rem 0.5rem; } .currently-playing { padding: 1rem 0.5rem; } .card { width: 200px; transform: rotate(var(--rotation)); transition: 0.15s ease-out; } .card:nth-child(2) { margin-top: 1rem; --rotation: 5deg; } .card:nth-child(2) .card-inner:after { background-color: var(--c-green-300); } .card:nth-child(2) .card-pin { top: 20px; left: 20px; transform: rotate(-5deg); } .card + .card { margin-left: 2rem; } .card:hover, .card:focus-within { transform: translateY(4px) rotate(var(--rotation)); } .card:hover .card-inner, .card:focus-within .card-inner { background-color: var(--c-gray-100); } .card:hover .card-pin:after, .card:focus-within .card-pin:after { height: 54px; } .card:hover .card-pin:before, .card:focus-within .card-pin:before { transform: translatey(-4px); } .card.horizontal { width: 100%; transform: rotate(3deg); } .card.horizontal .card-inner { flex-direction: row; align-items: center; padding: 1rem; } .card.horizontal .card-inner:after { background-color: var(--c-green-500); } .card.horizontal .card-image { width: 60px; height: 60px; flex-shrink: 0; } .card.horizontal .card-content { width: 100%; margin-top: 0; margin-left: 0.5rem; } .card.horizontal .card-meta-artist { font-weight: 700; } .card.horizontal .card-title { font-weight: 500; color: var(--c-gray-500); font-size: 1.125em; margin-top: 0.125em; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; } .card.horizontal .card-time { font-weight: 600; } .card.horizontal:hover .card-pin.simple:before, .card.horizontal:hover .card-pin.simple:after, .card.horizontal:focus-within .card-pin.simple:before, .card.horizontal:focus-within .card-pin.simple:after { transform: none; } .card.horizontal:hover .card-pin.simple:after, .card.horizontal:focus-within .card-pin.simple:after { height: 50px; } .card-inner { display: flex; flex-directio.........完整代码请登录后点击上方下载按钮下载查看
网友评论0