纯css实现绅士帽中小白兔悬浮出来显示效果代码-html代码-BFW代码库

代码语言：html

所属分类：悬停

代码描述：纯css实现绅士帽中小白兔悬浮出来显示效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body {
	color: #333;
	font-family: Arial, Helvetica, serif;
	font-size: 1em;
	font-weight: normal;
	margin: 0;
	padding: 0;
	background: radial-gradient(#c31432, #240b36);
}
.content {
	width: 100vw;
	height: 100vh;
	text-align: center;
}
h1 {
	font-size: 7em;
	display: block;
	margin: 0 0 0.5em 0;
	color: #ffffff30;
}
.hat {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	padding-top: 20vh;
	box-sizing: border-box;
}
.top {
	background: radial-gradient(circle at center -14vmin,	black 0%,	black 50%,	#111 55%,	#111 100%);
	width: 20vmin;
	height: 18vmin;
	z-index: 4;
	position: absolute;
	margin-top: 11vmin;
	border-radius: 0 0 5px 5px;
}
.top:before {
	width: 19.8vmin;
	content: "";
	height: 21vmin;
	display: block;
	border-radius: 0 0 100% 100%;
	transform: rotateX(45deg);
	margin-top: 6.75vmin;
	background: #111;
	border: 0 solid;
	z-index: 1;
	position: absolute;
	left: 0.05vmin;
}
.top:after {
	width: 19.9vmin;
	content: "";
	height: 18.25vmin;
	display: block;
	border-radius: 100%;
	transform: rotateX(45deg);
	margin-top: 9vmin;
	background: #111;
	left: 0.05vmin;
	position: absolute;
}
.brim-front {
	width: 18vmin;
	height: 18vmin;
	position: absolute;
	margin-top: -20vmin;
	border-radius: 100%;
	transform: rotateZ(-55deg) rotateX(30deg) rotateY(35deg);
	border: 5vmin solid #121212;
	border-color: transparent transparent #121212 #121212;
	z-index: 4;
}
.brim-back {
	width: 18vmin;
	height: 18vmin;
	position: absolute;
	margin-top: -19.75vmin;
	border-radius: 100%;
	transform: rotateZ(-55deg) rotateX(30deg) rotateY(35deg);
	border: 5vmin solid #9c27b0;
	border-color: #121212 #121212 transparent transparent;
	z-index: 1;
}
.brim-back:before {
	content: "";
	background: linear-gradient(75deg, black, #292929);
	width: 18vmin;
	height: 18vmin;
	position: absolute;
	left: -0.35vmin;
	border-radius: 100%;
	border: 0.25vmin solid #111111;
	top: -0.15vmin;
}
.brim-bg {
	background: black;
	width: 20vmin;
	height: 16vmin;
	position: absolute;
	top: -17vmin;
	border-radius: 100%;
}
.show {
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	position: absolute;
	transform: scale(1.25);
}
.show:hover .rabbit {
	top: -16.5vmin;
	transition: top 1s ease 0s;
}
.rabbit {
	position: absolute;
	border-radius: 100%;
	z-index: 2;
	top: 5vmin;
	transition: top 1s ease 0s;
}
.head {
	background: linear-gradient(95deg, #fff, #fff, #fff, #fff, #b7b7b7);
	width: 11vmin;
	height: 10vmin;
	border-radius: 100% 100% 90% 90%;
}
.ear-left, .ear-right {
	background: #fff;
	width: 3vmin;
	height: 10vmin;
	border-radius: 100%;
	position: absolute;
	left: 2vmin;
	top: -7vmin;
}
.ear-right {
	left: 6vmin;
}
.ear-left:before, .ear-right:before {
	background: #c1c1c1;
	width: 2vmin;
	height: 6vmin;
	border-radius: 100% 100% 90% 60%;
	content: "";
	position: absolute;
	left: 0.5vmin;
	top: 2vmin;
}
.ear-right:before {
	border-radius: 100% 100% 60% 90%;
}
.eye-left, .eye-right {
	width: 2vmin;
	height: 1.75vmin;
	background: #691c00;
	position: absolute;
	left: 2.5vmin;
	border-radius: 100%;
	top: 3vmin;
}
.eye-right {
	left: 6.5vmin;
}
.eye-left:before, .eye-right:before {
	width: 1.55vmin;
	height: 1.45vmin;
	background: #ffffff;
	position: absolute;
	left: 0.125vmin;
	border-radius: 100%;
	top: 0vmin;
	content: "";
	border: 0.5vmin solid #000;
	box-sizing: border-box;
	border-width: 0.25em;
	margin: 0.1vmin;
}
.nose {
	background: #f980f5;
	width: 1.25vmin;
	height: 1.2vmin;
	position: absolute;
	left: 5vmin;
	top: 5vmin;
	border-radius: 130% 100% 80% 80%;
}
.whiskers-left,
.whiskers-right {
	border: 2px solid #666;
	height: 2vmin;
	width: 6vmin;
	border-radius: 100%;
	border-color: #666 transparent transparent;
	top: 5vmin;
	position: absolute;
	left: -2vmin;
}
.whiskers-right {
	transform: rotateY(180deg);
	left: 6.75vmin;
}
.whiskers-left:before, .whiskers-right:before,
.whiskers-left:after, .whiskers-right:after {
	border: 2px solid #666;
	height: 2vmin;
	width: 6vmin;
	border-radius: 100%;
	border-color: #666 transparent transparent;
	top: 0.75vmin;
	position: absolute;
	left: 0;
	content: "";
	transform: rotate(-7.5deg);
}
.whiskers-left:after, .whiskers-right:after {
	top: 1.55vmin;
	transform: rotate(-17.5deg);
}
.mouth {
	border: 0.15vmin solid transparent;
	width: 1vmin;
	height: 1vmin;
	border-radius: 200% 0 100% 100%;
	top: 6.35vmin;
	left: 4.45vmin;
	position: absolute;
	border-color: transparent #828282 #828282 #828282;
}
.mouth:before {
	content: "";
	border: 0.15vmin solid transparent;
	width: 1vmin;
	height: 1vmin;
	border-radius: 0 200% 100% 100%;
	top: -0.15vmin;
	left: 1.05vmin;
	position: absolute;
	border-color: transparent #828282 #828282 #828282;
}
.theeth {
	background: #fff;
	border: 1px solid #c1c1c1;
	height: 1.25vmin;
	border-radius: 0 0 0.15vmin 0.15vmin;
	position: absolute;
	width: 1vmin;
	box-sizing: border-box;
	top: 1.15vmin;
	border-top-color: transparent;
	left: 0.15vmin;
}

.theeth:before {
	content: "";
	background: #fff;
	border: 1px solid #c1c1c1;
	height: 1.25vmin;
	border-radius: 0 0 0.15vmin 0.15vmin;
	position: absolute;
	width: 1vmin;
	box-sizing: border-box;
	top: -0.1vmin;
	left: 0.725vmin;
	border-top-color: transparent;
}
.body {
	background: radial-gradient(circle at center 7vmin,	#9e9e9e 0%,	#c1c1c1 50%,	#fff 51%,	#fff 100%);
	width: 9vmin;
	height: 6vmin;
	border-radius: 20vmin 20vmin 75% 75%;
	position: absolute;
	top: 9vmin;
	left: 1.05vmin;
}
.body:before, .body:after {
	content: "";
	width: 2vmin;
	height: 4vmin;
	position: absolute;
	background: white;
	border-radius: 70% 50% 100% 100%;
	left: -0.05vmin;
	transform: rotate(-10deg);
	top: 3vmin;
	border-right: 1px solid #00000040;
	border-left: 1px solid #00000040;
}
.body:after {
	left: 6.75vmin;
	transform: rotate(10deg);
}
label {
	top: -18vmin;
	width: 30vmin;
	height: 6vmin;
	position: absolute;
	border-radius: 48%;
	left: 0;
	cursor: pointer;
	padding: 1vmin;
	transform: rotate(50deg);
	transform-origin: right;
	z-index: 2;
	animation: magic-show 3s 0s 1;
	transf.........完整代码请登录后点击上方下载按钮下载查看