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

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

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