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;
		}.........完整代码请登录后点击上方下载按钮下载查看