css+div布局实现带太阳镜的女孩头像效果代码
代码语言:html
所属分类:布局界面
代码描述:css+div布局实现带太阳镜的女孩头像效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { width: 100%; height: 100%; background: #f9b341; 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 { width: 30vmin; height: 30vmin; background: #0e3a6b; top: -81vmin; left: 34vmin; border-radius: 50%; } .hair-1::before { width: 40vmin; height: 25vmin; background: #0171bb; left: -21.8vmin; border-radius: 50%; } .hair-1::after { width: 35vmin; height: 56vmin; background: #0e3a6b; top: 13.5vmin; left: -2.9vmin; transform: rotate(-13deg) skewX(2deg); border-radius: 50%; } .hair-2 { width: 22vmin; height: 25vmin; background: #0e3a6b; top: 28.8vmin; left: 25.8vmin; transform: rotate(10deg) skewX(3deg); border-radius: 50%; } .hair-2::before { width: 36vmin; height: 42.5vmin; background: #0171bb; top: -42.6vmin; left: -40.5vmin; border-radius: 50%; } .hair-2::after { width: 20vmin; height: 26vmin; background: #0171bb; top: -13.2vmin; left: -32.5vmin; transform: rotate(-52deg) skewX(10deg) skewY(5deg); border-radius: 50%; } .hair-3 { width: 40vmin; height: 25vmin; background: #0e3a6b; top: -85.5vmin; left: 5vmin; border-radius: 50%; } .hair-3::before { width: 25vmin; height: 40vmin; background: #0e3a6b; top: 4.6vmin; left: 0.1vmin; transform: skewX(4deg); border-radius: 30%; } .hair-3::after { width: 0.85vmin; height: 10vmin; background: #0171bb; top: 13vmin; left: 16.4vmin; border-radius: 1vmin; } .face-1 { width: 21.6vmin; height: 40vmin; background: #feead2; top: -21.5vmin; left: -25.2vmin; transform: skewY(-25deg); border-radius: 9vmin 50% 0 52%; } .face-1::before { width: 20vmin; height: 30vmin; background: #feead2; top: 31.3vmin; left: 3.2vmin; transform: skewX(4.5deg); border-radius: 0 0 0 100%; } .face-1::after { width: 8vmin; height: 10vmin; background: #0171bb; top: 54.6vmin; left: 16vmin; transform: skewY(45deg); } .face-2 { width: 27vmin; height: 30vmin; background: #0171bb; top: -32.6vmin; left: -3.9vmin; transform: rotate(-8deg) skewY(-5deg); border-radius: 0 100% 0 100%; } .face-2::before { width: 20vmin; height: 5vmin; background: #0171bb; top: -2vmin; transform: rotate(-1deg); border-radius: 50%; } .face-2::after { width: 3vmin; height: 0.5vmin; background: #0171bb; top: -0.7vmin; left: -0.05vmin; transform: rotate(-18deg); border-radius: 50%; } .face-3 { width: 22.3vmin; height: 30vmin; background: #0171bb; top: -11vmin; left: 18.7vmin; border-radius: 0 0 40% 0; } .face-3::before { width: 23vmin; height: 8vmin; background: #0171bb; top: -6.6vmin; left: -1vmin; transform: rotate(32deg); } .face-3::after { width: 10vmin; height: 10vmin; background: #0171bb; top: -10vmin; left: -6vmin; } .face-4 { width: 3vmin; height: 2vmin; background: #0171bb; top: -65vmin; left: -4vmin; transform: rotate(-20deg); } .face-4::before { width: 2.5vmin; height: 1vmin; background: #0171bb; left: 1.2vmin; transform: rotate(-30deg); } .face-4::after { width: 1vmin; height: 3vmin; background: #0171bb; top: -0.3vmin; left: 3vmin; transform: rotate(-8deg); } .face-5 { width: 4.5vmin; height: 2vmin; background: #0e3a6b; top: -66.3vmin; left: 3.9vmin; transform: rotate(35deg); border-radius: 50%; } .face-5::before { width: 10vmin; height: 17vmin; background: #0171bb; top: 30vmin; left: 24.8vmin; transform: rotate(-35deg); } .face-5::after { width: 18vmin; height: 24vmin; background: #0171bb; top: 20.7vmin; left: 25.1vmin; transform: rotate(-38deg) skewX(-7deg); border-radius: 0 0 57% 0; } .face-6 { width: 14vmin; height: 17vmin; background: #0171bb; top: 50vmin; left: 12.3vmin; } .face-6::before { width: 2vmin; height: 3.5vmin; background: #0171bb; top: -12.3vmin; left: -2.3vmin; transform: skewY(-15deg); border-radius: 2vmin 0 0 0; } .face-6::after { width: 4vmin; height: 2.05vmin; background: #0171bb; top: -9.45vmin; left: -4.2vmin; border-radius: 2vmin; } .face-7 { width: 6vmin; height: 7vmin; background: #feead2; top: 41vmin; left: -10vmin; } .face-7::before { width: 1.5vmin; height: 0.5vmin; background: #feead2; top: -10vmin; left: 3.35vmin; } .face-7::after { width: 7.8vmin; height: 5.5vmin; background: #feead2; top: 5.2vmin; border-radius: 0 0 67% 23%; } .face-8 { z-index: 2; width: 5.2vmin; height: 3.4vmin; background: #0171bb; top: 40.2vmin; left: -6.7vmin; border-radius: 50%; } .face-8::before { width: 10vmin; height: 3vmin; background: #0171bb; top: 1.6vmin; left: 1.4vmin; transform: rotate(16.5deg); } .face-8::after { width: 15.2vmin; height: 10vmin; background: #feead2; top: -30.5vmin; left: -11.1vmin; transform: skewX(1deg); border-radius: 0 65% 0 0; } .ear-right { width: 4.5vmin; height: 10vmin; background: #0171bb; top: -9.4vmin; left: 44.4vmin; transform: rotate(24deg); border-radius: 3vmin 3vmin 0 0; } .ear-right::before { width: 2.75vmin; height: 7.5vmin; background: #0171bb; top: 7.5vmin; left: 2.3vmin; transform: rotate(-15deg); border-radius: 3vmin; } .ear-right::after { width: 12vmin; height: 5vmin; background: #0e3a6b; top: 0.4vmin; left: -1.8vmin; transform: rotate(40deg); border-radius: 50%; } .ear-left { width: 3.7vmin; height: 14vmin; background: #feead2; top: -11.4vmin; left: -50.8vmin; transform: rotate(-15deg); border-radius: 50%; } .ear-left::before { width: 3.8vmin; height: 8.2vmin; background: #feead2; top: 10.5vmin; left: 0.7vmin; transform: rotate(4deg) skewY(-5deg); border-radius: 50%; } .ear-left::after { width: 2.1vmin; height: 4.5vmin; background: #feead2; top: 0.25vmin; left: 1.55vmin; transform: skewY(30deg); border-radius: 1vmin 2vmin 0 0; } .body-1 { width: 20vmin; height: 25vmin; background: #0171bb; top: 82vmin; left: 6.3vmin; } .body-1::before { width: 23vmin; height: 12vmin; background: #0171bb; top: 16.7vmin; left: 15vmin; transform: rotate(25deg); border-radius: 0 20% 0 0; } .body-1::after { width: 5vmin; height: 4vmin; background: #feead2; top: -1.2vmin; left: -3.75vmin; transform: rotate(26deg); } .body-2 { width: 9.8vmin; height: 20vmin; background: #feead2; top: 50vmin; left: -24vmin; transform: skewX(-4deg); } .body-2::before { width: 20vmin; height: 28vmin; background: #feead2; top: 13.55vmin; left: -1.35vmin; transform: skewX(25deg); } .body-2::after { width: 25vmin; height: 30vmin; background: #feead2; top: 10.8vmin; left: -17.6vmin; transform: skewX(4deg); } .body-3 { width: 27vmin; height: 17.5vmin; background: #f9b341; top: 57.7vmin; left: -59vmin; transform: rotate(3deg); border-radius: 0 0 100% 0; } .body-3::before { width: 5vmin; height: 10vmin; background: #feead2; top: -1.45vmin; left: 25.9vmin; } .body-4 { width: 10vmin; height: 7vmin; background: #0171bb; top: 80vmin; left: 25vmin; } .body-4::before { width: 15vmin; height: 10.5vmin; background: #f9b341; top: -0.5vmin; left: 5.5vmin; transform: skewX(-2deg); border-radius: 0 0 0 100%; } .body-5 { width: 80vmin; height: 10vmin; background: #f9b341; top: 116vmin; } .eyebrow-right-1 { width: 14.5vmin; height: 4vmin; background: #0e3a6b; top: -23.5vmin; left: 25vmin; transform: rotate(-5deg); border-radius: 50%; } .eyebrow-right-1::before { width: 5vmin; height: 2.5vmin; background: #0e3a6b; top: 1vmin; left: -2.2vmin; border-radius: 50%; } .eyebrow-r.........完整代码请登录后点击上方下载按钮下载查看
网友评论0