div+css实现鼠标悬浮伸长脖子的卡通可爱长颈鹿效果代码-html代码-BFW代码库

代码语言：html

代码描述：div+css实现鼠标悬浮伸长脖子的卡通可爱长颈鹿效果代码

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

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

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

  
<style>
:root {
	--skin: #feb81a;
	--horns: #ed9d22;
	--crest: #c67c1b;
	--dots: #6b4634;
	--ears: #c86c61;
	--ear: #ed9d22;
	--eyes: #493619;
}
body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: 
		linear-gradient(180deg, #fff0 55%, #8bc34a 55%, #4caf50, #38893b 100%),
		linear-gradient(190deg, #3f51b5 10%, #03a9f4);
}

body:after {
	content: "";
	width: 100%;
	height: 3vh;
	background: 
		radial-gradient(circle at 50% 50%, #8bc34a 0.125vmin, #fff0 0 100%),
		radial-gradient(ellipse at 50% 50%, #8bc34a 1vmin, #fff0 0 100%),
		conic-gradient(from 90deg at 50% 50%, #c1c24a 0 25%, #fff0 0 100%), 
		conic-gradient(from 90deg at 40% 30%, #8bc34a 0 25%, #fff0 0 100%), 
		conic-gradient(from 90deg at 50% 9%, #4caf50 0 25%, #fff0 0 100%);
	position: absolute;
	bottom: 45vh;
	z-index: -1;
	background-size: 0.65vmin 0.75vmin, 2vmin 2vmin, 0.4vmin 100% , 0.5vmin 100%, 0.5vmin 100%;
	background-repeat: repeat-x;
	background-position: 0 1.125vmin, 0 2.5vmin, 0 0;
	filter: blur(0.25px);
}

.content {
	width: 30vmin;
	height: 80vmin;
	position: relative;
	clip-path: polygon(10% 0, 82% 0, 82% 100%, 10% 100%);
}

.cam {
	height: 5%;
	width: 100%;
	box-sizing: border-box;
	z-index: 5;
	position: relative;
}

.cam:nth-child(1) {
	height: 20%;
}

.cam:nth-child(12) {
	height: 30%;
}

.cam:hover ~ .giraffe .neck {
	transition: all 0.25s ease 0s;
}

.cam:nth-child(1):hover ~ .giraffe .neck {
	--h: 50vmin;
}

.cam:nth-child(2):hover ~ .giraffe .neck {
	--h: 46vmin;
}

.cam:nth-child(3):hover ~ .giraffe .neck {
	--h: 42vmin;
}

.cam:nth-child(4):hover ~ .giraffe .neck {
	--h: 38vmin;
}

.cam:nth-child(5):hover ~ .giraffe .neck {
	--h: 34vmin;
}

.cam:nth-child(6):hover ~ .giraffe .neck {
	--h: 30vmin;
}
.cam:nth-child(7):hover ~ .giraffe .neck {
	--h: 26vmin;
}
.cam:nth-child(8):hover ~ .giraffe .neck {
	--h: 22vmin;
}
.cam:nth-child(9):hover ~ .giraffe .neck {
	--h: 18vmin;
}
.cam:nth-child(10):hover ~ .giraffe .neck {
	--h: 14vmin;
}
.cam:nth-child(11):hover ~ .giraffe .neck {
	--h: 10vmin;
}
.cam:nth-child(12):hover ~ .giraffe .neck {
	--h: 8vmin;
}




.cam:hover ~ .giraffe:after {
	opacity: 0.5;
}

.cam:nth-child(1):hover ~ .giraffe:after {
	top: 11vmin;
	content: "3.00m";
}
.cam:nth-child(2):hover ~ .giraffe:after {
	top: 15vmin;
	content: "2.75m";
}
.cam:nth-child(3):hover ~ .giraffe:after {
	top: 19vmin;
	content: "2.50m";
}
.cam:nth-child(4):hover ~ .giraffe:after {
	top: 23vmin;
	content: "2.25m";
}
.cam:nth-child(5):hover ~ .giraffe:after {
	top: 27vmin;
	content: "2.00m";
}
.cam:nth-child(6):hover ~ .giraffe:after {
	top: 31vmin;
	content: "1.75m";
}
.cam:nth-child(7):hover ~ .giraffe:after {
	top: 35vmin;
	content: "1.50m";
}
.cam:nth-child(8):hover ~ .giraffe:after {
	top: 39vmin;
	content: "1.25m";
}
.cam:nth-child(9):hover ~ .giraffe:after {
	top: 43vmin;
	content: "1.00m";
}
.cam:nth-child(10):hover ~ .giraffe:after {
	top: 47vmin;
	content: "0.75m";
}
.cam:nth-child(11):hover ~ .giraffe:after {
	top: 51vmin;
	content: "0.50m";
}
.cam:nth-child(12):hover ~ .giraffe:after {
	top: 55vmin;
	content: "0.25m";
}



.giraffe {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}

.giraffe * {
	position: absolute;
}

.giraffe:before {
	content: "3.00m \A 2.75m \A 2.50m \A 2.25m \A 2.00m \A 1.75m \A 1.50m \A 1.25m \A 1.00m \A 0.75m \A 0.50m \A 0.25m";
	white-space: pre-wrap;
	line-height: 4vmin;
	position: absolute;
	top: 10.5vmin;
	margin-left: -13.5vmin;
	font-size: 1.65vmin;
	font-family: Arial, Helvetica, serif;
	color: #0002;
}


.giraffe:after {
	content: "";
	position: absolute;
	top: 27vmin;
	margin-left: -13.75vmin;
	background: var(--skin);
	width: 5vmin;
	height: 2.5vmin;
	z-index: -1;
	border-bottom: 0.5vmin solid var(--crest);
	font-size: 1.65vmin;
	font-family: Arial, Helvetica, serif;
	content: "2.00m";
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	padding-top: 0.25vmin;
	padding-right: 0.2vmin;
	border-radius: 0.25vmin;
	transition: all 0.25s ease 0s;
	opacity: 0.1;
}

.head {
	background: var(--skin);
	width: 11.5vmin;
	height: 9.5vmin;
	border-radius: 100%;
	top: -5vmin;
	left: 0.25vmin;
	transform: rotate(10deg);
	z-index: 1;
	overflow: hidden;
}

.horns {
	background: #3f51b500;
	width: 5vmin;
	height: 6vmin;
	transform: rotate(-14deg);
	left: 1vmin;
	top: -9.5vmin;
	z-index: 1;
}

.horns span {
	background: var(--skin);
	width: 2.15vmin;
	height: 2.15vmin;
	border-radius: 100%;
	top: 0.65vmin;
	left: 0.25vmin;
}

.horns span:before {
	width: 2vmin;
	height: 4vmin;
	border: 1vmin solid #fff0;
	border-radius: 15vmin 5vmin;
	border-left-color: var(--horns);
	content: "";
	position: absolute;
	z-index: -1;
	background: radial-gradient(circle at -32% 85%, var(--horns) 0.75vmin, #fff0 0 100%);
	background-repeat: no-repeat;
	border-bottom-width: 0;
	border-right-width: 0;
}



.horns span + span {
	top: 0.5vmin;
	left: 2.9vmin;
	transform: rotate(6deg);
}

.horns span + span:after {
	width: 100%;
	height: 100%;
	background: var(--skin);
	content: "";
	position: absolute;
	border-radius: 100%;
	left: -0.15vmin;
}


.ears {
	background: #f000;
	width: 14vmin;
	height: 3vmin;
	transform: rotate(-21deg);
	left: -3.5vmin;
	top: -5vmin;
	z-index: 0;
}

.ears span {
	background: radial-gradient(ellipse at 50% 50%, var(--ears) 1.35vmin, #fff0 calc(1.35vmin + 1px) 100%), var(--skin);
	width: 4.5vmin;
	height: 2.5vmin;
	border-radius: 100%;
	left: 0.4vmin;
	top: 0.4vmin;
}

.ears span + span {
	left: 9.4vmin;
	--skin: var(--ear);
}




.eyes {
	background: #ff000000;
	width: 6vmin;
	height: 2vmin;
	top: -3.5vmin;
	left: 2.5vmin;
	transform: rotate(-19deg);
	z-index: 2;
}

.eyes:before, .eyes:after {
	content: "";
	background: var(--eyes);
	width: 1.25vmin;
	height: 1.25vmin;
	position: absolute;
	border-radius: 100%;
	left: 0.5vmin;
	top: 0.25vmin;
}

.eyes:after {
	left: 4.5vmin;
	top: 0.25vmin;
}


.nose {
	background: var(--eyes);
	width: 3.75vmin;
	height: 2.75vmin;
	border-radius: 100%;
	border-left: 0.5vmin solid #000;
	border-bottom: 0.5vmin solid #000;
	box-sizing: border-box;
	top: -1.4vmin;
	left: 7.75vmin;
	transform: rotate(-20deg);
	z-index: 1;
}


.mouth {
	border: 0.65vmin solid #fff0;
	border-left-color: var(--eyes);
	height: 4vmin;
	border-radius: 100%;
	width: 2vmin;
	top: 5vmin;
	left: 4.75vmin;
	transform: rotate(-34deg);
	filter: invert(0);
}

.mouth:before {
	content: "";
	height: 0.625vmin;
	border-radius: 100%;
	width: 0.6vmin;
	top: -0.1vmin;
	left: -0.1vmin;
	background: var(--eyes);
	position: absolute;
}


.neck {
	--h: 34vmin;
	background: 
		radial-gradient(circle at 100% calc(100% - 44.15vmin), var(--dots) 1.25vmin, #fff0 calc(1.25vmin + 1px) 100%),
		radial-gradient(circle a.........完整代码请登录后点击上方下载按钮下载查看