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 { width: 20vmin; height: 21.3vmin; background: #000; top: -33.8vmin; left: -17.7vmin; transform: rotate(-3deg); border-radius: 13vmin 0 0 0.5vmin; } .hair-1::before { width: 10vmin; height: 7vmin; background: #000; top: -0.2vmin; left: 12.5vmin; transform: rotate(-42deg); border-radius: 0 4vmin 0 0; } .hair-1::after { width: 5vmin; height: 5vmin; background: #000; top: 2.4vmin; left: 19vmin; transform: rotate(3deg); } .hair-2 { width: 2.5vmin; height: 2vmin; background: #fff; top: -58.2vmin; left: -5.8vmin; transform: rotate(-20deg); } .hair-2::before { width: 0.5vmin; height: 2vmin; background: #fff; top: 1.2vmin; left: 2.1vmin; transform: rotate(-30deg); border-radius: 0 0 30% 40%; } .hair-2::after { width: 2vmin; height: 2vmin; background: #fff; left: 0.6vmin; transform: rotate(20deg); } .hair-3 { width: 15vmin; height: 15vmin; background: #000; top: -33.5vmin; left: 4.2vmin; transform: rotate(10deg); border-radius: 0 9vmin 0 0; box-shadow: -0.4vmin -0.8vmin 0 0.1vmin #000; } .hair-3::before { width: 2vmin; height: 4vmin; background: #000; top: -1.5vmin; left: 7.9vmin; transform: rotate(-45deg); } .face-1 { width: 10vmin; height: 5vmin; background: #000; top: -8.5vmin; left: -24.1vmin; transform: rotate(-8deg); } .face-1::before { width: 6vmin; height: 8vmin; background: #000; top: 3vmin; left: 2.5vmin; transform: rotate(-26deg); } .face-1::after { width: 15vmin; height: 10vmin; background: #000; top: 5.5vmin; left: 5.4vmin; transform: rotate(25deg); } .face-2 { width: 10vmin; height: 12.7vmin; background: #000; top: 7.2vmin; left: 6vmin; transform: rotate(3deg); border-radius: 0 0 10vmin 0; } .face-2::before { width: 14vmin; height: 8vmin; background: #fff; top: 1vmin; left: -9.5vmin; border-radius: 0 0 0 10vmin; } .face-2::after { width: 13.5vmin; height: 5vmin; background: #fff; top: 4.6vmin; left: -7.2vmin; transform: rotate(12deg); border-radius: 50%; } .face-3 { width: 5vmin; height: 2.5vmin; background: #fff; top: 11.6vmin; left: 4.2vmin; transform: skewX(-50deg); border-radius: 0 0.4vmin 1vmin 5vmin; } .face-3::before { width: 12vmin; height: 8vmin; background: #fff; top: -8vmin; left: -9.3vmin; transform: skewX(34deg); } .face-3::after { width: 1vmin; height: 3.9vmin; background: #000; top: -3.6vmin; left: 3.4vmin; transform: skewX(35deg); border-radius: 0 45% 0 50%; } .face-4 { width: 10vmin; height: 11vmin; background: #fff; top: -2vmin; left: -12.7vmin; transform: rotate(-4deg); border-radius: 0 0 0 7.5vmin; box-shadow: 5vmin -7vmin 0 2.5vmin #fff; } .face-4::before { width: 4vmin; height: 8.1vmin; background: #fff; top: -8vmin; left: -0.6vmin; transform: rotate(4deg); border-radius: 2vmin 0 0 1vmin; } .face-4::after { width: 5vmin; height: 4.8vmin; background: #fff; top: -12.3vmin; left: 0.8vmin; transform: rotate(6deg); } .face-5 { width: 1.3vmin; height: 5vmin; background: #000; top: -32.7vmin; left: -22.5vmin; transform: rotate(4deg); border-radius: 0% 100% 100% 0%/50% 50% 50% 50%; } .face-5::before { width: 15.8vmin; height: 3.7vmin; background: #fff; top: -4vmin; left: 0.3vmin; transform: rotate(-3deg); border-radius: 47% 53% 0% 100%/100% 30% 70% 0%; } .face-5::after { width: 12vmin; height: 1vmin; background: #fff; top: -0.8vmin; left: 0.9vmin; transform: rotate(-4deg); box-shadow: 3.2vmin 1.5vmin 0 1.1vmin #fff; } .face-6 { width: 2vmin; height: 7.2vmin; background: #fff; top: -35.4vmin; left: 11vmin; transform: rotate(-30deg); border-radius: 0 0.4vmin 0.5vmin 0; box-shadow: -1.3vmin 1vmin 0 0.1vmin #fff; } .face-6::before { width: 5vmin; height: 8vmin; background: #fff; top: 4vmin; left: -3.9vmin; transform: rotate(30deg); border-radius: 0 2vmin 0 0; } .face-6::after { width: 6vmin; height: 3vmin; background: #fff; top: 11.3vmin; left: -5vmin; transform: rotate(30deg); } .ear-1 { width: 0.6vmin; height: 2vmin; background: #fff; top: -11.6vmin; left: -35.1vmin; border-radius: 0 1vmin 0 0; box-shadow: 2.1vmin 5vmin 0 0.1vmin #fff; } .ear-1::before { width: 2vmin; height: 4vmin; background: #fff; top: 2.4vmin; left: -0.4vmin; transform: rotate(-40deg); } .ear-1::after { width: 5vmin; height: 2.2vmin; background: #fff; top: 3.8vmin; left: -0.2vmin; transform: skewX(8deg); border-radius: 0 0 0.8vmin 0; } .ear-2 { width: 1.5vmin; height: 3vmin; background: #fff; top: -7.8vmin; left: -30.8vmin; transform: rotate(-35deg); border-radius: 0.4vmin 0 0 0; } .ear-2::before { width: 0.6vmin; height: 2.3vmin; background: #fff; top: -1.7vmin; left: 0.5vmin; transform: rotate(35deg); border-radius: 0 0 0 0.5vmin; } .ear-2::after { width: 0.9vmin; height: 0.9vmin; background: #fff; top: -1.8vmin; left: 1.2vmin; transform: rotate(-5deg); border-radius: 0.3vmin 0 0 0vmin; } .ear-3 { width: 1vmin; height: 2vmin; background: #fff; top: -11.5vmin; left: -30.8vmin; transform: rotate(-50deg); box-shadow: -0.4vmin 0.2vmin 0 0.1vmin #fff; } .ear-3::before { width: 2vmin; height: 3.1vmin; background: #fff; top: 1.5vmin; left: -1vmin; border-radius: 0 0 100% 0; } .eye-left-1 { width: 3.4vmin; height: 1.1vmin; background: #000; top: -24.6vmin; left: -6.6vmin; border-radius: 0 1vmin 0 0; } .eye-left-1::before { width: 1vmin; height: 2vmin; background: #fff; top: -1.1vmin; left: -0.2vmin; transform: rotate(65deg); box-shadow: 2.7vmin -2.3vmin 0 0.01vmin #fff; } .eye-left-1::after { width: 1.5vmin; height: 0.5vmin; background: #fff; top: 1vmin; left: -0.2vmin; border-radius: 0 0.2vmin 0 0; } .eye-left-2 { width: 4.5vmin; height: 1vmin; background: #000; top: -20.4vmin; left: -7vmin; transform: skewX(55deg); } .eye-left-2::before { width: 1vmin; height: 2vmin; background: #fff; top: -0.1vmin; left: 3.9vmin; transform: skewX(-55deg) rotate(52deg); box-shadow: -4vmin 3.4vmin 0 0.1vmin #fff; } .eye-left-2::after { width: 3.1vmin; height: 1vmin; background: #fff; top: 0.6vmin; left: -0.3vmin; transform: skewX(-55deg); border-radius: 0.8vmin 0.7vmin 0 0; } .eye-left-3 { width: 1.4vmin; height: 1.2vmin; background: #000; top: -19.7vmin; left: -6.8vmin; transform: skewX(5deg); border-radius: 0 0 1vmin 0.8vmin; } .eye-left-3::before { width: 1vmin; height: 0.5vmin; background: #000; top: -0.1vmin; left: 1vmin; transform: rotate(10deg); } .eye-left-3::after { width: 0.8vmin; height: 1.7vmin; background: #000; left: -2.3vmin; transform: rotate(50deg); border-radius: 0 0 0.5vmin 0.5vmin; } .eye-right-1 { width: 5.3vmin; height: 4.7vmin; background: #000; top: -21.8vmin; left: 10.3vmin; transform: skewX(-5deg); border-radius: 3vmin 1.4vmin 0 0; } .eye-right-1::before { width: 5vmin; height: 1vmin; background: #fff; left: -1.5vmin; transform: rotate(-38deg); } .eye-right-1::after { width: 4vmin; height: 2vmin; background: #fff; top: 3.3vmin; left: -2vmin; transform: rotate(40deg); } .eye-right-2 { width: 2.6vmin; height: 3vmin; background: #fff; top: -18.4vmin; left: 9.3vmin; transform: rotate(40deg); border-radius: 1vmin 0 0 0; } .eye-right-2::before { width: 3vmin; height: 2vmin; background: #fff; top: 0.1vmin; left: 1.5vmin; transform: rotate(8deg); border-radius: 1vmin 0 0 0; } .eye-right-2::after { width: 2vmin; height: 1.4vmin; background: #fff; top: 1.2vmin; left: -0.4vmin; transform: skewX(-15deg) skewY(-10deg); border-radius: 0.5vmin 0 0 0; } .eye-right-3 { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0