css+js实现图标卡片悬浮光照走光高亮效果代码
代码语言:html
所属分类:悬停
代码描述:css+js实现图标卡片悬浮光照走光高亮效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap" rel="stylesheet"> <style> :root { --bg-color: rgb(20, 20, 20); --card-color: rgb(23, 23, 23); } body { align-items: center; background-color: var(--bg-color); display: flex; height: 100vh; justify-content: center; margin: 0px; overflow: hidden; padding: 0px; } #cards { display: flex; flex-wrap: wrap; gap: 8px; max-width: 916px; width: calc(100% - 20px); } #cards:hover > .card::after { opacity: 1; } .card { background-color: rgba(255, 255, 255, 0.1); border-radius: 10px; cursor: pointer; display: flex; height: 260px; flex-direction: column; position: relative; width: 300px; } .card:hover::before { opacity: 1; } .card::before, .card::after { border-radius: inherit; content: ""; height: 100%; left: 0px; opacity: 0; position: absolute; top: 0px; transition: opacity 500ms; width: 100%; } .card::before { background: radial-gradient( 800px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.06), transparent 40% ); z-index: 3; } .card::after { background: radial-gradient( 600px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.4), transparent 40% ); z-index: 1; } .card > .card-content { background-color: var(--card-color); border-radius: inherit; display: flex; flex-direction: column; flex-grow: 1; inset: 1px; padding: 10px; position: absolute; z-index: 2; } /* -- ↓ ↓ ↓ extra card content styles ↓ ↓ ↓ -- */ h1, h2, h3, h4, span { color: rgb(240, 240, 240); font-family: "Rubik", sans-serif; font-weight: 400; margin: 0px; } i { color: rgb(240, 240, 240); } .card-image { align-items: center; display: flex; height: 140px; justify-content: center; overflow: hidden; } .card-image > i { font-size: 6em; opacity: 0.25; } .card-info-wrapper { align-items: center; display: flex; flex-grow: 1; justify-content: flex-start; padding: 0px 20px; } .card-info { align-items: flex-start; display: flex; gap: 10px; } .card-info > i { font-size: 1em; height: 20px; line-height: 20px; } .card-info-title > h3 { font-size: 1.1em; line-height: 20px; } .card-info-title > h4 { color: rgba(255, 255, 255, 0.5); font-size: 0.85em; margin-top: 8px; } /* -- ↓ ↓ ↓ some responsiveness ↓ ↓ ↓ -- */ @media(max-width: 1000px) { body { align-items: flex-start; overflow: auto; } #cards { max-width: 1000px; padding: 10px 0px; } .card { flex-shrink: 1; width: calc(50% - 4px); } } @media(max-width: 500px) { .card { height: 180px; } .card-image { height: 80px; } .card-image > i { font-size: 3em; } .card-info-wrapper { padding: 0px 10px; } .card-info > i { font-size: 0.8em; } .card-info-title > h3 { font-size: 0.9em; } .card-info-title > h4 { font-size: 0.8em; margin-top: 4px; } } @media(max-width: 320px) { .card { width: 100%; } } </style> </head> <body > <div id="cards"> <div class="card"> <div class="card-content"> <div class="card-image"> <i class="fa-duotone fa fa-lg fa-xing-square"></i> </div> <div class="card-info-wrapper"> <div class="card-info"> <i class="fa-duotone fa-apartment"></i> <.........完整代码请登录后点击上方下载按钮下载查看
网友评论0