div+css布局实现图标文字卡片排列效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css布局实现图标文字卡片排列效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Ubuntu', sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #3c2846; } .container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .card { position: relative; width: 320px; height: 450px; margin: 30px; background: #287bff; border-radius: 20px; display: flex; justify-content: center; align-items: flex-start; overflow: hidden; border-bottom-left-radius: 160px; border-bottom-right-radius: 160px; box-shadow: 0 15px 0 #fff, inset 0 -15px 0 rgba(255,255,255,0.25), 0 45px 0 rgba(0,0,0,0.15); } .card::before { content: ''; position: absolute; top: -150px; left: -40%; filter: blur(5px); width: 100%; height: 150%; transform: rotate(35deg); background: linear-gradient(90deg,transparent,rgba(255,255,255,0.2)); pointer-events: none; } .card:nth-child(1) { background: linear-gradient(to bottom,#ff2ae0, #64b5f6); } .card:nth-child(2) { background: linear-gradient(to bottom,#ffec61, #f321d7); } .card:nth-child(3) { background: linear-gradient(to bottom,#24ff72, #9a4eff); } .card .icon { position: relative; width: 140px; height: 120px; background: #3c2846; border-bottom-left-radius: 100px; border-bottom-right-radius: 100px; display: flex; justify-content: center; align-items: flex-start; box-shadow: 0 10px 0 rgba(0,0,0,0.1), inset 0 -8px 0 #fff; z-index: 1000; } .card .icon ion-icon { color: #fff; position: relative; font-size: 6em; z-index: 1; --ionicon-stroke-width: 24px; } .card .icon::before { content: ''; position: absolute; top: 0; left: -50px; width: 50px; height: 50px; background: transparent; border-top-right-radius: 50px; box-shadow: 15px -15px 0 15px #3c2846; } .card .icon::after { content: ''; position: absolute; top: 0; right: -50px; width: 50px; height: 50px; background: transparent; bo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0