css布局绘制一个时尚女性效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局绘制一个时尚女性效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { width: 100%; height: 100%; overflow: hidden; background: linear-gradient(90deg, #fff 50%, #000 50%); } 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: 40vmin; height: 40vmin; background: #000; top: -70vmin; left: -5.5vmin; transform: rotate(-15deg); border-radius: 15vmin 0 0 20%; } .hat-1::before { width: 25vmin; height: 8.5vmin; background: #000; top: 30.4vmin; left: -9.7vmin; transform: rotate(-16deg) skewX(55deg); border-radius: 0 0 0 6vmin; } .hat-2 { width: 14.2vmin; height: 10vmin; background: #ee1c25; top: -60.1vmin; left: 60.7vmin; transform: rotate(-14deg); border-radius: 0 100% 100% 0/100% 15% 85% 0; } .hat-2::before { width: 5vmin; height: 1vmin; background: #000; top: 0.1vmin; left: 11vmin; transform: rotate(25deg); } .hat-2::after { width: 5vmin; height: 1vmin; background: #000; top: 0.5vmin; left: 11.8vmin; transform: rotate(50deg); } .hat-3 { width: 7vmin; height: 14vmin; background: #000; top: -58vmin; left: 45.5vmin; transform: rotate(-16deg); border-radius: 0 100% 0 0; } .hat-3::before { width: 12vmin; height: 5vmin; background: #000; top: 8.5vmin; left: 6vmin; transform: rotate(-15deg); } .hat-3::after { width: 8vmin; height: 4vmin; background: #000; top: 7.2vmin; left: 11.5vmin; transform: rotate(-20deg); } .hat-4 { width: 8vmin; height: 4vmin; background: #000; top: -64.5vmin; left: 74vmin; transform: rotate(-42deg); } .hat-4::before { width: 4vmin; height: 2vmin; background: #000; top: -0.2vmin; left: 3vmin; transform: rotate(-10deg); } .hat-5 { z-index: 2; width: 15vmin; height: 10vmin; background: #000; top: -45vmin; left: -17.5vmin; transform: rotate(-38deg); } .ear { width: 2vmin; height: 10vmin; background: #fff; top: -34vmin; left: 43.5vmin; transform: rotate(10deg); border-radius: 1vmin 1.5vmin 0 0; } .ear::before { width: 3.3vmin; height: 9vmin; background: #fff; top: 4.5vmin; left: -1.2vmin; transform: rotate(3deg); border-radius: 40%; } .ear::after { width: 3vmin; height: 10vmin; background: #fff; top: 2vmin; left: -2vmin; } .earring { width: 3.8vmin; height: 3.8vmin; background: #f7941d; top: -17.8vmin; left: 41.1vmin; border-radius: 50%; overflow: hidden; } .earring::before { width: 4.2vmin; height: 4.2vmin; background: #fcb041; top: -0.5vmin; left: 1vmin; border-radius: 50%; } .face-1 { width: 15vmin; height: 6vmin; background: #fff; top: -51vmin; left: 22vmin; transform: rotate(-24deg); border-radius: 3vmin 0 0.5vmin 0; } .face-1::before { width: 5vmin; height: 10vmin; background: #fff; top: 4.3vmin; left: 8.5vmin; transform: rotate(20deg); border-radius: 0 0.5vmin 0 0; } .face-1::after { width: 2vmin; height: 3.5vmin; background: #000; top: 11vmin; left: 12.5vmin; transform: rotate(20deg); border-radius: 0 0 100% 0; } .face-2 { width: 8vmin; height: 13.4vmin; background: #fff; top: -9.6vmin; left: 27.3vmin; transform: rotate(8deg); border-radius: 0 0 4.8vmin 0; } .face-2::before { width: 15vmin; height: 8vmin; background: #fff; top: -7vmin; left: -7.4vmin; transform: rotate(6deg); } .face-2::after { width: 10vmin; height: 8vmin; background: #fff; top: -13vmin; left: -6vmin; } .face-3 { width: 12vmin; height: 5vmin; background: #fff; top: -42.8vmin; left: 4vmin; transform: rotate(-30deg); } .face-3::before { width: 10vmin; height: 2vmin; background: #000; top: -1.6vmin; left: -2vmin; transform: rotate(-6deg); } .face-3::after { width: 10vmin; height: 3vmin; background: #fff; top: 1.4vmin; left: -9vmin; transform: rotate(-9deg); } .face-4 { width: 4vmin; height: 3vmin; background: #fff; top: -23.8vmin; left: -24vmin; transform: rotate(-32deg); } .face-4::before { width: 20vmin; height: 20vmin; background: #fff; top: 1vmin; left: 3vmin; } .face-4::after { width: 30vmin; height: 8.7vmin; background: #fff; top: 26.6vmin; left: -8vmin; transform: rotate(-10deg); border-radius: 50%; } .face-5 { width: 20vmin; height: 12vmin; background: #fff; top: 12vmin; left: 9vmin; transform: rotate(-40deg); } .face-5::before { width: 2vmin; height: 5.7vmin; background: #000; top: 9vmin; left: 21.7vmin; transform: rotate(19deg); border-radius: 21%; } .face-5::after { width: 5vmin; height: 5vmin; background: #000; top: 10vmin; left: 23vmin; transform: rotate(10deg); } .shirt { width: 10vmin; height: 14vmin; background: #fff; top: 55.5vmin; left: -5vmin; transform: rotate(-21deg); } .shirt::before { width: 25vmin; height: 35vmin; background: #000; top: 9.5vmin; left: -2.9vmin; transform: rotate(10deg); border-radius: 12vmin 0 0 0; } .shirt::after { width: 5vmin; height: 2vmin; background: #000; top: 9vmin; left: 8vmin; transform: rotate(-15deg); } .eyebrow-1 { width: 12vmin; height: 7vmin; background: #000; top: -47.5vmin; left: 21.5vmin; transform: rotate(-23deg) skewX(-4deg); border-radius: 1vmin 5vmin 2vmin 80%; } .eyebrow-1::before { width: 13.5vmin; height: 6vmin; background: #000; top: -0.5vmin; left: -2.6vmin; transform: rotate(0deg) skewX(4deg); border-radius: 50%; } .eyebrow-1::after { width: 7vmin; height: 10vmin; background: #fff; top: 0.6vmin; left: -3.2vmin; transform: rotate(-35deg); } .eyebrow-2 { width: 9vmin; height: 7vmin; background: #fff; top: -46.8vmin; left: 24.9vmin; transform: rotate(-15deg); border-radius: 5vmin 9vmin 5vmin 80%; } .eyebrow-2::before { width: 9.5vmin; height: 4vmin; background: #fff; top: 0.1vmin; left: -3vmin; transform: rotate(-10deg); border-radius: 50%; } .eyebrow-2::after { width: 1vmin; height: 1.6vmin; background: #000; top: -0.3vmin; left: -2.6vmin; transform: rotate(-40deg); border-radius: 50%; } .eye { width: 11.9vmin; height: 5.2vmin; background: #000; top: -40.7vmin; left: 19vmin; transform: rotate(1deg); border-radius: 100%; } .eye::before { width: 14vmin; height: 5vmin; background: #fff; top: -0.5vmin; left: -0.7vmin; transform: rotate(-7deg); border-radius: 100%; } .eye::after { width: 3vmin; height: 3vmin; background: #fff; top: 1.4vmin; left: 10vmin; transform: rotate(35deg); } .eye-inner-1 { z-index: 2; width: 6vmin; height: 2.75vmin; background: #000; top: -1.9vmin; left: -2.5vmin; transform: rotate(-16deg) skewX(-40deg); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0