三维悬浮卡片式食物选择效果
代码语言:html
所属分类:选择器
代码描述:三维悬浮卡片式食物选择效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap'> <style> .food-card { background-color: #fff; position: relative; width: 325px; overflow: hidden; border-radius: 30px; box-shadow: -30px 70px 150px -20px rgba(51, 51, 51, 0.25); transform-style: preserve-3d; transform: rotateX(22deg) rotate(-14deg) rotateY(17deg) translateZ(var(--z)); position: absolute; transition: transform .3s; } .food-card:nth-child(1) { left: 40%; top: 29%; z-index: 1; --z: 30px; } .food-card:nth-child(1):hover { --z: 50px; } .food-card:nth-child(2) { left: 51%; top: 33%; z-index: 2; --z: 50px; } .food-card:nth-child(2):hover { --z: 70px; } .food-card:nth-child(3) { top: 37%; left: 35%; --z: -20px; } .food-card:nth-child(3):hover { --z: 0; } .food-card:hover { z-index: 5; } .food-card__image { position: relative; height: 160px; } .food-card__image > img { max-width: 100%; border-bottom-right-radius: 30px; transform: rotate(8deg) translate(-10px, -55px); position: absolute; height: 200px; object-fit: cover; object-position: center; } .food-card__details { display: grid; grid-row-gap: 8px; grid-template: 1fr 1fr / 1fr 1fr; padding: 8px 30px 20px; } .food-card__name { grid-column: 1; grid-row: 1; font-size: 18px; font-weight: bold; color: #11313c; } .food-card__price { grid-column: 2; grid-row: 1; font-size: 18px; font-weight: bold; color: #f7736e; text-align: right; } .food-card__desc { grid-column: 1; grid-row: 2; font-size: 14px; font-weight: 500; color: #949a98; } .food-card__rating { grid-column: 2; grid-row: 2; text-align: right; } .food-card__star { width: 16px; height: 16px; background-color: #dadada; display: inline-block; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } .food-card__star:not(:last-child) { margin-right: 6px; } .food-card__star--gold { background-color: #e6c356; } /* boring styles*/ body { font-family: 'Montserrat', sans-serif; background-color: #e8e6e7; perspective: 2000px; position: relative; height: 100vh; } </style> </head> <body translate="no"> <div class="food-card"> <div class="food-card__image"> <img src="http://repo.bfw.wiki/bfwrepo/imag.........完整代码请登录后点击上方下载按钮下载查看
网友评论0