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=== */
radial-gradient( circle at 0% 50% , var(--red) 38% , transparent 40%) ,
/* ===wattle */
/* comb=== */
radial-gradient( 4.6em 4em at -9% 98% , var(--red) 70% , transparent 72%) ,
/* ===comb */
/* comb=== */
radial-gradient( 4.6em 4em at -9% 98% , var(--red) 70% , transparent 72%) ;
/* ===comb */
background-size:
/* eye=== */
3em 3em ,
/* ===eye */
/* beak-b=== */
3em 2em ,
/* ===beak-b */
/* beak-t=== */
3em 2em ,
/* ===beak-t */
/* face=== */
1.7em 2.4em ,
/* ===face */
/* wattle=== */
5em 6em ,
/* ===wattle */
/* comb=== */
5em 5em ,
/* ===comb */
/* comb=== */
5em 5em ;
/* ===comb */
background-position:
/* eye=== */
68% 37% ,
/* ===eye */
/* beak-b=== */
var(--beak-b) ,
/* ===beak-b */
/* beak-t=== */
var(--beak-t) ,
/* ===beak-t */
/* face=== */
74% 39% ,
/* ===face */
/* wattle=== */
131% 117% ,
/* ===wattle */
/* comb=== */
67% -42% ,
/* ===comb */
/* comb=== */
5% -42% ;
/* ===comb */
background-repeat: no-repeat;
}
.head::after{
top: 184%;
left: -158%;
width: 15em;
height: 16em;
background-image:
/* leg-c=== */
radial-gradient(circle at 49% 52% , var(--black) 61% , transparent 64%) ,
/* ===leg-c */
/* leg-t=== */
linear-gradient(var(--black) 100% , transparent 0) ,
/* ===leg-t */
/* leg-b=== */
linear-gradient(var(--black) 100% , transparent 0) ,
/* ===leg-b */
/* wing-c=== */
radial-gradient(circle at 50% 50% , var(--black) 48% , transparent 54%) ,
/* ===wing-c */
/* wing-c=== */
radial-gradient(circle at 50% 50% , var(--black) 48% , transparent 54%) ,
/* ===wing-c */
/* wing-c=== */
radial-gradient(circle at 50% 50% , var(--black) 48% , transparent 54%) ,
/* ===wing-c */
/* wing-r=== */
radial-gradient(5.8em 5em at -4% 4% , transparent 46% , var(--black) 47% , var(--black) 48.5%, transparent 49.2%) ,
/* ===wing-r */
/* wing-r=== */
radial-gradient(10.7em 8em at -3% -29% , transparent 47% , var(--black) 48% , var(--black) 48.5%, transparent 49.2%) ,
/* ===wing-r */
/* wing-r=== */
radial-gradient(21.5em 15em at -6% -40% , transparent 47% , var(--black) 47.2% , var(--black) 47.6%, transparent 48%) ;
/* ===wing-r */
background-size:
/* leg-c=== */
2.5em 2.5em ,
/* ===leg-c */
/* leg-t=== */
.1em 7.8em ,
/* ===leg-t */
/* leg-b=== */
3.5em .1em ,
/* ===leg-b */
/* wing-c=== */
1em 1em ,
/* ===wing-c */
/* wing-c=== */
1em 1em ,
/* ===wing-c */
/* wing-c=== */
1em 1em ,
/* ===wing-c */
/* wing-r=== */
5em 3em ,
/* ===wing-r */
/* wing-r=== */
5em 3em ,
/* ===wing-r */
/* wing-r=== */
13em 7em ;
/* ===wing-r */
background-.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0