css实现卡片悬浮人物标题突出视觉差异效果代码
代码语言:html
所属分类:视觉差异
代码描述:css实现卡片悬浮人物标题突出视觉差异效果代码
代码标签: css 卡片 悬浮 人物 标题 突出 视觉 差异
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --card-height: 300px; --card-width: calc(var(--card-height) / 1.5); } * { box-sizing: border-box; } body { width: 100vw; height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center; background: #191c29; } .card { width: var(--card-width); height: var(--card-height); position: relative; display: flex; justify-content: center; align-items: flex-end; padding: 0 36px; perspective: 2500px; margin: 0 50px; } .cover-image { width: 100%; height: 100%; object-fit: cover; } .wrapper { transition: all 0.5s; position: absolute; width: 100%; z-index: -1; } .card:hover .wrapper { transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0); box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75); -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75); -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75); } .wrapper::before, .wrapper::after { content: ""; opacity: 0; width: 100%; height: 80px; transition: all 0.5s; position: absolute; left: 0; } .wrapper::before { top: 0; height: 100%; background-image: linear-gradient( to top, .........完整代码请登录后点击上方下载按钮下载查看
网友评论0