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: space-between;
		text-decoration: none;
		color: hsl(0 0% 10%);
		font-weight: 300;
		cursor: none;
	}

	li:is(:hover, :focus-within) {
		border-bottom-color: #0000;
	}

	a:focus-visible {
		outline-color: hsl(0 100% 50%);
		outline-offset: 0.5rem;
	}

	a span {
		font-size: clamp(.875rem, 0.5vw + 1rem, 2rem);
		flex: 0 0 auto;
	}

	ol {
		font-size: clamp(1.25rem, 2vw + 1rem, 2rem);
	}

	li {
		position: relative;
	}

	:root:has(li:nth-of-type(10)) {
		ol {
		  list-style-type: pad-tens;
		}
	}

	section {
		width: 800px;
		max-width: calc(100% - 8rem);
		margin: 0 auto;
	}

	footer {
		padding: 2rem;
		text-align: center;
	}
}

@layer socials {
	.bear-link {
		color: hsl(0 0% 10%);
		position: fixed;
		top: 1rem;
		right: 1rem;
    z-index: 10;
		width: 48px;
    padding: 0;
	}
}
</style>


  
  
</head>

<body translate="no">
  <header>
      <section>
        <h1>Posts<span>by</span><span>Your Name.</span></h1>
      </section>
    </header>
    <main>
      <section>
        <ol>
          <li>
            <a href="#">CSS in 2024, right?<span>Jan 2024</span>.........完整代码请登录后点击上方下载按钮下载查看