创意卡片商品悬浮属性弹出购买UI交互设计
代码语言:html
所属分类:悬停
代码描述:创意卡片商品悬浮属性弹出购买UI交互设计
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --base-color: #4da6bd; --base-filter: 0deg; } * { margin: 0; padding: 0; font-family: sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #131313; } .first { --base-color: #4da6bd; --base-filter: 0deg; } .second { --base-color: #cc65b4; --base-filter: 120deg; } .third { --base-color: #58a54c; --base-filter: 280deg; } .container { position: relative; } .container .card { position: relative; width: 320px; height: 450px; background: #232323; border-radius: 20px; overflow: hidden; } .container .card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--base-color); clip-path: circle(150px at 80% 20%); transition: all 0.5s ease-in-out; transition-property: clip-path; transition-duration: 0.5s; } .container .card:hover::before { clip-path: circle(300px at 80% -20%); } .container .card::after { content: 'Adidas'; position: absolute; top: 50%; left: -15%; font-size: 7.5em; font-weight: 800; font-style: oblique; color: rgba(255, 255, 255, 0.04); } /* transform: rotate3d(0.5, 2, 0, 180deg) */ .container .card .imgBx { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10000; width: 100%; height: 220px; transition: all 0.5s; } .container .card:hover .imgBx { top: 0%; transform: translateY(0%); } .container .card .imgBx img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate3d(0.5, 2, 0, 180deg); width: 270px; filter: hue-rotate(var(--base-filter)); transition: filter 0s; } .container .card .contentBx { position: absolute; bottom: 0; width: 100%; height: 100px; text-align: center; transition: all 1s; z-index: 10; } .container .card:hover .contentBx { height: 210px; } .container .card .contentBx h2 { position: relative; font-weight: 600; letter-spacing: 1px; color: #fff; } .container .card .contentBx .size, .container .card .contentBx .color { display: flex; justify-content: center; align-items: center; padding: 8px 20px; transition: all 0.5s; opacity: 0; visibility: hidden; } .container .card:hover .contentBx .size { opacity: 1; visibility: visible; transition-delay: 0.5s; } .container .card:hover .contentBx .color { opacity: 1; visibility: visible; transition-delay: 0.6s; } .container .card .contentBx .size h3, .container .card .contentBx .color h3 { color: #fff; font-weight: 300; font-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0