div+css布局实现炫酷堆叠阴影图文卡片效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css布局实现炫酷堆叠阴影图文卡片效果代码
代码标签: div css 布局 炫酷 堆叠 阴影 图文 卡片
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.cdnfonts.com/css/mona-sans"); *{ box-sizing: border-box; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth;} html, body { overflow: hidden; } body { min-height: 100vh; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0; background: #343434; background: linear-gradient( 180deg, #343434 0%, #252525 100% ); font-family: "Mona-Sans", sans-serif; font-family: "Mona Sans", sans-serif; } /* ///////////////////// */ .card { position: absolute; left: 0; right: 0; top: 19%; margin: auto; width: 320px; height:350px; border-radius: 16px; background: #191919aa; background: linear-gradient( 180deg, #292929aa 0%, #191919cc 50% ); backdrop-filter: blur(4px); box-shadow: inset 0 2px 2px 0 #e7c4a088, inset 0 -2px 2px 0 #0003; color: #ccc; text-shadow: 1px 1px 3px #333a; padding: 24px; padding-right: 42px; display: flex; flex-direction: column; justify-content: end; h2, p { margin: 8px 0; } h2 { font-size: 1.1em; } p { font-size: 0.9em; font-weight: 800; color: #aaa; } .button { width: fit-content; border-radius: 100px; padding: 8px 36px; margin-top: 12px; background: #fff2; box-shadow: 0 0 0 1px #fff3, inset 120px 0 100px -100px #000c, 0 0 0 0 #fff1; transition: box-shadow 0.4s ease-in-out; cursor: pointer; &:hover { box-shadow: 0 0 0 1px #fff3, inset 200px 0px 100px -100px #000a, -4px 0 8px 2px #fff2; } } img { position: absolute; top: 32px; left: 0; right: 0; width: 80%; margin: auto; object-fit: contain; user-select: none; pointer-events: none; } } .accents { user-select: none; pointer-events: none; position: absolute; left: 0; right: 0; t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0