css布局实现商品卡片悬浮效果代码
代码语言:html
所属分类:悬停
代码描述:css布局实现商品卡片悬浮效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /*===== GOOGLE FONTS =====*/ @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap"); /*===== VARIABLES CSS =====*/ :root { --dark-color-lighten: #f2f5ff; --red-card: #a62121; --blue-card: #4bb7e6; --btn: #141414; --btn-hover: #3a3a3a; --text: #fbf7f7; } /*===== RESET =====*/ *, ::before, ::after { margin: 0; padding: 0; box-sizing: border-box; } body { margin: 0; padding: 0; box-sizing: border-box; height: 100vh; width: 100vw; background-color: var(--dark-color-lighten); font-family: "Montserrat", sans-serif; } button { font-family: "Montserrat", sans-serif; display: inline-block; border: none; outline: none; border-radius: 0.2rem; color: var(--text); cursor: pointer; } a { text-decoration: none; } img { max-width: 100%; height: 100%; user-select: none; } /*===== CARD =====*/ .container { height: 100%; width: 850px; margin: auto; display: flex; align-items: center; justify-content: space-evenly; } .card { position: relative; padding: 1rem; width: 350px; height: 450px; box-shadow: -1px 15px 30px -12px rgb(32, 32, 32); border-radius: 0.9rem; background-color: var(--red-card); color: var(--text); cursor: pointer; } .card-blue { background: var(--blue-card); } .product-image { height: 230px; width: 100%; transform: translate(0, -1.5rem); transition: transform 500ms ease-in-out; filter: drop-shadow(5px 10px 15px rgba(8, 9, 13, 0.4)); } .product-info { text-align: center; } .card:hover .product-image { transform: translate(-1.5rem, -7rem) rotate(-20deg); } .product-info h2 { font-size: 1.4rem; font-weight: 600; } .product-info p { margin: 0.4rem; font-size: 0.8rem; font-weight: 600; } .price { font-size: 1.2rem; font-weight: 500; } .btn { display: flex; justify-content: space-evenly; align-items: center; margin-top: 0.8rem; } .buy-btn { background-color: var(--btn); padding: 0.6rem 3.5rem; font-weight: 600; font-size: 1rem; transition: 300ms ease; } .buy-btn:hover { background-color: var(--btn-hover); } .fav { box-sizing: border-box; background: #fff; padding: 0.5rem 0.5rem; border: 1px solid#000; display: grid; place-items: center; } .svg { height: 25px; width: 25px; fill: #fff; t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0