css布局实现人脸形建筑塔效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现人脸形建筑塔效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --stone: #ed6f33; --shadow: #964d1a; --base: #6d350f; --background: #e2d9d6; } body { margin: 0; padding: 0; min-height: 400px; height: 100vh; position: relative; background-color: var(--background); text-align: center; } #artsakh { position: absolute; left: 50%; top: 50%; box-shadow: 0px 5px 0px 0px var(--base); width: 622px; height: 451px; margin-left: -320px; margin-top: -230px; } #artsakh:before, #artsakh:after { display: block; content: ""; position: absolute; background-repeat: no-repeat; width: 100%; bottom: 0; left: 0; } /* Grandfather / papik */ #artsakh:before { height: 100%; width: 32%; right: 0; left: auto; background-image: radial-gradient(ellipse at 50% -10%, transparent 40%, var(--shadow) 40%, var(--shadow) 60%, transparent 60%), radial-gradient(ellipse at 50% -10%, transparent 40%, var(--shadow) 40%, var(--shadow) 60%, transparent 60%), linear-gradient(to right, var(--shadow) 20%, transparent 20%, transparent 80%, var(--shadow) 80%), linear-gradient(to right, var(--shadow) 45%, transparent 45%, transparent 55%, var(--shadow) 55%), linear-gradient(54deg, transparent 30%, var(--shadow) 30%, var(--shadow) 35%, transparent 35%), linear-gradient(-54deg, transparent 30%, var(--shadow) 30%, var(--shadow) 35%, transparent 35%), linear-gradient(to right, var(--shadow) 13%, transparent 13%, transparent 87%, var(--shadow) 87%), linear-gradient(to right, var(--shadow) 0 100%), linear-gradient(to right, var(--shadow) 0 100%), linear-gradient(51deg, transparent 30%, var(--stone) 30%), linear-gradient(-51deg, transparent 30%, var(--stone) 30%), linear-gradient(51deg, transparent 28%, var(--shadow) 28%), linear-gradient(-51deg, transparent 28%, var(--shadow) 28%), linear-gradient(94deg, transparent 17%, var(--stone) 17%), linear-gradient(-94deg, transparent 17%, var(--stone) 17%), linear-gradient(94deg, transparent 13%, var(--shadow) 13%), linear-gradient(-94deg, transparent 13%, var(--shadow) 13%), linear-gradient(to right, var(--stone) 0 100%), linear-gradient(to right, var(--shadow) 0 100%), linear-gradient(to right, var(--stone) 0 100%), linear-gradient(to right, var(--shadow) 0 100%), linear-gradient(to right, var(--shadow) 0 100%), linear-gradient(-13deg, var(--stone) 58%, transparent 0%), linear-gradient(13deg, var(--stone) 58%, transparent 0%), linear-gradient(-13deg, var(--shadow) 63%, transparent 0%), linear-gradient(13deg, var(--shadow) 63%, transparent 0%); background-position: 103% 18%, -3% 18%, 50% 19%, 50% 14.5%, 0 35%, 100% 35%, 0 33%, 50% 45%, 50% 39%, 0 298px, 100% 298px, 0 298px, 100% 298px, 0 310px, 100% 310px, 0 310px, 100% 310px, 50% 148px, 0 148px, 50% 12px, 50% 12px, 50% 0, 0 0, 100% 0, 0 0, 100% 0; background-size: 50% 20px, 50% 20px, 14% 113px, 96% 8px, 56% 31px, 56% 31px, 100% 5px, 33% 5px, 60% 5px, 50% 46px, 50% 46px, 50% 50px, 50% 50px, 50% 141px, 50% 141px, 50% 141px, 50% 141px, 96% 150px, 100% 150px, 94% 165px, 96% 165px, 43% 2px, 50% 12px, 50% 12px, 50% 12px, 50% 12px; } /* Grandmother / tatik */ #artsakh:after { height: 72%; width: 84%; background-image: radial-gradient(circle, .........完整代码请登录后点击上方下载按钮下载查看
网友评论0