Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
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-position: /* leg-c=== */ 84% 64% , /* leg-c=== */ /* leg-t=== */ 79.1% 94% , /* leg-t=== */ /* leg-b=== */ 92.1% 97% , /* leg-b=== */ /* wing-c=== */ 2% 21% , /* ===wing-c */ /* wing-c=== */ 2% 48% , /* ===wing-c */ /* wing-c=== */ 2% 78% , /* ===wing-c */ /* wing-r=== */ 9% 9% , /* ===wing-r */ /* wing-r=== */ 11% 36% , /* ===wing-r */ /* wing-r=== */ 38% 89% ; /* ===wing-r */ background-repeat: no-repeat; } .body{ top: 13.7em; left: 20.1em; width: 7.5em; height: 15em; border-radius: 0 100% 100% 0 / 0 50% 50% 0; background-image: linear-gradient(45deg ,var(--black) 25% , transparent 0% ) , linear-gradient(45deg , transparent 75% , var(--black) 0% ) , linear-gradient(45deg , var(--black) 25% , transparent 0% ) , linear-gradient(45deg , transparent 75% , var(--black) 0% ) , linear-gradient(45deg ,var(--black) 25% , transparent 0% ) , linear-gradient(-45deg , transparent 75% , var(--black) 0% ) , linear-gradient(-45deg , var(--black) 25% , transparent 0% ) , linear-gradient(45deg , transparent 75% , var(--black) 0% ) ; background-size: 4.2em 4em , 4.2em 4em , 4.2em 4em , 4.2em 4em , 2em 2em , 2em 2em , 2em 2em , 2em 2em ; background-position: 0.8em -0.1em , 2.8em 1.9em , -1.3em 1.9em , 0.7em 3.9em , -4% 7% , -4% 6.7% , -3.4% 7.2% , -3% 7% ; } .body::before{ width: 13.7em; height: 7em; top: 49%; left: -112%; border-radius: 0 0 50% 50% / 0 0 100% 100% ; background-image: repeating-radial-gradient( 9.3em 9.3em at center 1% ,var(--cream) , var(--cream) 8% , var(--black) 9% , var(--black) 18% , var(--cream) 19%) ; } .body::after{ z-index: 2; top: 49.3%; left: -223%; height: 7em; width: 4.4em; background-repeat: no-repeat; background-position: 0 0% , 75% 0 ; border-radius: 0 0 100% 0 / 0 0 75% 0; background-size: 43% 100% , 84% 105% ; background-image: repeating-linear-gradient(to top , var(--black) 0 , var(--black) 6% , var(--cream) 7% , var(--cream) 13.7% ) , repeating-linear-gradient(to top , var(--black) 0 , var(--black) 5.5% , var(--cream) 6% , var(--cream) 12.7% ) ; } .dams{ top: 5.8em; left: 11.8em; width: 7.7em; height: 15.4em; border-radius: 0 100% 100% 0 / 0 50% 50% 0; background-image: repeating-linear-gradient( 33deg , var(--cream) 0 , var(--cream) 1% , transparent 1.2% , transparent 3% , var(--cream) 3.2% ) , repeating-linear-gradient( 33deg , var(--cream) 0 , var(--cream) 1% , transparent 1.2% , transparent 3% , var(--cream) 3.2% ) , repeating-linear-gradient( -32deg , var(--cream) 0 , var(--cream) 1% , transparent 1.2% , transparent 3% , var(--cream) 3.2% ) , repeating-linear-gradient( -32deg , var(--cream) 0 , var(--cream) 1% , transparent 1.2% , transparent 3% , var(--cream) 3.2% ) , repeating-linear-gradient( 33deg , var(--cream) 0 , var(--cream) 1% , transparent 1.2% , transparent 3% , var(--cream) 3.2% ) ; background-size: 2.1em 166% , 2.1em 166% , 2.2em 165% , 2.2em 165% , 2.1em 166% ; background-position: 49% 53.7% , -27% 53.7% , 10.7% 45% , 88.7% 45% , 126.7% 45% ; background-repeat: no-repeat; background-color: var(--black); } .dams::before{ width: 7.7em; height: 15.4em; border-radius: 0 100% 100% 0 / 0 50% 50% 0; top: -3%; left: -84%; transform: rotate(-45deg); background-image: repeating-radial-gradient( 13em 13em at 0% 50% , var(--black) , var(--black) 5% , var(--cream) 6% , var(--cream) 6.5% , var(--black) 7% , var(--black) 7%); } .dams::after{ width: 8.3em; height: 4.3em; border-radius: 50% 50% 0 0 / 100% 100% 0 0; top: 72%; left: -109%; z-index: 1; background-image: repeating-radial-gradient( 6em 6em at 51% 100% , var(--black) , var(--black) 7% , var(--cream) 8% , var(--cream) 12% , var(--black) 12.8% ); } @media screen and (max-width: 36em){ .bird{ transform: scale(.8) translateX(-13%); --beak-b: 114% 42% ; --beak-t: 114% 37% ; } .dams{ background-position: 50% 53.7% , -25.8% 53.1% , 11.7% 45% , 87.7% 45% , 124.6% 45.3% } }
JavaScript
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>css公鸡-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号