div+css布局绘制杰克船长头像效果代码
代码语言：html
所属分类：布局界面
代码描述：div+css布局绘制杰克船长头像效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
html,
body {
width: 100%;
height: 100%;
background: #fff;
overflow: hidden;
}
html *,
body * {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
box-sizing: border-box;
}
html *:before, html *:after,
body *:before,
body *:after {
content: "";
position: absolute;
}
.hat-1 {
width: 31vmin;
height: 20vmin;
background: #000;
top: -63vmin;
left: -1vmin;
border-radius: 37% 0 0 0;
}
.hat-1::before {
width: 3vmin;
height: 5vmin;
background: #000;
top: -2.2vmin;
left: 27vmin;
}
.hat-1::after {
width: 5.5vmin;
height: 3vmin;
background: #fff;
top: -2.7vmin;
left: 22.7vmin;
transform: skewX(-35deg) skewY(10deg);
border-radius: 0 0 30% 0;
}
.hat-2 {
width: 5.3vmin;
height: 4.7vmin;
background: #000;
top: -68vmin;
left: 32.5vmin;
border-radius: 0 0 5% 0;
}
.hat-2::before {
width: 7vmin;
height: 4vmin;
background: #fff;
transform: rotate(3deg);
border-radius: 50%;
}
.hat-2::after {
width: 3vmin;
height: 1vmin;
background: #fff;
top: 3vmin;
left: 3.9vmin;
transform: rotate(40deg);
}
.hat-3 {
width: 5vmin;
height: 3vmin;
background: #000;
top: -69vmin;
left: 29.7vmin;
transform: skewX(15deg);
border-radius: 50%;
}
.hat-3::before {
width: 5vmin;
height: 1vmin;
background: #fff;
top: -0.7vmin;
left: 3vmin;
}
.hat-3::after {
width: 4vmin;
height: 2vmin;
background: #000;
top: 2vmin;
left: -1.6vmin;
transform: skewX(15deg);
}
.hat-4 {
width: 5vmin;
height: 4.4vmin;
background: #000;
top: -71.2vmin;
left: 29.3vmin;
transform: skewX(10deg);
border-radius: 0 100% 30% 0;
}
.hat-4::before {
width: 5vmin;
height: 5vmin;
background: #fff;
top: -4vmin;
left: 1.1vmin;
transform: skewX(-22deg);
border-radius: 0 0 0 100%;
}
.hat-4::after {
width: 2vmin;
height: 2.5vmin;
background: #fff;
top: -6.4vmin;
left: 2.2vmin;
transform: skewX(-20deg);
}
.hat-5 {
width: 0.8vmin;
height: 3vmin;
background: #000;
top: -84.5vmin;
left: 25.8vmin;
transform: rotate(15deg);
border-radius: 50%;
}
.hat-5::before {
width: 7.2vmin;
height: 11vmin;
background: #000;
top: 2.6vmin;
left: 9.4vmin;
transform: rotate(-42deg);
}
.hat-5::after {
width: 10vmin;
height: 5vmin;
background: #fff;
top: 0.35vmin;
left: 6vmin;
transform: rotate(-4deg);
}
.hat-6 {
width: 3vmin;
height: 4.7vmin;
background: #000;
top: -65.6vmin;
left: 53.4vmin;
transform: rotate(-28deg);
border-radius: 50%;
}
.hat-6::before {
width: 0.95vmin;
height: 6vmin;
background: #fff;
top: -3.5vmin;
left: -5.5vmin;
transform: rotate(-4.5deg);
border-radius: 50%;
}
.hat-6::after {
width: 1.1vmin;
height: 5.4vmin;
background: #fff;
top: 1vmin;
left: -5.8vmin;
transform: rotate(10deg);
border-radius: 50%;
}
.hat-7 {
width: 5vmin;
height: 2vmin;
background: #fff;
top: -74vmin;
left: 39vmin;
}
.hat-7::before {
width: 1.35vmin;
height: 3.9vmin;
background: #fff;
top: 4.9vmin;
left: 8.2vmin;
transform: rotate(22deg);
border-radius: 2vmin;
}
.hat-7::after {
width: 1.3vmin;
height: 1.5vmin;
background: #fff;
top: 4.8vmin;
left: 8.75vmin;
transform: rotate(22deg);
border-radius: 50%;
}
.hat-8 {
width: 1.5vmin;
height: 6vmin;
background: #000;
top: -54vmin;
left: 49vmin;
transform: rotate(33deg);
}
.hat-8::before {
width: 2vmin;
height: 4vmin;
background: #fff;
top: -1.4vmin;
left: 1.5vmin;
border-radius: 1.4vmin 0 0 0;
}
.hat-8::after {
width: 2vmin;
height: 4vmin;
background: #fff;
top: -4vmin;
left: 1.65vmin;
transform: rotate(2.5deg);
}
.hat-9 {
width: 1vmin;
height: 5vmin;
background: #fff;
top: -57.6vmin;
left: 48.9vmin;
transform: rotate(30deg);
border-radius: 0 0 20% 10%;
}
.hat-9::before {
width: 1vmin;
height: 6vmin;
background: #fff;
left: 0.35vmin;
transform: rotate(5deg);
border-radius: 50%;
}
.hat-9::after {
width: 0.5vmin;
height: 3vmin;
background: #fff;
top: 4.7vmin;
left: 0.3vmin;
transform: rotate(13deg);
border-radius: 50%;
}
.hat-10 {
width: 1.1vmin;
height: 4vmin;
background: #000;
top: -49vmin;
left: 47vmin;
transform: rotate(22deg);
border-radius: 40% 0 0 0;
}
.hat-10::before {
width: 0.7vmin;
height: 2vmin;
background: #fff;
top: -0.8vmin;
left: -1vmin;
transform: rotate(30deg);
border-radius: 0 100% 0 0;
}
.hat-10::after {
width: 2vmin;
height: 5vmin;
background: #000;
top: 1.8vmin;
left: -0.25vmin;
transform: rotate(-16deg);
border-radius: 12% 0 0 60%;
}
.hat-11 {
width: 10vmin;
height: 4vmin;
background: #000;
top: -44.3vmin;
left: 36vmin;
transform: rotate(-23deg);
}
.hat-11::before {
width: 1.4vmin;
height: 3vmin;
background: #fff;
top: 3.95vmin;
left: 7.4vmin;
border-radius: 50%;
}
.hat-11::after {
width: 2vmin;
height: 4vmin;
background: #fff;
top: 5vmin;
left: 8.5vmin;
transform: rotate(55deg);
}
.hat-12 {
width: 4vmin;
height: 2vmin;
background: #fff;
top: -38vmin;
left: 46.5vmin;
}
.hat-12::before {
width: 10vmin;
height: 2vmin;
background: #fff;
top: -4vmin;
left: -7.5vmin;
transform: rotate(-26deg);
border-radius: 0 0 100% 0;
}
.hat-12::after {
width: 10vmin;
height: 2vmin;
background: #fff;
top: -5vmin;
left: -8.5vmin;
transform: rotate(-26deg);
border-radius: 0 0 30% 0;
}
.hat-13 {
width: 3vmin;
height: 13vmin;
background: #000;
top: -51.6vmin;
left: 29.3vmin;
transform: rotate(9deg);
}
.hat-13::before {
width: 2.5vmin;
height: 4.2vmin;
background: #000;
top: -0.5vmin;
left: 1.8vmin;
transform: rotate(14deg);
border-radius: 60% 0 50% 0;
}
.hat-13::after {
width: 2.5vmin;
height: 4.5vmin;
background: #fff;
top: -0.5vmin;
left: 3.3vmin;
transform: rotate(8deg);
border-radius: 100% 0 0 0;
}
.hat-14 {
width: 15vmin;
height: 6vmin;
background: #000;
top: -41vmin;
left: 14.5vmin;
transform: rotate(-3deg);
border-radius: 0 0 22% 0;
}
.hat-14::before {
width: 12vmin;
height: 5vmin;
background: #000;
top: 2.7vmin;
left: -7.7vmin;
transform: rotate(-25deg);
border-radius: 50%;
}
.hat-14::after {
width: 5vmin;
height: 5vmin;
background: #000;
top: 5vmin;
left: -7.8vmin;
transform: rotate(10deg) skewX(-35deg);
}
.hat-15 {
width: 13.5vmin;
height: 10vmin;
background: #000;
top: -30vmin;
left: -21.8vmin;
}
.hat-15::before {
width: 21vmin;
height: 5vmin;
background: #000;
top: -3vmin;
left: -1vmin;
}
.hat-15::after {
width: 21vmin;
height: 8vmin;
background: #000;
top: -0.4vmin;
left: -19.8vmin;
transform: rotate(-2deg) skewX(10deg);
border-radius: 15% 0 30.5% 60%;
}
.hat-16 {
width: 22vmin;
height: 7vmin;
background: #000;
top: -69.5vmin;
left: -27.2vmin;
transform: rotate(-32.3deg);
border-radius: 50%;
}
.hat-16::before {
width: 15vmin;
height: 5vmin;
background: #000;
top: 0.8vmin;
left: -5vmin;
transform: rotate(1deg);
border-radius: 20% 0 0 0;
}
.hat-16::after {
width: 20vmin;
height: 7vmin;
background: #000;
top: 0.9vmin;
left: -15vmin;
transform: rotate(-6deg);
border-radius: 50%;
}
.hat-17 {
width: 10vmin;
height: 3vmin;
background: #000;
top: -42.8vmin;
left: -67.6vmin;
transform: rotate(-34deg);
border-radius: 50%;
}
.hat-17::before {
width: 20vmin;
height: 10vmin;
background: #000;
top: 2vmin;
left: 7vmin;
}
.hair-1 {
width: 15vmin;
height: 20vmin;
background: #000;
top: -12vmin;
left: -23.5vmin;
transform: rotate(12deg);
border-radius: 0 20% 0 10%;
}
.hair-1::before {
width: 20.2vmin;
height: 20vmin;
background: #000;
top: 15vmin;
left: 1.1vmin;
transform: rotate(-8.5deg);
border-radius: 10% 0 0 0;
}
.hair-1::after {
width: 10vmin;
height: 22vmin;
background: #000;
top: 0.6vmin;
left: 9.35vmin;
transform: rotate(-24deg) skewY(10deg);
}
.hair-2 {
width: 6.5vmin;
height: 20vmin;
background: #000;
top: -11.5vmin;
left: 48vmin;
transform: skewY(-5deg);
border-radius: 0 50% 0 0;
}
.hair-2::before {
width: 7vmin;
height: 2vmin;
background: #000;
top: 1.6vmin;
left: 2.2vmin;
transform: rotate(34deg) skewX(-30deg);
}
.hair-2::after {
width: 3.5vmin;
height: 1vmin;
background: #000;
top: 4.6vmin;
left: 7.3vmin;
transform: rotate(50deg) skewX(40deg) skewY(-5deg);
border-radius: 0 100% 0 0;
}
.hair-3 {
width: 2.2vmin;
height: 4.8vmin;
background: #000;
top: -19vmin;
left: 57.8vmin;
transform: rotate(-26deg) skewY(-50deg);
border-radius: 0 0 100% 0;
}
.hair-3::before {
width: 1.5vmin;
height: 3vmin;
background: #000;
top: -2.5vmin;
left: -0.5vmin;
}
.hair-3::after {
width: 2.3vmin;
height: 10vmin;
background: #fff;
top: -1.8vmin;
left: -2.1vmin;
transform: rotate(2deg);
border-radius: 50%;
}
.hair-4 {
width: 1vmin;
height: 7.8vmin;
background: #fff;
top: -10vmin;
left: 55.1vmin;
transform: rotate(-3deg);
}
.hair-4::before {
width: 8.1vmin;
height: 15vmin;
background: #000;
top: 5vmin;
left: -7.6vmin;
transform: rotate(-12deg);
border-radius: 50% 0 0 0;
}
.hair-4::after {
width: 10vmin;
height: 17vmin;
background: #000;
top: 10vmin;
left: -10vmin;
transform: rotate(20deg);
border-radius: 0 50% 0 0;
}
.hair-5 {
width: 15vmin;
height: 5.4vmin;
background: #000;
top: 29vmin;
left: 20vmin;
}
.hair-5::before {
width: 8vmin;
height: 15vmin;
background: #000;
top: -9vmin;
left: -5.9vmin;
transform: rotate(-40deg);
}
.hair-5::after {
width: 5vmin;
height: 3vmin;
background: #000;
top: 0.5vmin;
left: -6vmin;
}
.hair-6 {
width: 10vmin;
height: 13vmin;
background: #000;
top: 28vmin;
left: 50.5vmin;
transform: rotate(-6.5deg);
border-radius: 0 20% 0 0;
}
.hair-6::before {
width: 30vmin;
height: 16vmin;
background: #000;
top: 10vmin;
left: -20vmin;
}
.hair-6::after {
width: 27vmin;
height: 12vmin;
background: #000;
top: 4vmin;
left: -23vmin;
}
.hair-7 {
width: 1.4vmin;
height: 5vmin;
background: #fff;
top: 34.4vmin;
left: -0.3vmin;
transform: rotate(-25deg);
border-radius: 2vmin;
}
.hair-7::before {
width: 1vmin;
height: 5vmin;
background: #fff;
top: 1.1vmin;
left: -0.2vmin;
transform: rotate(-3deg);
border-radius: 50%;
}
.hair-7::after {
width: 1.7vmin;
height: 6vmin;
background: #fff;
top: 2.2vmin;
left: 0.05vmin;
transform: rotate(-9deg);
border-radius: 40% 0 0 0;
}
.hair-8 {
width: 10vmin;
height: 15vmin;
background: #fff;
top: 55.3vmin;
left: 19.5vmin;
transform: rotate(-11.5deg) skewX(10deg);
border-radius: 0 0 0 100%;
}
.hair-8::before {
width: 1vmin;
height: 2vmin;
background: #fff;
top: 0.1vmin;
left: -0.2vmin;
transform: rotate(-16deg);
}
.hair-8::after {
width: 10vmin;
height: 15vmin;
background: #000;
top: 0.8vmin;
left: 1.7vmin;
transform: rotate(-1deg);
border-radius: 0 0 0 100%;
}
.hair-9 {
width: 12vmin;
height: 1.5vmin;
background: #000;
top: 41vmin;
left: 19vmin;
transform: rotate(-12deg) skewX(20deg);
}
.hair-9::before {
width: 3vmin;
height: 6vmin;
background: #fff;
top: 10.6vmin;
left: 0.5vmin;
transform: rotate(-11deg) skewY(20deg);
}
.hair-9::after {
width: 2vmin;
height: 5vmin;
background: #fff;
top: 14vmin;
left: 0.15vmin;
transform: rotate(12deg);
}
.hair-10 {
width: 2.8vmin;
height: 3vmin;
background: #fff;
top: 37.5vmin;
left: 15.8vmin;
transform: skewX(10deg);
border-radius: 50%;
}
.hair-10::before {
width: 2.5vmin;
height: 3vmin;
background: #fff;
top: 1.3vmin;
left: 1.1vmin;
transform: rotate(-43deg);
}
.hair-10::after {
width: 2vmin;
height: 3.4vmin;
background: #000;
top: 0.3vmin;
left: 3vmin;
transform: rotate(-34deg);
border-radius: 50%;
}
.hair-11 {
width: 1.5vmin;
height: 3vmin;
background: #fff;
top: 44vmin;
left: 20.6vmin;
}
.hair-11::before {
width: 0.6vmin;
height: 2.5vmin;
background: #000;
top: -0.2vmin;
left: 1vmin;
transform: rotate(2deg);
border-radius: 0 0 0 100%;
}
.hair-11::after {
width: 1.1vmin;
height: 8vmin;
background: #fff;
top: 2.3vmin;
left: 1vmin;
transform: rotate(-8deg);
}
.hair-12 {
width: 1.5vmin;
height: 2vmin;
background: #fff;
top: 47.1vmin;
left: 19.8vmin;
transform: skewX(45deg);
border-radius: 30% 0 40% 0;
}
.hair-12::before {
width: 0.4vmin;
height: 6.5vmin;
background: #fff;
top: 2.4vmin;
left: -4vmin;
transform: skewX(-45deg) rotate(-16deg);
}
.hair-12::after {
width: 1vmin;
height: 1.5vmin;
background: #000;
top: 2.2vmin;
left: -2vmin;
}
.hair-13 {
width: 0.4vmin;
height: 3vmin;
background: #fff;
top: 53.6vmin;
left: 18.8vmin;
transform: rotate(-16deg);
border-radius: 50%;
}
.hair-13::before {
width: 1vmin;
height: 3vmin;
background: #fff;
top: 3.2vmin;
left: 0.3vmin;
transform: skewY(45deg);
}
.hair-13::after {
width: 0.5vmin;
height: 2vmin;
background: #000;
top: 1vmin;
left: 0.5vmin;
transform: rotate(5deg);
border-radius: 50%;
}
.hair-14 {
width: 1.3vmin;
height: 3vmin;
background: #000;
top: 51.8vmin;
left: 20.9vmin;
transform: rotate(-16deg) skewX(5deg);
border-radius: 50%;
}
.hair-14::before {
width: 1.9vmin;
height: 0.7vmin;
background: #000;
top: 2.7vmin;
left: -0.6vmin;
transform: rotate(-55deg);
border-radius: 100% 0 10% 0;
}
.hair-14::after {
width: 1vmin;
height: 3vmin;
background: #000;
top: -0.45vmin;
left: 1.6vmin;
transform: rotate(10deg);
border-radius: 50%;
}
.hair-15 {
width: 3.4vmin;
height: 5.2vmin;
background: #000;
top: 65vmin;
left: 30.9vmin;
transform: rotate(-48deg);
border-radius: 50%;
}
.hair-15::before {
width: 1vmin;
height: 2.4vmin;
background: #000;
top: -1.5vmin;
left: 1vmin;
transform: rotate(10deg);
border-radius: 20% 0 0 0;
}
.hair-15::after {
width: 4vmin;
height: 6.5vmin;
background: #fff;
left: 1.1vmin;
transform: rotate(14deg);
border-radius: 50%;
}
.hair-16 {
width: 1vmin;
height: 2vmin;
background: #fff;
top: 69vmin;
left: 33.5vmin;
transform: skewX(20deg);
}
.hair-16::before {
width: 2.5vmin;
height: 9.5vmin;
background: #fff;
top: -15.3vmin;
left: 0.5vmin;
transform: skewX(-20deg) rotate(-5deg) skewY(7deg);
border-radius: 4vmin;
}
.hair-16::after {
width: 3vmin;
height: 5vmin;
background: #fff;
top: -7.4vmin;
left: -0.5vmin;
transform: rotate(-4deg);
border-radius: 20% 0 0 0;
}
.hair-17 {
width: 1vmin;
height: 6vmin;
background: #fff;
top: 47.7vmin;
left: 30vmin;
transform: skewY(45deg);
}
.hair-17::before {
width: 1vmin;
height: 3.5vmin;
background: #000;
top: -0.6vmin;
left: 0.75vmin;
transform: skewY(-45deg);
border-radius: 50%;
}
.hair-17::after {
width: 6vmin;
height: 8vmin;
background: #fff;
top: 2vmin;
left: 1.7vmin;
transform: skewY(-30deg);
}
.hair-18 {
width: 4vmin;
height: 1vmin;
background: #fff;
top: 52vmin;
left: 35vmin;
transform: rotate(55deg) skewX(35deg);
border-radius: 0 0 0 10vmin;
}
.hair-18::before {
width: 2vmin;
height: 4.7vmin;
background: #000;
top: 0.6vmin;
left: 0.9vmin;
transform: rotate(-35deg);
border-radius: 0 40% 0 0;
}
.hair-18::after {
width: 1.8vmin;
height: 0.55vmin;
background: #fff;
top: 1.65vmin;
left: 1vmin;
transform: rotate(-30deg);
border-radius: 1vmin 0 0 0.2vmin;
}
.hair-19 {
width: 0.5vmin;
height: 2vmin;
background: #fff;
top: 57vmin;
left: 34.5vmin;
}
.hair-19::before {
width: 1.1vmin;
height: 0.8vmin;
background: #fff;
top: 0.95vmin;
left: -0.6vmin;
transform: rotate(40deg) skewY(-20deg);
border-radius: 40% 0 0 20%;
}
.hair-19::after {
width: 1.3vmin;
height: 3vmin;
background: #fff;
top: 1.8vmin;
left: -0.55vmin;
border-radius: 50%;
}
.hair-20 {
width: 0.8vmin;
height: 1.7vmin;
background: #000;
top: 61.3vmin;
left: 32.6vmin;
border-radius: 50%;
}
.hair-20::before {
width: 0.8vmin;
height: 1.5vmin;
background: #000;
top: 0.5vmin;
left: -0.4vmin;
border-radius: 50%;
}
.hair-20::after {
width: 1.5vmin;
height: 0.4vmin;
background: #fff;
top: 2.1vmin;
left: -0.7vmin;
transform: rotate(35deg);
}
.hair-21 {
width: 0.6vmin;
height: 1.45vmin;
background: #000;
top: 55.8vmin;
left: 31.5vmin;
border-radius: 50%;
}
.hair-21::before {
width: 0.6vmin;
height: 1.1vmin;
background: #fff;
top: 2.2vmin;
left: -0.15vmin;
border-radius: 50%;
}
.hair-21::after {
width: 3vmin;
height: 1vmin;
background: #fff;
top: -1.1vmin;
left: 1.5vmin;
transform: rotate(14deg);
border-radius: 0 0 0 100%;
}
.hair-22 {
width: 0.8vmin;
height: 1.4vmin;
background: #fff;
top: 47.5vmin;
left: 37.6vmin;
border-radius: 1vmin;
}
.hair-22::before {
width: 1.7vmin;
height: 4vmin;
background: #fff;
left: 0.55vmin;
transform: rotate(-26deg);
border-radius: 30% 35% 0 0;
}
.hair-22::after {
width: 1.5vmin;
height: 3vmin;
background: #fff;
top: 2vmin;
left: 0.8vmin;
}
.hair-23 {
width: 4vmin;
height: 2vmin;
background: #fff;
top: 25.5vmin;
left: 45.2vmin;
transform: rotate(52deg);
border-radius: 0 3vmin 0 2.6vmin;
}
.hair-23::before {
width: 3.3vmin;
height: 1.5vmin;
background: #fff;
top: -0.25vmin;
left: 0.1vmin;
transform: skewX(-5deg);
border-radius: 50%;
}
.hair-23::after {
width: 0.5vmin;
height: 2.3vmin;
background: #fff;
top: 0.1vmin;
left: 3.4vmin;
transform: rotate(-23deg);
border-radius: 50%;
}
.hair-24 {
width: 0.6vmin;
height: 2vmin;
background: #fff;
top: 31vmin;
left: 46.2vmin;
}
.hair-24::before {
width: 1vmin;
height: 1.9vmin;
background: #fff;
top: 1vmin;
left: -0.3vmin;
border-radius: 50%;
}
.hair-24::after {
width: 1vmin;
height: 1vmin;
background: #fff;
top: 0.25vmin;
left: -0.25vmin;
transform: rotate(45deg);
border-radius: 0 100% 0 0;
}
.hair-25 {
width: 1vmin;
height: 1vmin;
background: #fff;
top: 33.5vmin;
left: 45.7vmin;
transform: rotate(40deg);
border-radius: 0 100% 0 50%;
}
.hair-25::before {
width: 1vmin;
height: 1.2vmin;
background: #000;
top: -0.3vmin;
left: -0.65vmin;
border-radius: 50%;
}
.hair-25::after {
width: 0.9vmin;
height: 2.6vmin;
background: #fff;
top: 1vmin;
left: 1.1vmin;
transform: rotate(-36deg);
border-radius: 1vmin 0 0 1vmin;
}
.hair-26 {
width: 1vmin;
height: 1.3vmin;
background: #000;
top: 37.7vmin;
left: 44.5vmin;
transform: skewY(15deg);
border-radius: 0 20% 80% 0;
}
.hair-26::before {
width: 3.5vmin;
height: 2vmin;
background: #fff;
top: 3.2vmin;
transform: rotate(40deg);
border-radius: 0 2vmin 0 60%;
}
.hair-26::after {
width: 1.2vmin;
height: 0.4vmin;
background: #000;
top: 2.5vmin;
left: 1.1vmin;
transform: rotate(35deg);
border-radius: 50%;
}
.hair-27 {
width: 2vmin;
height: 1vmin;
background: #fff;
top: 47.1vmin;
left: 39.2vmin;
border-radius: 10%;
}
.hair-27::before {
width: 2vmin;
height: 1vmin;
background: #fff;
top: -1vmin;
left: 1vmin;
transform: rotate(-45deg);
border-radius: 50%;
}
.hair-27::after {
width: 3.5vmin;
height: 14vmin;
background: #fff;
left: 1.4vmin;
transform: rotate(-26deg);
border-radius: 100% 0 0 0;
}
.hair-28 {
width: 2vmin;
height: 4vmin;
background: #fff;
top: 52vmin;
left: 46.6vmin;
}
.hair-28::before {
width: 2vmin;
height: 2.2vmin;
background: #fff;
top: 2.2vmin;
left: 0.5vmin;
transform: rotate(40deg);
border-radius: 0 0.5vmin 0 0;
}
.hair-28::after {
width: 2.2vmin;
height: 4vmin;
background: #fff;
top: 3vmin;
left: 0.1vmin;
transform: rotate(15deg);
}
.hair-29 {
width: 1.4vmin;
height: 3.7vmin;
background: #000;
top: 58.3vmin;
left: 49.6vmin;
transform: rotate(16deg);
border-radius: 50%;
}
.hair-29::before {
width: 1.5vmin;
height: 2.5vmin;
background: #000;
top: -0.2vmin;
left: -2vmin;
transform: skewY(48deg);
border-radius: 0 0 0 25%;
}
.hair-29::after {
width: 0.5vmin;
height: 2.8vmin;
background: #fff;
top: 0.5vmin;
left: -0.6vmin;
border-radius: 50%;
}
.hair-30 {
width: 1.7vmin;
height: 1vmin;
background: #000;
top: 54vmin;
left: 47vmin;
transform: rotate(45deg) skewX(20deg);
border-radius: 50%;
}
.hair-30::before {
width: 1.8vmin;
height: 1vmin;
background: #000;
top: 0.6vmin;
left: -1.2vmin;
transform: rotate(24deg);
border-radius: 50%;
}
.hair-30::after {
width: 2.85vmin;
height: 1.6vmin;
background: #000;
top: -1.25vmin;
left: -4.4vmin;
transform: rotate(55deg);
border-radius: 50%;
}
.hair-31 {
width: 1.2vmin;
height: 2vmin;
background: #000;
top: 52vmin;
left: 45.5vmin;
border-radius: 0 50% 0 30%;
}
.hair-31::before {
width: 1.8vmin;
height: 0.9vmin;
background: #000;
top: 0.05vmin;
left: 0.15vmin;
transform: rotate(30deg);
border-radius: 0 50% 50% 0;
}
.hair-31::after {
width: 1.3vmin;
height: 1.3vmin;
background: #000;
top: -1.6vmin;
transform: rotate(50deg);
border-radius: 0 20% 0 0;
}
.hair-32 {
width: 1.2vmin;
height: 2vmin;
background: #000;
top: 49.4vmin;
left: 44.8vmin;
}
.hair-32::before {
width: 1.7vmin;
height: 1.4vmin;
background: #000;
top: -1.7vmin;
left: -0.2vmin;
transform: rotate(20deg);
border-radius: 0 20% 0 0;
}
.hair-32::after {
width: 1.5vmin;
height: 0.7vmin;
background: #000;
top: -1.8vmin;
left: 0.15vmin;
transform: rotate(18deg) skewX(-20deg);
border-radius: 50%;
}
.shirt-1 {
width: 4vmin;
height: 15vmin;
background: #fff;
top: 50vmin;
left: 66vmin;
transform: rotate(-5deg);
border-radius: 50%;
}
.shirt-1::before {
width: 5vmin;
height: 5vmin;
background: #000;
top: 19.5vmin;
left: -4.35vmin;
border-radius: 50%;
}
.shirt-1::after {
width: 4vmin;
height: 8vmin;
background: #000;
top: 14vmin;
left: -5.5vmin;
transform: rotate(-16deg);
}
.shirt-2 {
width: 16vmin;
height: 15.5vmin;
background: #000;
top: 62.3vmin;
left: 63vmin;
transform: rotate(60deg) skewX(22deg);
border-radius: 0 50% 30% 70%;
}
.shirt-2::before {
width: 8.5vmin;
height: 1.2vmin;
background: #fff;
top: 14.6vmin;
left: 3.4vmin;
transform: rotate(8deg);
border-radius: 50%;
}
.shirt-2::after {
width: 5.5vmin;
height: 1.5vmin;
background: #000;
top: -0.2vmin;
left: 5vmin;
transform: rotate(4deg);
border-radius: 50%;
}
.shirt-3 {
width: 1.6vmin;
height: 7vmin;
background: #fff;
top: 51vmin;
left: 70vmin;
transform: rotate(-2.5deg);
border-radius: 0 0 30% 45%;
}
.shirt-3::before {
width: 2vmin;
height: 9vmin;
background: #fff;
top: -4.8vmin;
left: -1vmin;
transform: rotate(-14deg);
border-radius: 0 0 60% 0;
}
.shirt-3::after {
width: 1.5vmin;
height: 1.8vmin;
background: #fff;
top: -4vmin;
left: -3vmin;
}
.shirt-4 {
width: 1.6vmin;
height: 12vmin;
background: #fff;
top: 59vmin;
left: 65.2vmin;
transform: rotate(-10deg);
border-radius: 30% 20% 50% 50%;
}
.shirt-4::before {
width: 1vmin;
height: 4vmin;
background: #000;
top: 9.7vmin;
left: 1vmin;
transform: rotate(24deg);
}
.shirt-4::after {
width: 0.75vmin;
height: 4.7vmin;
background: #fff;
top: -4vmin;
left: 0.5vmin;
transform: rotate(8deg);
}
.shirt-5 {
width: 0.9vmin;
height: 2vmin;
background: #000;
top: 40vmin;
left: 64.2vmin;
transform: rotate(-9deg);
border-radius: 50% 50% 0 0;
}
.shirt-5::before {
width: 0.6vmin;
height: 4vmin;
background: #fff;
top: 2vmin;
left: -0.65vmin;
transform: rotate(-4deg);
}
.shirt-5::after {
width: 17vmin;
height: 20vmin;
background: #000;
top: -17vmin;
left: -54.3vmin;
transform: rotate(32deg);
}
.shirt-6 {
width: 9.2vmin;
height: 5vmin;
background: #000;
top: 60.8vmin;
left: -50.2vmin;
transform: skewY(8deg);
border-radius: 15% 0 30% 2.2vmin;
}
.shirt-6::before {
width: 3vmin;
height: 4vmin;
background: #000;
top: -0.4vmin;
left: 9vmin;
}
.shirt-6::after {
width: 2.3vmin;
height: 3.6vmin;
background: #fff;
top: 0.15vmin;
left: 9.2vmin;
border-radius: 1vmin 60% 0 0;
}
.shirt-7 {
width: 2vmin;
height: 8vmin;
background: #fff;
top: 20vmin;
left: -44.1vmin;
border-radius: 50%;
}
.shirt-7::before {
width: 15vmin;
height: 25vmin;
background: #000;
top: 10vmin;
left: 10vmin;
transform: rotate(-30deg);
border-radius: 0 0 0 20%;
}
.shirt-7::after {
width: 1.5vmin;
height: 1.5vmin;
background: #000;
top: 25.7vmin;
left: 4.75vmin;
transform: rotate(40deg) skewY(10deg);
border-radius: 0 0 40% 50%;
}
.shirt-8 {
width: 10vmin;
height: 5vmin;
background: #000;
top: 60.8vmin;
left: -26vmin;
}
.shirt-8::before {
width: 10vmin;
height: 7vmin;
background: #000;
top: 3.5vmin;
left: 2.9vmin;
transform: skewX(20deg);
border-radius: 0 0 0 5%;
}
.shirt-8::after {
width: 2.7vmin;
height: 10vmin;
background: #fff;
top: 4.4vmin;
left: 1vmin;
transform: rotate(-10deg);
border-radius: 50%;
}
.shirt-9 {
width: 4.5vmin;
height: 17vmin;
background: #000;
top: 44vmin;
left: -49.3vmin;
transform: rotate(34deg);
border-radius: 50%;
}
.shirt-9::before {
width: 10vmin;
height: 5vmin;
background: #000;
top: 8.5vmin;
left: 1vmin;
transform: rotate(-34deg);
}
.shirt-9::after {
width: 2vmin;
height: 15vmin;
background: #fff;
top: 1vmin;
left: -1.5vmin;
transform: rotate(5deg);
border-radius: 50%;
}
.shirt-10 {
width: 26vmin;
height: 4.2vmin;
background: #000;
top: 83.2vmin;
left: 8.2vmin;
transform: rotate(-2deg) skewX(10deg);
border-radius: 5vmin;
}
.shir.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0