css实现鼠标悬浮卡片背景渐变动画效果代码
代码语言:html
所属分类:悬停
代码描述:css实现鼠标悬浮卡片背景渐变动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Anek+Latin:wght@300;400&display=swap" rel="stylesheet"> <style> :root { --border: rgb(3, 169, 244); --g1: rgb(98, 0, 234); --g2: rgb(236, 64, 122); --g3: rgb(253, 216, 53); } body { background-color: rgb(10, 10, 10); display: grid; height: 100vh; margin: 0px; padding: 0px; place-items: center; } .card { aspect-ratio: 1 / 1.6; border: 0.5vmin solid var(--border); cursor: pointer; position: relative; width: 56vmin; } .card:hover:before { background-position: 100% 100%; transform: scale(1.08, 1.03); } .card:hover > .card-content { background-position: -10% 0%; } .card:hover > .card-icon { color: white; } .card:hover > .card-content > .card-subtitle > .card-subtitle-word { opacity: 1; transform: translateY(0%); transition: opacity 0ms, transform 200ms cubic-bezier(.90, .06, .15, .90); } .card:before { background: linear-gradient( 130deg, transparent 0% 33%, var(--g1) 66%, var(--g2) 83.5%, var(--g3) 100% ); background-position: 0% 0%; background-size: 300% 300%; content: ""; height: 100%; left: 0px; pointer-events: none; position: absolute; top: 0px; transition: background-position 350ms ease, transform 350ms ease; width: 100%; z-index: 1; } .card-content { background-image: radial-gradient( rgba(255, 255, 255, 0.2) 8%, transparent 8% ); background-position: 0% 0%; background-size: 5vmin 5vmin; height: calc(100% - 10vmin); padding: 5vmin; position: relative; transition: background-position 350ms ease; width: calc(100% - 10vmin); z-index: 2; } .card-title, .card-subtitle { color: white; font-family: "Anek Latin", sans-serif; font-weight: 400; margin: 0px; } .card-title { font-size: 6vmin; } .card-subtitle { font-size: 3vmin; margin-top: 2vmin; } .card-subtitle-word { display: inline-block; margin: 0vmin 0.3vmin; opacity: 0; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0