单个div+css布局实现火烈鸟效果代码
代码语言:html
所属分类:布局界面
代码描述:单个div+css布局实现火烈鸟效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --white: #fff; --pink: #f9c0ce; --pink-100: #f9baca; --pink-200: #f8b0c2; --pink-300: #f7a6ba; --pink-400: #f69eb4; --pink-500: #f092a5; --gray: #e1e9ee; --gray-100: #d6e2e5; --gray-200: #dae5e7; --gray-300: #c6d1d6; --gray-400: #b4c8ce; --gray-500: #a6afb8; --dark-blue: #363851; } body { background-color: #f8f8f2; } #flamingo { width: 258px; height: 332px; left: 50%; top: 50%; position: absolute; transform: translate(-50%, -50%); background: /* Legs */ radial-gradient( var(--gray-400) 4px, transparent 5px ) 80px 220px / 10px 10px, radial-gradient( circle at center 100%, var(--dark-blue) 15px, transparent 16px ) 82px 316px / 32px 16px, radial-gradient(circle at 0 center, var(--dark-blue) 15px, transparent 16px) 129px 222px / 16px 32px, linear-gradient(var(--gray-100), var(--gray-100)) 82px 192px / 6px 140px, radial-gradient(circle at 0 center, var(--gray-100) 21px, transparent 22px) 82px 161px / 23px 46px, linear-gradient(var(--gray-200), var(--gray-200)) 18px 222px / 115px 6px, /* Eye */ radial-gradient( circle at center 100%, var(--dark-blue) 8px, transparent 9px ) 157px 26px / 18px 9px, radial-gradient(var(--white) 19px, transparent 20px) 145px 15px / 40px 40px, /* Beak */ radial-gradient(circle at 0 100%, var(--dark-blue) 35px, transparent 36px) right 13px / 36px 36px, linear-gradient(var(--gray), var(--gray)) 179px 13px / 43px 36px, radial-gradient(circle at 0 0, var(--gray-500) 29px, transparent 30px) 179px 30px / 30px 30px, /* Head */ radial-gradient(var(--pink-500) 27px, transparent 28px) 133px 7px / 56px 56px, radial-gradient( circle at 100% center, var(--pink-500) 34px, transparent 35px ) 126px top / 35px 70px, /.........完整代码请登录后点击上方下载按钮下载查看
网友评论0