css+div布局实现万圣节无脸人鬼魂效果代码-html代码-BFW代码库

css+div布局实现万圣节无脸人鬼魂效果代码

代码语言：html

代码描述：css+div布局实现万圣节无脸人鬼魂效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        body {
	margin:0;
	padding:0
}
#wrap {
	height:100vh;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	background:linear-gradient(to bottom,#27bcc4 0,#81d4e2 36%,#54b1d3 45%,#0a93c9 47%,#2989d8 49%,#2396dd 74%,#7db9e8 100%)
}
.kaonashi {
	position:relative;
	height:550px;
	width:227px;
	overflow:hidden;
	animation:move 2s linear infinite alternate
}
.kaonashi .head {
	position:absolute;
	left:47px;
	width:130px;
	height:200px;
	background-color:rgba(0,0,0,0.9);
	border-radius:60% 60% 55% 55%/55% 55% 70% 70%;
	z-index:10;
	transform-style:preserve-3d;
	transform-origin:50%;
	perspective:50px;
	transition:transform 1s
}
.kaonashi .head::after {
	content:" ";
	top:19px;
	left:15px;
	position:absolute;
	width:100px;
	height:163px;
	border-radius:55% 55% 55% 55%/55% 55% 70% 70%;
	box-shadow:inset -15px 0 1px rgba(0,0,0,0.1);
	background-color:#fff
}
.kaonashi .head .eye {
	position:absolute;
	top:78px;
	left:23px;
	width:25px;
	height:15px;
	background-color:black;
	border-radius:100% 100% 100% 100%/90% 100% 90% 100%;
	transform:scale3d(1,1,1);
	transform-style:preserve-3d;
	transition:transform 1s;
	z-index:20
}
.kaonashi .head .eye::before {
	content:" ";
	position:absolute;
	top:-35px;
	left:6px;
	width:14px;
	height:27px;
	background-color:#695573;
	opacity:.8;
	border-radius:130% 70% 90% 90%/130% 100% 70% 70%
}
.kaonashi .head .eye::after {
	content:" ";
	position:absolute;
	top:29px;
	left:5px;
	width:14px;
	height:41px;
	background-color:#695573;
	opacity:.8;
	border-radius:100% 140% 30% 250%/60% 100% 30% 200%
}
.kaonashi .head .eye .shadow {
	width:20px;
	height:7px;
	background-color:#6c6c6c;
	margin-top:18px;
	margin-left:2px;
	border-radius:50% 50% 100% 100%/50% 50% 200% 200%.........完整代码请登录后点击上方下载按钮下载查看