css绘制一只公鸡剪纸效果代码

代码语言:html

所属分类:布局界面

代码描述:css绘制一只公鸡剪纸效果代码

代码标签: css 绘制 公鸡 剪纸

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
    html{

    box-sizing: border-box ;
    --cream: #f2eee3 ;
    --black: #1b1b1b ;
    --red: #d91729 ; 

}

html *,
html *::before,
html *::after {

    box-sizing: inherit ;

}

*::before,
*::after{

    content: "" ;
    position: absolute ;

}

body{

    margin: 0 ;
    width: 100% ;
    height: 100vh ;
    display: flex ;
    overflow: hidden ;
    position: relative ;
    align-items: center ;
    justify-content: center ;
    background-color: var(--cream) ;
    --beak-t: 115% 37% ;
    --beak-b: 115% 41.5% ;

}




.bird{

    width: 36em ;
    height: 36em ;
    position: relative ;

}

.bird *{

    position: absolute ;
    
}


.head{

    left: 20.1em ;
    top: 7.2em;
    height: 7em ;
    width: 7.7em ;
    border-radius: 86.2% 0 0 0;
    border-top: .15em solid var(--black) ;
    border-left: .15em solid var(--black) ;
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0