纯css绘制佛莱迪·摩克瑞人物效果
代码语言:html
所属分类:布局界面
代码描述:纯css绘制佛莱迪·摩克瑞人物效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
/* Generic */
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: flex-end;
overflow: hidden;
background-image: linear-gradient(135deg, #070437, black);
}
.main {
position: relative;
width: 60vw;
height: 45vw;
}
.filter {
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(110deg, #04021f 32%, transparent 50%);
z-index: 4000;
}
.light {
position: absolute;
top: 0;
left: 50vw;
width: 50vw;
height: 100vh;
z-index: 2000;
transform: skewX(20deg) translate(-30%);
background-image: linear-gradient(to bottom, rgba(236, 232, 214, 0.15), rgba(236, 232, 214, 0.035), transparent);
filter: blur(2vw);
z-index: 5000;
}
@media (max-width: 600px) {
.light {
left: 30vw;
width: 70vw;
}
}
.micro-a {
position: absolute;
top: 10.5vw;
right: 27vw;
height: 5vw;
width: 5vw;
border-radius: 50%;
border-top: 0.2vw solid #ECE8D6;
background-image: linear-gradient(to bottom, #070437, #010107);
z-index: 50;
}
.micro-b {
position: absolute;
top: 12vw;
right: 30vw;
height: 2.8vw;
width: 15vw;
background-image: linear-gradient(-5deg, #010107, #070437 3.3vw, #ECE8D6 3.3vw, #ECE8D6 3.5vw, transparent 3.5vw);
border-top-left-radius: 1vw;
border-bottom-left-radius: 1vw;
}
.face {
position: absolute;
right: 7vw;
top: 6.5vw;
width: 21vw;
height: 17vw;
z-index: 50;
}
.face-i {
position: absolute;
transform-origin: bottom right;
}
.face-i:nth-of-type(1) {
top: 0.1vw;
right: 1.2vw;
width: 4vw;
height: 2.4vw;
transform: skewX(55deg);
background-image: linear-gradient(to bottom, #ECE8D6 0.6vw, #E1006D 0.6vw);
border-right: 0.3vw solid #a70659;
z-index: 100;
}
.face-i:nth-of-type(2) {
top: 2.4vw;
right: -.2vw;
width: 4.4vw;
height: 1.6vw;
transform: skewX(45deg);
background-image: linear-gradient(45deg, #C30065 0.6vw, #E1006D 0.6vw);
border-right: 0.3vw solid #a70659;
z-index: 100;
}
.face-i:nth-of-type(3) {
top: 4vw;
right: 0vw;
width: 4.5vw;
height: 1.6vw;
transform: skewX(-10deg);
background-color: #C30065;
border-right: 0.3vw solid #a70659;
z-index: 100;
}
.face-i:nth-of-type(4) {
top: 5.6vw;
right: 6.3vw;
width: 4.5vw;
height: 9vw;
transform: skewX(-35deg);
overflow: hidden;
background-color: #E1006D;
z-index: 100;
}
.face-i:nth-of-type(4)::before {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 80%;
height: 100%;
transform-origin: top right;
transform: skewY(35deg);
background-color: #aa0058;
}
.face-i:nth-of-type(4)::after {
content: '';
position: absolute;
bottom: 20%;
left: 10%;
width: 30%;
height: 100%;
transform-origin: bottom right;
transform: skewX(-20deg) skewY(-50deg);
background-color: #aa0058;
}
.face-i:nth-of-type(5) {
top: 1.7vw;
right: 9.6vw;
width: 7vw;
height: 12.9vw;
transform: skewX(-30deg);
overflow: hidden;
background-color: #E1006D;
}
.face-i:nth-of-type(5)::before {
content: '';
position: absolute;
bottom: 40%;
right: -20%;
width: 90%;
height: 15%;
transform-origin: top right;
transform: skewX(-30deg);
background-color: #C30065;
}
.face-i:nth-of-type(6) {
top: 0.1vw;
right: 5.4vw;
width: 4vw;
height: 1vw;
transform: skewX(-40deg);
border-left: 0.8vw solid #ECE8D6;
background-image: linear-gradient(to bottom, #ECE8D6 0.6vw, #E1006D 0.6vw);
}
.face-i:nth-of-type(7) {
top: 1vw;
right: 8.3vw;
width: 5.2vw;
height: 1.5vw;
transform: skewX(10deg);
border-top-left-radius: 0.4vw;
border-top: 0.15vw solid #ECE8D6;
border-left: 0.2vw solid #ECE8D6;
background-image: linear-gradient(-45deg, #E1006D 3vw, #ECE8D6 3vw);
z-index: 100;
}
.face-i:nth-of-type(8) {
top: 1vw;
right: 15.4vw;
width: 4vw;
height: 11.8vw;
transform: skewX(-30deg);
border-top-left-radius: 0.4vw;
background-color: #E1006D;
}
.face-i:nth-of-type(9) {
top: 12.2vw;
right: 16.4vw;
width: 4.1vw;
height: 2.5vw;
transform: skewY(30deg);
border-top-left-radius: 0.4vw;
background-image: linear-gradient(5deg, #ECE8D6 10%, #a70659 10%, #a70659 20%, #8e054c);
}
.face-i:nth-of-type(10) {
top: 10.4vw;
right: 17.15vw;
width: 3.5vw;
height: 1.9vw;
transform: skewX(20deg);
border-top-left-radius: 1.1vw;
border-bottom-left-radius: 0.2vw;
background-image: linear-gradient(to right, #ECE8D6 15%, #a70659 15%);
}
.face-i:nth-of-type(11) {
top: 8.5vw;
right: 16.93vw;
width: 4vw;
height: 1.6vw;
transform: skewY(-20deg);
border-top-left-radius: 0.4vw;
background-color: #E1006D;
border-top-right-radius: 0.5vw;
background-image: linear-gradient(-30deg, #E1006D 40%, #ECE8D6 40%);
}
.face-i:nth-of-type(12) {
top: 12.1vw;
right: 12.3vw;
width: 4.2vw;
height: 2.5vw;
transform: skewX(20deg);
background-color: #a70659;
}
.face-i:nth-of-type(12)::before {
content: '';
position: absolute;
top: -1.6vw;
height: 2.5vw;
width: 5vw;
background-color: #E1006D;
}
.face-i:nth-of-type(13) {
top: 1vw;
right: 5vw;
width: 4vw;
height: 1vw;
background-color: #E1006D;
}
.hair {
top: 5vw;
right: 1.5vw;
position: absolute;
height: 21vw;
width: 14vw;
}
.hair-i {
position: absolute;
transform-origin: bottom right;
}
.hair-i:nth-of-type(1) {
top: 1vw;
right: 2.5vw;
width: 5.1vw;
height: 2.4vw;
transform: skewX(55deg);
border-bottom-right-radius: 0.5vw;
background-color: #070437;
}
.hair-i:nth-of-type(2) {
top: 3.4vw;
right: 2vw;
width: 3vw;
height: 2.4vw;
transform: skewX(45deg);
background-color: #070437;
}
.hair-i:nth-of-type(3) {
top: 0.3vw;
right: -.9vw;
width: 19vw;
height: 17vw;
transform: rotateZ(-11deg);
border-top-left-radius: 5.5vw;
border-top-right-radius: 5.5vw;
border-bottom-right-radius: 7vw;
border-bottom: 0.1vw solid #dcd4b3;
background-image: linear-gradient(to bottom, #070437 60%, #04021f);
}
.hair-i:nth-of-type(4) {
top: 0vw;
right: 6vw;
width: 5.2vw;
height: 2vw;
border-top-left-radius: 5vw;
border-top-right-radius: 5vw;
border-left: 0.7vw solid #ECE8D6;
border-top: 0.3vw solid #ECE8D6;
border-right: 0.3vw solid #070437;
background-image: linear-gradient(to bottom, #1a156e, #070437);
}
.hair-i:nth-of-type(5) {
top: 1vw;
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0