js+css实现博客文章文字列表悬浮图片跟随效果代码-html代码-BFW代码库

js+css实现博客文章文字列表悬浮图片跟随效果代码

代码语言：html

所属分类：悬停

代码描述：js+css实现博客文章文字列表悬浮图片跟随效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
<style>
@import url("//repo.bfw.wiki/bfwrepo/css/normalize.css") layer(normalize.css);

@layer base {
        *,
        *:after,
        *:before {
                box-sizing: border-box;
        }

        body {
                min-height: 100vh;
                display: flex;
                flex-direction: column;
                font-family:  "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
        }

        header {
                padding-top: 4rem;
                position: sticky;
                top: 0;
    z-index: 4;
    background: linear-gradient(white 50%, transparent);
    margin-bottom: 4rem;
        }


        ol {
                cursor: none;
                padding: 0;
                margin: 0;
/*              list-style-position: inside;*/
        }

        .eyes {
                transform-box: fill-box;
                transform-origin: 50% 50%;
                -webkit-animation: blink 6s infinite linear;
                        animation: blink 6s infinite linear;
        }

        .eyes {
                -webkit-animation-delay: -2s;
                        animation-delay: -2s;
        }

        @-webkit-keyframes blink {
                0%,
                46%,
                48%,
                50%,
                100% {
                        scale: 1 1;
                }
                47%,
                49% {
                        scale: 1 0.01;
                }
        }

        @keyframes blink {
                0%,
                46%,
                48%,
                50%,
                100% {
                        scale: 1 1;
                }
                47%,
                49% {
                        scale: 1 0.01;
                }
        }
        
        @counter-style pad-tens {
          system: extends decimal;
          suffix: ". ";
          pad: 2 "0";
        }

        li:not(:last-of-type) {
                border-bottom: 2px solid hsl(0 0% 10% / 0.5);

        }

        li::marker {
                font-size: clamp(.875rem, 1vw + 1rem, 2rem);
                font-family: monospace;
                vertical-align: middle;
                font-weight: 100;
                color: hsl(0 0% 10% / 0.5);
        }

        main {
                flex: 1;
        }

        :root {
                --font-size: clamp(2rem, 8vw + 1rem, 10rem);
        }

        h1 {
                font-size: var(--font-size);
    margin: 0;
        }

        h1 span:nth-of-type(1) {
                font-size: 1.5rem;
                opacity: 0.5;
        }
        h1 span:nth-of-type(2) {
                font-size: clamp(1.875rem, 4vw + 1rem, 2rem);
                text-transform: uppercase;
        }

        li:is(:hover, :focus-within) {
                opacity: 1;
                z-index: 2;
        }

        li:hover {
                --active: 1;
        }
        li:has(~ li:is(:hover, :focus-within)),
        li:is(:hover, :focus-within) ~ li {
                opacity: 0.25;
        }

        li img {
                opacity: var(--active, 0);
                position: fixed;
                pointer-events: none;
                left: calc(var(--x) * 1px);
                top: calc(var(--y) * 1px);
                translate: -50% -50%;
                cursor: none;
                border-radius: 6px;
    z-index: 6;
        }

        a {
                padding: 2rem 0;
                display: flex;
                align-items: center;
                justify-content: spa.........完整代码请登录后点击上方下载按钮下载查看