css布局绘制教授头像效果代码
代码语言:html
所属分类:布局界面
代码描述: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; } .hair-1 { z-index: 2; width: 16vmin; height: 30vmin; background: #000; top: -25.5vmin; left: 40.2vmin; transform: rotate(34deg); border-radius: 4.5vmin 11vmin 10vmin 0; } .hair-1::before { width: 17vmin; height: 17vmin; background: #000; top: -1vmin; left: -16.8vmin; transform: rotate(34deg); border-radius: 7.5vmin 0 10vmin 0; } .hair-1::after { width: 12vmin; height: 6vmin; background: #000; top: 10.7vmin; left: -10vmin; transform: rotate(-32deg); border-radius: 50%; } .hair-2 { z-index: 2; width: 10vmin; height: 1.5vmin; background: #fff; top: -74.3vmin; left: 21.5vmin; transform: rotate(-8deg); } .hair-2::before { width: 4vmin; height: 1vmin; background: #fff; top: 0.65vmin; left: 5vmin; transform: rotate(10deg); } .hair-3 { z-index: 2; width: 10vmin; height: 4vmin; background: #000; top: -43.4vmin; left: 5vmin; transform: rotate(14deg); } .hair-3::before { width: 25.5vmin; height: 12vmin; background: #000; top: -9.8vmin; left: -18.7vmin; transform: rotate(-30deg); border-radius: 100%; box-shadow: 4vmin 4vmin 0 0 #000; } .hair-3::after { width: 5vmin; height: 2.5vmin; background: #000; top: -12.4vmin; left: -0.4vmin; border-radius: 100% 0 100% 0; } .hair-4 { z-index: 4; width: 10vmin; height: 14.2vmin; background: #000; top: -28.5vmin; left: -12vmin; border-radius: 0 3vmin 10vmin 0; } .hair-4::before { width: 20vmin; height: 10vmin; background: #000; top: -8vmin; left: -16.3vmin; transform: rotate(-71deg); border-radius: 1vmin 100% 0 0; box-shadow: -4vmin 5vmin 0 2vmin #000; } .hair-4::after { width: 5vmin; height: 16vmin; background: #000; top: 3vmin; left: -14.8vmin; transform: rotate(6deg); border-radius: 2vmin 0 0 0; } .hair-5 { z-index: 4; width: 10vmin; height: 7.8vmin; background: #000; top: -7.5vmin; left: -30vmin; transform: rotate(-1deg); border-radius: 0 0 2vmin 0; box-shadow: -3vmin -2vmin 0 0 #000; } .hair-5::before { width: 10vmin; height: 15vmin; background: #000; top: -0.5vmin; left: -7.8vmin; border-radius: 0 0 0 1vmin; transform: rotate(15deg) skewY(49deg); } .hair-5::after { width: 14.5vmin; height: 25vmin; background: #000; top: 7vmin; left: -5.8vmin; border-radius: 0 0 0 9vmin; } .hair-6 { width: 8vmin; height: 4vmin; background: #000; top: 47vmin; left: -40.4vmin; border-radius: 0 0 0 74%; } .hair-6::before { width: 5vmin; height: 1.4vmin; background: #fff; top: 2.4vmin; left: 0.4vmin; transform: rotate(43deg); border-radius: 0.6vmin 0 0 2vmin; } .hair-6::after { width: 2.5vmin; height: 1vmin; background: #fff; top: 2.9vmin; left: 0.2vmin; transform: rotate(10deg); } .hair-7 { width: 5vmin; height: 5.8vmin; background: #000; top: 37.8vmin; left: -48.2vmin; border-radius: 0 0 0 62%; } .hair-7::before { width: 3vmin; height: 1.2vmin; background: #fff; top: 0.9vmin; left: -1vmin; transform: rotate(30deg); border-radius: 0 40% 20% 90%; } .hair-7::after { width: 1.3vmin; height: 2.5vmin; background: #000; top: 0.6vmin; left: 1.5vmin; transform: rotate(-10deg); } .hair-8 { z-index: 4; width: 3vmin; height: 2vmin; background: #fff; top: 31.3vmin; left: -53vmin; transform: rotate(-25deg); } .hair-8::before { width: 5.2vmin; height: 4.7vmin; background: #000; top: -2.7vmin; left: -0.6vmin; transform: rotate(3deg) skewY(15deg); border-radius: 0 0 0 4.5vmin; } .hair-8::after { width: 5vmin; height: 3.4vmin; background: #fff; top: -3.2vmin; left: -0.6vmin; transform: rotate(45deg); border-radius: 50%; } .hair-9 { z-index: 4; width: 4vmin; height: 4vmin; background: #fff; top: 24.8vmin; left: -58vmin; transform: skewY(15deg); } .hair-9::before { width: 2.6vmin; height: 2vmin; background: #000; top: 0.7vmin; left: 3.9vmin; transform: skewY(-15deg); border-radius: 50%; } .hair-9::after { width: 2vmin; height: 3.4vmin; background: #fff; top: 0.2vmin; left: 3.1vmin; transform: skewY(-15deg) rotate(55deg); border-radius: 50%; } .hair-10 { z-index: 4; width: 4.5vmin; height: 4vmin; background: #000; top: 21.7vmin; left: -54vmin; border-radius: 0 0 50% 0; } .hair-10::before { width: 4.5vmin; height: 4vmin; background: #fff; top: -0.2vmin; left: -1vmin; transform: skewX(-5deg); border-radius: 0 0 52% 0; } .hair-10::after { width: 2.7vmin; height: 0.5vmin; background: #fff; top: 3.4vmin; left: -0.9vmin; transform: rotate(-8deg); border-radius: 50%; } .hair-11 { z-index: 4; width: 4.5vmin; height: 5vmin; background: #000; top: 17.8vmin; left: -53.4vmin; border-radius: 0 0 90% 0; } .hair-11::before { width: 5.1vmin; height: 6vmin; background: #fff; top: -0.9vmin; left: -1.8vmin; transform: rotate(1deg); border-radius: 0 0 75% 0; } .ear-1 { z-index: 4; width: 5.6vmin; height: 2.8vmin; background: #fff; top: 1vmin; left: -41.6vmin; transform: rotate(-27deg) skewX(-25deg); border-radius: 1vmin 0.4vmin 1vmin 0; } .ear-1::before { width: 5vmin; height: 3.4vmin; background: #fff; top: 2.7vmin; border-radius: 0 35% 0 50%; } .ear-1::after { width: 5vmin; height: 0.9vmin; background: #fff; top: 6.1vmin; left: -1.2vmin; transform: rotate(55deg) skewX(55deg); border-radius: 0.5vmin 0 0 0.5vmin; } .ear-2 { z-index: 4; width: 4.7vmin; height: 8vmin; background: #fff; top: 16.6vmin; left: -37.1vmin; border-radius: 0 50% 0 50%; } .ear-2::before { width: 2.2vmin; height: 1vmin; background: #000; top: 6.8vmin; left: 1.8vmin; transform: rotate(-30deg); border-radius: 100%; } .ear-2::after { width: 2.4vmin; height: 1.5vmin; background: #fff; top: 5.8vmin; left: 1.8vmin; border-radius: 100%; } .ear-3 { z-index: 4; width: 2vmin; height: 2vmin; background: #fff; top: 13.3vmin; left: -42vmin; border-radius: 50%; } .ear-3::before { width: 3vmin; height: 2.5vmin; background: #000; top: 4.8vmin; left: 1vmin; border-radius: 0 100% 0 0; } .ear-3::after { width: 1.2vmin; height: 2.7vmin; background: #000; top: 3.4vmin; left: 0.6vmin; transform: rotate(-42deg); } .ear-4 { z-index: 4; width: 2vmin; height: 5vmin; background: #000; top: 5.4vmin; left: -42vmin; transform: rotate(10deg); border-radius: 30% 0 0 50%; } .ear-4::before { width: 1.8vmin; height: 5vmin; background: #fff; top: 0.1vmin; left: 1vmin; transform: rotate(5deg); border-radius: 50%; } .ear-5 { z-index: 4; width: 2.3vmin; height: 1.5vmin; background: #000; top: 16.8vmin; left: -37.6vmin; border-radius: 0 100% 55% 90%; } .ear-5::before { width: 2.4vmin; height: 1.5vmin; background: #fff; top: -0.2vmin; left: 0.2vmin; transform: skewX(16deg); border-radius: 0 100% 55% 90%; } .ear-6 { z-index: 4; width: 0.8vmin; height: 3.9vmin; background: #000; top: 13vmin; left: -41.2vmin; transform: rotate(-30deg); border-radius: 0 0 100% 0; } .ear-6::before { width: 0.4vmin; height: 4.8vmin; background: #fff; top: -0.8vmin; left: -0.15vmin; transform: rotate(2deg); border-radius: 50%; } .ear-7 { z-index: 4; width: 1.7vmin; height: 3.2vmin; background: #000; top: 5.9vmin; left: -38vmin; transform: rotate(-30deg); border-radius: 1.1vmin 0 0 1.2vmin; } .ear-7::before { width: 0.4vmin; height: 1.5vmin; background: #000; top: 2.4vmin; left: 0.75vmin; transform: rotate(-55deg); border-radius: 50%; } .ear-8 { z-index: 4; width: 0.9vmin; height: 1.8vmin; background: #000; top: 11.7vmin; left: -37.4vmin; transform: rotate(15deg); border-radius: 50%; } .ear-8::before { width: 1vmin; height: 1.9vmin; background: #fff; top: -0.45vmin; left: 0.3vmin; transform: rotate(-15deg); border-radius: 0 0 0 40%; } .ear-9 { z-index: 4; width: 2vmin; height: 1.7vmin; background: #000; top: 14.6vmin; left: -36.3vmin; border-radius: 40% 60% 0 50%; } .ear-9::after { width: 2.5vmin; height: 2vmin; background: #fff; top: 0.2vmin; left: -0.5vmin; transform: skewY(20deg) skewX(20deg) rotate(-12deg); border-radius: 0 100%; } .neck-1 { z-index: 4; width: 2.8vmin; height: 14vmin; background: #fff; top: 38.4vmin; left: -34vmin; } .neck-1::before { width: 10vmin; height: 1.5vmin; background: #000; top: 13.95vmin; left: -3.7vmin; transform: rotate(24deg); border-radius: 4vmin 0 0 2vmin; } .neck-1::after { width: 1.7vmin; height: 0.85vmin; background: #fff; top: 12.65vmin; left: -2.5vmin; transform: rotate(35deg); border-radius: 1vmin 0 0 1vmin; } .neck-2 { z-index: 4; width: 1vmin; height: 1.5vmin; background: #fff; top: 50.5vmin; left: -36.8vmin; transform: rotate(40deg); } .neck-2::before { width: 0.6vmin; height: 1.2vmin; background: #000; top: 0.15vmin; left: -0.35vmin; border-radius: 50%; } .neck-2::after { width: 0.7vmin; height: 12.6vmin; background: #000; top: -10.9vmin; left: -4.2vmin; transform: rotate(-40deg); border-radius: 0 60% 100% 0; } .neck-3 { z-index: 4; width: 8vmin; height: 1.15vmin; background: #fff; top: 54.2vmin; left: -32.5vmin; transform: rotate(26deg); border-radius: 52% 0 50% 10%; } .neck-3::before { width: 7vmin; height: 0.7vmin; background: #fff; top: -0.5vmin; left: 1.5vmin; } .beard-1 { z-index: 4; width: 5vmin; height: 14vmin; background: #000; top: 35vmin; left: -27.4vmin; border-radius: 0 0 0 20%; } .beard-1::before { width: 4.5vmin; height: 12vmin; background: #000; top: 10vmin; left: 2.5vmin; transform: rotate(-45deg); border-radius: 50%; } .beard-1::after { width: 1vmin; height: 2vmin; background: #000; top: 17vmin; left: 3.6vmin; transform: rotate(-5deg); } .beard-2 { width: 2vmin; height: 3vmin; background: #000; top: 60vmin; left: -24.5vmin; transform: rotate(50deg); } .beard-2::before { width: 11vmin; height: 16vmin; background: #000; top: -16vmin; left: -8vmin; transform: rotate(-80deg); } .beard-2::after { width: 26vmin; height: 12vmin; background: #000; top: -18.5vmin; left: -5.5vmin; transform: rotate(-50deg) skewX(-24deg); border-radius: 0 3vmin 3vmin 0; } .beard-3 { width: 1.5vmin; height: 10vmin; background: #000; top: 52vmin; left: 30.9vmin; transform: rotate(31deg); border-radius: 0 100% 15% 0; } .beard-3::before { width: 1.7vmin; height: 8vmin; background: #000; top: 4vmin; left: -0.1vmin; transform: rotate(-0.5deg); border-radius: 50%; } .beard-3::after { width: 7vmin; height: 1.1vmin; background: #000; top: 12.7vmin; left: -5.25vmin; transform: rotate(-31deg) skewX(-20deg); border-radius: 0 0 2vmin 0; } .beard-4 { width: 4vmin; height: 4vmin; background: #000; top: 63vmin; left: 12.5vmin; } .beard-4::before { width: 8vmin; height: 1.5vmin; background: #fff; top: 2.75vmin; left: 1.5vmin; transform: skewX(-25deg); border-radius: 2vmin 0 0 0; } .beard-4::after { width: 9.4vmin; height: 10vmin; background: #000; top: -17vmin; left: 5.1vmin; transform: rotate(18deg); } .beard-5 { width: 2vmin; height: 6vmin; background: #fff; top: 32vmin; left: 40.6vmin; transform: rotate(12deg); } .beard-5::before { width: 1vmin; height: 2vmin; background: #fff; top: 9vmin; left: -0.35vmin; transform: rotate(-1deg); } .beard-5::after { width: 1.5vmin; height: 5vmin; background: #000; top: 1.9vmin; left: -11.4vmin; transform: rotate(36deg); border-radius: 50%; } .beard-6 { width: 12vmin; height: 5.5vmin; background: #000; top: 36.5vmin; left: 12.8vmin; transform: skewX(-33deg); border-radius: 35% 0 0 0; } .beard-6::before { width: 5.5vmin; height: 1.2vmin; background: #fff; top: -0.1vmin; left: -0.6vmin; border-radius: 100% 0; } .beard-6::after { width: 2vmin; height: 2vmin; background: #000; top: -1.2vmin; left: 6vmin; } .shirt-1 { width: 12vmin; height: 6vmin; background: #000; top: 61.6vmin; left: -37vmin; transform: rotate(35deg); border-radius: 0 0 100% 0; } .shirt-1::before { width: 1vmin; height: 6vmin; background: #fff; left: -0.55vmin; transform: rotate(-1deg); border-radius: 50%; } .shirt-1::after { width: 7.5vmin; height: 2.5vmin; background: #000; top: -0.7vmin; left: 3vmin; transform: rotate(-12deg); } .shirt-2 { width: 17.5vmin; height: 4vmin; background: #000; top: 69.5vmin; left: -5.4vmin; border-radius: 50%; } .shirt-2::before { width: 20vmin; height: 5vmin; background: #000; top: -2vmin; left: -3vmin; } .shirt-2::after { width: 5vmin; height: 4vmin; background: #fff; left: 16.3vmin; transform: skewX(-26deg); border-radius: 1vmin 0 0 0; } .shirt-3 { width: 1.2vmin; height: 8.4vmin; background: #000; top: 65.1vmin; left: -55.4vmin; transform: rotate(47deg); border-radius: 50%; } .shirt-3::before { width: 2vmin; height: 7vmin; background: #000; top: 1.4vmin; left: 1.1vmin; transform: rotate(10deg) skewY(-15deg); border-radius: 0 0 100% 0; } .shirt-3::after { width: 2vmin; height: 1vmin; background: #fff; top: 8.35vmin; left: -0.5vmin; transform: rotate(5deg); } .shirt-4 { width: 10vmin; height: 4vmin; background: #000; top: 64.2vmin; left: -46vmin; border-radius: 80% 0 0 0; } .shirt-4::before { width: 2vmin; height: 2vmin; background: #000; top: -0.2vmin; left: 2.7vmin; border-radius: 20% 0 0 0; } .shirt-4::after { width: 20.7vmin; height: 3.2vmin; background: #fff; top: 2.8vmin; left: 2.8vmin; transform: rotate(2deg); border-radius: 50%; } .shirt-5 { width: 1vmin; height: 2vmin; background: #fff; top: 68.8vmin; left: -50vmin; transform: rotate(62deg); border-radius: 30%; } .face-1 { z-index: 2; width: 11.5vmin; height: 30vmin; background: #fff; top: -10vmin; left: 33.4vmin; transform: rotate(2deg) skewY(-10deg); border-radius: 50%; } .face-1::before { width: 2vmin; height: 8vmin; background: #fff; top: 13vmin; left: 9.7vmin; transform: rotate(-4deg); } .face-1::after { width: 14vmin; height: 18vmin; background: #fff; top: 1.8vmin; left: -6.5vmin; transform: skewY(-5deg); } .face-2 { width: 12vmin; height: 5vmin; background: #e6e6e6; top: -40vmin; left: 12.2vmin; transform: rotate(18deg); border-radius: 0 0 50% 0; } .face-2::before { width: 5vmin; height: 3vmin; background: #e6e6e6; top: 2.5vmin; left: -2.3vmin; transform: rotate(-18deg); } .face-3 { z-index: 3; width: 9vmin; height: 1vmin; background: #e6e6e6; top: -39.7vmin; left: 3.5vmin; transform: rotate(14deg); border-radius: 50%; } .face-3::before { width: 1.2vmin; height: 0.5vmin; background: #e6e6e6; top: 0.4vmin; left: 8.3vmin; transform: rotate(15deg); } .face-3::after { width: 6vmin; height: 12vmin; background: #e6e6e6; top: 2vmin; left: -2vmin; transform: rotate(-9deg); border-radius: 0 0 62% 0; } .face-4 { z-index: 3; width: 10vmin; height: 8vmin; background: #e6e6e6; top: -8.5vmin; left: -20.2vmin; transform: skewX(-30deg); } .face-4::before { width: 1.4vmin; height: 8.5vmin; background: #fff; top: -0.1vmin; left: 9.2vmin; transform: rotate(3deg); border-radius: 50%; } .face-5 { z-index: 4; width: 1vmin; height: 2vmin; background: #000; top: -1.1vmin; left: -22.2vmin; transform: rotate(45deg); border-radius: 50%; } .face-5::before { width: 5vmin; height: 5.5vmin; background: #e6e6e6; top: 1.55vmin; left: 0.8vmin; transform: rotate(2deg); border-radius: 0.2vmin 100% 0 65%; } .face-5::after { width: 16.5vmin; height: 7.8vmin; background: #e6e6e6; top: 2.5vmin; left: 1vmin; transform: rotate(29deg); border-radius: 0 0 35% 27%; } .face-6 { z-index: 3; width: 4vmin; height: 4vmin; background: #e6e6e6; left: -20.1vmin; transform: rotate(10deg); } .face-7 { width: 1.2vmin; height: 3.6vmin; background: #fff; top: 38.9vmin; left: -1.9vmin; transform: rotate(32deg); border-radius: 40%; } .face-8 { z-index: 5; width: 2.2vmin; height: 1vmin; background: #e6e6e6; top: 39.85vmin; left: -3.65vmin; transform: rotate(68deg); border-radius: 30% 50% 50% 50%; } .face-8::before { width: 2.5vmin; height: 1.1vmin; background: #e6e6e6; top: -0.2vmin; left: -0.35vmin; transform: skewX(20deg); border-radius: 65% 30% 50% 0; } .face-9 { z-index: 4; width: 6.5vmin; height: 3vmin; background: #e6e6e6; top: 32.7vmin; left: -11vmin; transform: skewX(-20deg); border-radius: 0 0 0 25%; } .face-9::before { width: 6vmin; height: 2vmin; background: #e6e6e6; top: 1.15vmin; left: 1.4vmin; transform: rotate(3deg); border-radius: 0 100% 0 0; } .face-9::after { width: 1.2vmin; height: 3.7vmin; background: #e6e6e6; top: 2.8vmin; left: 7.1vmin; transform: rotate(-16deg) skewX(20deg); border-radius: 50%; } .face-10 { z-index: 4; width: 0.5vmin; height: 1vmin; background: #e6e6e6; top: 36.4vmin; left: -5.8vmin; transform: rotate(-25deg); } .face-10::before { width: 2vmin; height: 4vmin; background: #fff; top: -2vmin; left: 0.7vmin; transform: rotate(-14deg); } .face-10::after { width: 1.5vmin; height: 3vmin; background: #fff; top: -3.5vmin; left: -0.1vmin; transform: rotate(-35deg); } .face-11 { z-index: 4; width: 3vmin; height: 5vmin; background: #fff; top: 4vmin; left: -13.45vmin; transform: rotate(2deg); border-radius: 20%; } .face-11::before { width: 4vmin; height: 5vmin; background: #fff; top: 4.2vmin; left: -1.85vmin; transform: skewX(10deg) rotate(-25deg); border-radius: 40% 0 0 0; } .face-11::after { width: 4vmin; height: 13.5vmin; background: #fff; top: 3vmin; left: 1.8vmin; transform: rotate(-25deg); border-radius: 30%; } .face-12 { z-index: 4; width: 1.5vmin; height: 4vmin; background: #fff; top: 6vmin; left: -16.5vmin; transform: rotate(30deg); } .face-12::before { width: 0.7vmin; height: 2.75vmin; background: #e6e6e6; top: 0.65vmin; left: -0.4vmin; border-radius: 50%; } .face-12::after { width: 6vmin; height: 2vmin; background: #fff; top: 6.5vmin; left: 2.2vmin; transform: rotate(35deg); } .face-13 { z-index: 4; width: 3vmin; height: 5.5vmin; background: #fff; top: 26.8vmin; left: -10.3vmin; transform: rotate(-23deg); border-radius: 0 0 0 50%; } .face-13::before { width: 7vmin; height: 1vmin; background: #e6e6e6; top: -18.05vmin; left: 5vmin; } .face-14 { z-index: 4; width: 2.5vmin; height: 3.5vmin; background: #fff; top: 25.5vmin; left: 23.5vmin; transform: rotate(-45deg); border-radius: 0 0 0 30%; } .face-14::before { width: 3.5vmin; height: 2.5vmin; background: #fff; top: 1.4vmin; left: 1.1vmin; transform: rotate(20deg); border-radius: 0 0 50% 50%; } .face-14::after { width: 3vmin; height: 5vmin; background: #fff; top: 3.2vmin; left: 2.45vmin; transform: rotate(23deg); border-radius: 0 0 0 25%; } .face-15 { z-index: 4; width: 3vmin; height: 1vmin; background: #fff; top: 25.5vmin; left: 29vmin; } .face-15::before { width: 2.2vmin; height: 6vmin; background: #fff; top: -0.65vmin; left: 4.25vmin; transform: rotate(10deg); border-radius: 50%; } .face-15::after { width: 2.8vmin; height: 1.5vmin; background: #fff; top: 3vmin; left: 2.8vmin; transform: rotate(43deg); } .face-16 { z-index: 4; width: 1vmin; height: 17.4vmin; background: #000; top: 11vmin; left: 41.7vmin; transform: rotate(10.5deg); border-radius: 10%; } .face-16::before { width: 1vmin; height: 17.6vmin; background: #fff; top: -0.1vmin; left: -0.15vmin; border-radius: 10%; } .mouth-1 { z-index: 4; width: 10vmin; height: 5.7vmin; background: #fff; top: 42vmin; left: 13.2vmin; transform: skewX(-25deg); border-radius: 2.5vmin 2vmin 0 1vmin; } .mouth-1::before { width: 7vmin; height: 5.7vmin; background: #fff; left: 6.7vmin; transform: skewX(29deg); border-radius: 0 2.2vmin 0.7vmin 0; } .mouth-1::after { width: 6vmin; height: 0.7vmin; background: #fff; top: -0.7vmin; left: 3.5vmin; transform: skewX(25deg); } .mouth-2 { z-index: 4; width: 5vmin; height: 1vmin; background: #000; top: 35.4vmin; left: 14.9vmin; border-radius: 0 0 100% 0; } .mouth-2::before { width: 5vmin; height: 1vmin; background: #000; top: 0.1vmin; left: 4.8vmin; border-radius: 0 0 0 100%; } .mouth-2::after { wi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0