卡片hover弹出文字按钮效果
代码语言:html
所属分类:悬停
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Cardo:400i|Rubik:400,700&display=swap"); :root { --d: 700ms; --e: cubic-bezier(0.19, 1, 0.22, 1); --font-sans: 'Rubik', sans-serif; --font-serif: 'Cardo', serif; } * { box-sizing: border-box; } html, body { height: 100%; } body { display: grid; place-items: center; } .page-content { display: grid; grid-gap: 1rem; padding: 1rem; max-width: 1024px; margin: 0 auto; font-family: var(--font-sans); } @media (min-width: 600px) { .page-content { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 800px) { .page-content { grid-template-columns: repeat(4, 1fr); } } .card { position: relative; display: -webkit-box; display: flex; -webkit-box-align: end; align-items: flex-end; overflow: hidden; padding: 1rem; width: 100%; text-align: center; color: whitesmoke; background-color: whitesmoke; b.........完整代码请登录后点击上方下载按钮下载查看
网友评论0