css绘制一只公鸡剪纸效果代码-html代码-BFW代码库

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

代码语言：html

代码描述：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) ;

}

.head::before{

    top: -62% ;
    left: 36.6% ;
    width: 9.5em ;
    height: 9.9em ;
   

    background-image: 


    /* eye=== */

        radial-gradient(circle at 51% 52%, var(--black) 29% , var(--cream) 33% , var(--cream) 41%  , var(--red) 44% , var(--red) 53%, transparent 56% ) ,

    /* ===eye */

    
    /* beak-b=== */

        linear-gradient(35deg, var(--red) 30% , transparent 31%) ,

    /* ===beak-b */


    /* beak-t=== */

        linear-gradient(-35deg, transparent 70% , var(--red) 71%) ,

    /* ===beak-t */


    /* face=== */

        linear-gradient(  var(--red) 100% , transparent 0),

    /* ===face */


    /* wattle==.........完整代码请登录后点击上方下载按钮下载查看