css+div布局实现一个手机电子商品商城ui页面代码
代码语言:html
所属分类:布局界面
代码描述:css+div布局实现一个手机电子商品商城ui页面代码
代码标签: css div 布局 手机 电子 商品 商城 ui 页面 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/simple-grid.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/css.gg.icons.css"> <style> @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap"); :root { /*Animations*/ --delay-titles: 0.3s; --delay-product: 0.6s; --delay-product-image: 1s; --delay-product-detail: 1.1s; --delay-product-star: 1.3s; /*icons Size multiply*/ --ggs: 1.5; /*Colors*/ --color-light: #faf4f4; --color-dark: #17171f; --color-dark-rgb: 23, 23, 31; /*Font Familiy*/ --font-family: "Poppins", sans-serif; } body { background-color: var(--color-light); font-family: var(--font-family); } body .margin-vertical { margin: 10px 0; } body .col-6-sm { animation: fade-in-bottom 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both var(--delay-titles); } #wrapper { width: 420px; height: 720px; margin: 40px auto; background: var(--color-dark); border-radius: 45px; overflow-y: auto; overflow-x: hidden; box-shadow: -40px 50px 40px -20px rgb(var(--color-dark-rgb)/15%); } @media (max-width: 540px) { #wrapper { margin: 0px; width: 100%; border-radius: 0; padding: 0; height: 100vh; } } #wrapper header { z-index: 5; position: sticky; top: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(var(--color-dark-rgb), 0.8) 25%, rgba(var(--color-dark-rgb), 1) 100%); color: var(--color-light); padding: 30px 25px; padding-bottom: 15px; } #wrapper header .page-title { margin: 0; font-size: 16px; color: var(--color-light); padding: 5px 0; } #wrapper header .profile { display: inline-block; width: 40px; height: 40px; border-radius: 15px; background: url("//repo.bfw.wiki/bfwrepo/image/5de084d231193.png") no-repeat center center; background-size: cover; position: relative; } #wrapper header .profile:before { width: 7px; height: 7px; border-radius: 100%; content: ""; position: absolute; top: 0; display: block; right: 0; box-shadow: 0 0 0 3px var(--color-dark); background-color: #e7d583; } #wrapper section { padding: 0px 25px; } #wrapper .hero-card { margin: 20px 0; height: 160px; box-shadow: inset 1px 2px 0 rgba(255, 255, 255, 0.4); border-radius: 35px; animation: flip-in-hor-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; background: radial-gradient(farthest-side at center center, #eed8db 5%, transparent 180px), radial-gradient(farthest-side at bottom center, #f0c1bb 5%, transparent 180px), radial-gradient(farthest-side at left bottom, #ebc6c0 5%, transparent 180px), radial-gradient(farthest-side at left center, #dabbc3 5%, transparent 180px), radial-gradient(farthest-side at left top, #e7cdce 5%, transparent 180px), radial-gradient(farthest-side at right top, #bcb7d7 5%, transparent 180px), radial-gradient(farthest-side at right bottom, #bcb7d7 5%, transparent), radial-gradient(farthest-side at right center, #bcb7d7 5%, transparent), radial-gradient(farthest-side at top center, #f6ede8 60%, transparent 500px); } #wrapper .hero-card:before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; transform: scaleY(0.8); filter: blur(35px); background: radial-gradient(farthest-side at center center, #eed8db 5%, transparent 180px), radial-gradient(farthest-side at bottom center, #f0c1bb 5%, transparent 180px), radial-gradient(farthest-side at left bottom, #ebc6c0 5%, transparent 180px), radial-gradient(farthest-side at left center, #dabbc3 5%, transparent 180px), radial-gradient(farthest-side at left top, #e7cdce 5%, transparent 180px), radial-gradient(farthest-side at right top, #bcb7d7 5%, transparent 180px), radial-gradient(farthest-side at right bottom, #bcb7d7 5%, transparent), radial-gradient(farthest-side at right center, #bcb7d7 5%, transparent), radial-gradient(farthest-side at top center, #f6ede8 60%, transparent 500px); z-index: 0; } #wrapper .hero-card .content-image { position: absolute; right: 0; top: 0; text-align: right; } #wrapper .hero-card .content-image img { width: 60%; animation: float 6s ease-in-out infinite; margin-right: -10%; margin-top: -20px; } #wrapper .hero-card .card-content { padding: 25px; z-index: 1; position: relative; } #wrapper .hero-card .card-content h3 { margin: 0; font-weight: 600; font-family: var(--font-family); } #wrapper .hero-card .card-content p { margin: 0; font-family: var(--font-family); font-size: 14px; font-weight: 400; } #wrapper .hero-card .card-content .content-input { margin-top: 10px; border-radius: 15px; background: white; max-width: 120px; padding: 13px; display: flex; flex-direction: row; box-shadow: 0 0 5px rgba(0, 0, 0, 0.05); } #wrapper .hero-card .card-content .content-input i { --ggs: 0.6; margin: 0; color: #b3aeab; flex: 0 0 16px; } #wrapper .hero-card .card-content .content-input input { padding: 0 10px; font-family: var(--font-family); width: 100%; outline: none; border: 0; color: #b3aeab; font-size: 12px; } #wrapper .segment-title { color: var(--color-light); font-family: var(--font-family); font-size: 18px; font-weight: 600; margin: 5px; } #wrapper .btn { display: inline-flex; color: var(--color-light); padding: 15px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); background: transparent; transition: ease all 0.3s; text-decoration: none; font-family: var(--font-family); font-weight: 600; font-size: 12px; } #wrapper .btn i { color: var(--color-light); } #wrapper .btn:hover { background-color: var(--color-light); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0); } #wrapper .btn:hover i { color: var(--color-dark); } #wrapper .btn-primary { position: relative; padding: 12px 18px 12px 25px; color: var(--color-dark); border-radius: 18px; transition: ease all 0.3s; vertical-align: middle; background: radial-gradient(farthest-side at bottom center, #f0c1bb 25%, transparent 75%), radial-gradient(farthest-side at left bottom, #ebc6c0 25%, transparent 75%), radial-gradient(farthest-side at left center, #dabbc3 25%, transparent 75%), radial-gradient(farthest-side at left top, #e7cdce 25%, transparent 75%), radial-gradient(farthest-side at right top, #bcb7d7 25%, transparent 75%), radial-gradient(farthest-side at right bottom, #bcb7d7 25%, transparent 75%), radial-gradient(farthest-side at right center, #bcb7d7 25%, transparent 75%), radial-gradient(farthest-side at top center, #f6ede8 60%, transparent 100%), radial-gradient(farthest-side at center center, #eed8db 100%, transparent 100%); z-index: 2; display: inline-block; } #wrapper .btn-primary i { color: var(--color-dark); --ggs: 0.6; flex: 0 0 1; height: 14px; } #wrapper .btn-primary img { width: 8px; height: 7px; vertical-align: middle; margin-left: 5px; } #wrapper .btn-primary:before { pointer-events: none; content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; transition: ease all 0.3s; transform: scaleY(0.7); opacity: 0.6; filter: blur(35px); background: radial-gradient(farthest-side at bottom center, #f0c1bb 25%, transparent 75%), radial-gradient(farthest-side at left bottom, #ebc6c0 25%, transparent 75%), radial-gradient(farthest-side at left center, #dabbc3 25%, transparent 75%), radial-gradient(farthest-side at left top, #e7cdce 25%, transparent 75%), radial-gradient(farthest-side at right top, #bcb7d7 25%, transparent 75%), radial-gradient(farthest-side at right bottom, #bcb7d7 25%, transparent 75%), radial-gradient(farthest-side at right center, #bcb7d7 25%, transparent 75%), radial-gradient(farthest-side at top center, #f6ede8 60%, transparent 100%), radial-gradient(farthest-side at center center, #eed8db 100%, transparent 100%); } #wrapper .btn-primary:hover { transform: scale(1.05); } #wrapper .product { display: flex; align-items: center; justify-content: center; background: linear-gradient(#2f2e36, #313038); border-radius: 18px; min-height: 200px; font-family: var(--font-family); font-size: 18px; font-weight: 600; box-shadow: inset 0px 1.5px 0 1px rgba(255, 255, 255, 0.1); color: var(--color-light); position: relative; animation: fade-in-bottom 0.6s ease-out var(--delay-product); animation-fill-mode: backwards; } #wrapper .product > img { max-width: 130px; max-height: 130px; margin-top: -35px; animation: fade-in-bottom 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both var(--delay-product-image); } #wrapper .product .star { width: 45px; height: 45px; position: absolute; bottom: 0; right: 0; background-color: var(--color-dark); border-radius: 18px 0 0 0; display: flex; align-items: center; justify-content: center; } #wrapper .product .star img { width: 24px; box-shadow: 0 0 5px -5px #faa827; } #wrapper .product .star i { color: var(--color-light); --ggs: 1; transition: ease all 0.3s; } #wrapper .product .star:hover img { animation: wobble-hor-bottom 1s both; cursor: pointer; } #wrapper .product .star:hover i { animation: wobble-hor-bottom 1s both; cursor: pointer; color: pink; } #wrapper .product .star:before { content: ""; position: absolute; left: -20px; bottom: 0; background: #313038; width: 20px; height: 20px; border-radius: 18px; box-shadow: 10px 10px 0 0 var(--color-dark); } #wrapper .product .star:after { content: ""; position: absolute; right: 0; top: -20px; background: #313038; width: 20px; height: 20px; border-radius: 18px; box-shadow: 10px 10px 0 0 var(--color-dark); } #wrapper .product .detail { position: absolute; left: 0; z-index: 3; bottom: 0; width: calc(100% - 65px); padding: 10px; animation: swing-in-left-fwd 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both var(--delay-product-detail); } #wrapper .product .detail .name { font-family: var(--font-family); font-size: 14px; font-weight: 600; margin: 0; color: var(--color-light); } #wrapper .product .detail .detail-footer { display: flex; } #wrapper .product .detail .detail-footer .review { display: flex; color: #f7ad32; font-family: var(--font-family); font-size: 12px; font-weight: 600; width: 40%; align-items: center; } #wrapper .product .detail .detail-footer .review img { width: 12px; height: 12px; vertical-align: middle; display: inline-block; margin-right: 5px; } #wrapper .product .detail .detail-footer .review i { margin-right: 5px; color: #f7ad32; --ggs: 0.7; transition: ease all 0.3s; } #wrapper .product .detail .........完整代码请登录后点击上方下载按钮下载查看
网友评论0