悬浮弹出图片跟随效果
代码语言:html
所属分类:悬停
代码描述:悬浮弹出图片跟随效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat&display=swap"rel="stylesheet'> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/locomotive-scroll.min.css"> <style> @import url("https://fonts.googleapis.com/css2?family=Notable&display=swap"); :root { --color-text: #e4e4e4; --color-bg: #111111; --cursor-stroke: #dddddd; --cursor-fill: #e2e2e2; --cursor-stroke-width: 2px; } *, *::after, *::before { box-sizing: border-box; } :root { font-size: 12px; } body { margin: 0; color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } a { text-decoration: none; outline: none; cursor: pointer; } a:hover, a:focus { outline: none; } .menu { padding: 20vh 0 20vh 0; width: 100vw; position: relative; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; counter-reset: menucounter; opacity: 0; } .menu__item { display: flex; flex-direction: column; align-items: start; position: relative; padding-left: 25vw; } .menu__item::before { counter-increment: menucounter; content: counters(menucounter,".",decimal-leading-zero); position: absolute; top: -25%; left: 18%; transform: translateX(1rem); height: 100%; display: flex; align-items: center; font-weight: bold; font-size: 8vw; font-family: "Notable"; transition: transform 0.2s, opacity 0.08s; color: var(--color-text); opacity: 0; pointer-events: none; } .menu__item:hover::before { opacity: 0.2; transform: translateX(0); } .menu__item:hover .menu__item-innertext { color: var(--color-text); } .menu__item:hover .menu__item-sub { opacity: 1; transform: translateX(0); } .menu__item:hover .menu__item-sub .char { transform: translate(0) rotate(0); opacity: 1; } .menu__item-text { position: relative; cursor: pointer; display: block; overflow: hidden; padding: 1vh 0; font-size: 4vw; } .menu__item-innertext { display: block; font-family: "Notable", serif; font-weight: 300; text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 2px var(--color-text); transition: color 0.05s; mix-blend-mode: screen; transform: translateY(200%); } .menu__item-sub { display: flex; text-transform: uppercase; font-weight: bold; font-family: sans-serif; white-space: nowrap; position: relative; overflow: hidden; mix-blend-mode: difference; } .menu__item-sub .word:not(:first-child) { margin-left: 0.5ch; } .menu__item-sub .char { --char-delay: 6ms; display: inline-block; transform: translateY(-100%) rotate(-15deg); opacity: 0; transition: transform 0.25s ease-in-out, opacity 0.3s; transition-delay: calc(0ms + var(--char-index) * var(--char-delay)); } .image-card { position: absolute; z-index: -1; width: 200px; height: 300px; top: 0; left: 0; pointer-events: none; } .image-card__inner, .image-card__img { width: 100%; height: 100%; position: relative; } .image-card__img { background-size: cover; background-position: 50% 50%; opacity: 0; } .cursor { display: none; } .credits { font-family: sans-serif; font-size: 0.9rem; color: #fff; position: fixed; right: 20px; top: 20px; z-index: 20; } .credits a { color: #6fe2ff; } @media screen and (max-width: 54em) { .menu { padding-top: 10rem; } .menu__item { flex: none; padding-left: 6rem; } .menu__item::before { top: -5%; left: 1%; } .menu__item-text { padding: 0.5rem; font-size: 6vw; } .menu__item-sub { display: none; } } @media (any-pointer: fine) { .cursor { position: fixed; top: 0; left: 0; display: block; pointer-events: none; } .cursor.cursor__small circle { fill: var(--cursor-fill); opacity: 0.5; } .cursor.cursor__large circle { fill: none; stroke: var(--cursor-stroke); stroke-width: var(--cursor-stroke-width); opacity: 0.5; } } .loading__wrapper { position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #000; z-index: 200; } .loading__wrapper .loader--text { color: #fff; font-family: "Montserrat"; font-weight: 500; margin-bottom: 1.4rem; } .noisy__bg { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: -1; } .noisy__bg::before { content: ""; position: fixed; opacity: 0.015; width: 300%; height: 300%; left: -110%; top: -110%; animation: grain 8s steps(10) infinite; background: url("data:image/jpeg;base64,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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0