用css布局把自己头像画出来-html代码-BFW代码库

代码语言：html
代码描述：简单的动态导航显示动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html {
  height: 100%;
  width: 100%;
}
body {
  width: 100%;
  height: 100%;
  position: relative;
  left: 0;
  top: 0;
  margin: 0;
  background-color: black;
  background-image: linear-gradient(70deg, #B3935DFF 5%, #F9EFD3FF 50%, transparent ), linear-gradient(to top left, transparent 40%, #3D3434FF 75%), radial-gradient(#84512DD4 , transparent 71%), radial-gradient(#84512DD4 , transparent 71%), radial-gradient(at right, #4D3B13C4 , transparent 71%), linear-gradient(to top right, transparent 40%, #5F5553FF 75%), radial-gradient(at left, #4D3B13C4 , transparent 71%), radial-gradient(#3A2D11D4 , transparent 71%), linear-gradient(119deg, transparent 0px, #3A2D119C 11px, transparent 23px), radial-gradient(#3A2D11FF , transparent 71%), linear-gradient(170deg, transparent 6px, #3A2D11B8 14px, #3A2D11B8 , transparent 21px), radial-gradient(#3A2D11DB , transparent 71%), linear-gradient(37deg, transparent 40%, #322710FF 60%, #322710FF 65%, transparent 70%), radial-gradient(at left 20px, transparent 10%, #322710BF 25%, #322710BF , transparent 71%), linear-gradient(189deg, transparent 6px, #493812B0 14px, #493812B0 , transparent 21px), linear-gradient(140deg, transparent 20%, transparent , #67594E57 , transparent , #67594E57 , transparent 60%), linear-gradient(150deg, transparent 25%, #FFFFFF4D , transparent 55%), radial-gradient(at 30px bottom, transparent 19%, #32271063 , #8D6C2EB0 48%, #3227103D , transparent 71%), linear-gradient(120deg, transparent 30%, #FDFBFB33 , transparent , transparent , #FDFBFB33 , #FDFBFB30 , transparent 65%), radial-gradient(at 35px -100px, transparent 55%, #88837078 , transparent , #88837078 , transparent 71%), radial-gradient(at center, #D5A888FF 32%, transparent 71%), radial-gradient(at right 7px, #FCFBFAFF 10%, #FAEEE4FF 35%, #99633D08 40%, transparent 70%), radial-gradient(at center 60px, transparent, transparent 20%, #322710FF 30%, #322710FF 52%, #3C2F16FF 67%, transparent 71%), linear-gradient(to bottom right, #FFFFFFA6 , transparent), linear-gradient(78deg, transparent 42%, #322710FF 59%, #322710FF 95%, transparent ), radial-gradient(at left 10px, transparent 32%, #99633DA1 38%, transparent 55%), radial-gradient(at 45px 60px, #322710FF 55%, #53401DFF 67%, transparent 71%), linear-gradient(to top right, transparent 30%, white 50%, transparent), linear-gradient(to top left, transparent, transparent 40%, #FFECD6FF 60%, #FFECD6FF 75%, transparent ), radial-gradient(at 80px 90px, transparent, transparent 46px, #322710FF 54px, #423318FF 70px, transparent 73px), linear-gradient(280deg, transparent 28%, #332712FF 43%, #332B20FF , #523F1EFF 90%, transparent ), linear-gradient(to bottom left, transparent, transparent 50%, #866842FF 50%), linear-gradient(to bottom right, transparent 50%, #FFFBE4FF 50%), linear-gradient(110deg, #5D4C2585 45%, transparent 65%), linear-gradient(to top right, transparent 50%, #EFD9C1FF 50%, #FFECD6FF ), linear-gradient(to bottom left, transparent 50%, #FFECD6FF 50%, #F3DCC4FF ), radial-gradient(at 30%, #0000005C , transparent 71%), radial-gradient(at center, #0000005E , transparent 71%), radial-gradient(at 30px 0, #D3B38CFF 7px, #B8905DFF 14px, #7A542766 16px, transparent 25px), radial-gradient(at center -2px, transparent 13px, #926020FF 14px, #BCA683FF 15px, #9A7455FF 22px, transparent ), radial-gradient(at center 12px, transparent 14px, #B09B89FF 17px, #3C2B1BB8 18px, #A3805EFF 22px), radial-gradient(at center 8px, transparent 12px, #392306FF 13px, #977D6BFC 16px, transparent ), radial-gradient(at center, white, transparent ), radial-gradient(#000000C4 , #000000C4 3px, #6E8156FF 4px, #525433FF 7px, #C5BCBCFF 7px, transparent ), linear-gradient(to top left, transparent, transparent 15%, #776231D6 85%, #5D4C25F2 15%, transparent 85%), linear-gradient(15deg, #8F715AFF, #D7C19DFF 20%, #A18E61FF 35%, #77623175 75%, transparent 85%), linear-gradient(-20deg, transparent, #D9C6BAFF 22%, #E9D7CDFF , #EFE0CAFF , #EBDBCCFF 38%, #C6B486FF 45%, #7762312B 85%, transparent 85%), linear-gradient(to bottom right, #C09F74FF, transparent 50%), linear-gradient(to top left, transparent , #664E163B , transparent 71%), linear-gradient(to top left, transparent , #775531BA 80%, transparent 90%), linear-gradient(76deg, transparent 40%, #A98453C4 40%, transparent 60%), linear-gradient(to right, transparent , #77623175 30%, transparent , #776231E8 40%, #77623175 85%, transparent ), linear-gradient(to bottom right, transparent, transparent 30%, #D6AB854D 50%, transparent ), linear-gradient(to bottom left, transparent 30%, #D6AB8578 50%, transparent ), linear-gradient(to top right, transparent 30%, #FFFFFFB3 50%, transparent), linear-gradient(to bottom right, #FFFFFFA6 , #FFFFFF9E , transparent), linear-gradient(30deg, transparent, transparent 42%, #A984538A 50%, transparent 80%), radial-gradient(at 0 0, transparent 40%, #9771716B 50%, transparent 70%), linear-gradient(to bottom left, #4D4633FF , transparent 50%), linear-gradient(-32deg, transparent , #E7E0C5FF 25%, #BCAC8CFF 35%, #7762312B 85%, transparent 85%), linear-gradient(20deg, #CAAD85FF 10%, #5D4C255C 35%, #77623161 75%, transparent 85%), linear-gradient(-85deg, transparent 15%, white , transparent 80%), linear-gradient(-40deg, #FFFFFFA8 45%, transparent 60%), linear-gradient(70deg, #FFFFFFBA 45%, transparent 65%), linear-gradient(to bottom right, transparent 38%, #B978729E 45%, #A55A5A4D 55%, transparent 70%), radial-gradient(at -15px 17px, transparent 29%, #73470EFF 29%, #B47979FF 31%, transparent 45%), radial-gradient(#776231A8 30%, transparent 71%), linear-gradient(217deg, transparent, transparent 33%, #A97B53A1 40%, transparent 60%), radial-gradient(at center, white, transparent ), radial-gradient(at 8px 0, #EDCEA5FF 10px, #9C634557 21px, transparent 30px), radial-gradient(at center 12px, #DDDCF900 14px, #FFFFFF33 17px, #564A3CCC 18px, #BF9E87FF 23px), radial-gradient(at center 12px, transparent 13px, #392306FF 14px, #CDB2A0FC 18px, transparent ), radial-gradient(at center -2px, transparent 13px, #A36D27FF 14px, #F9D2B7FF 15px, #DEC9A5FF , transparent ), radial-gradient(#000000C4 , #000000C4 3px, #959764FF 4px, #60623CFF 7px, #E0D6D6FF 8px), linear-gradient(100deg, transparent 20%, #D6AB85FF 35%, #A87B4FFF 52%, #D6AB85FF 80%, transparent ), linear-gradient(to bottom left, transparent 50%, #FBFBE8FF 60%, transparent ), linear-gradient(to bottom left, transparent 30%, #F4EFD491 50%, #F4EFD491 65%, transparent ), linear-gradient(-45deg, transparent 30%, white 50%, transparent), linear-gradient(to top left, transparent 50%, #99562D94 50%, transparent 75%), linear-gradient(65deg, transparent, transparent 29%, #FFECD6FF 29%, #E5CDACFF 55%, #FFECD6FF 72%, #E5CDACFF 80%, transparent 85%), linear-gradient(to bottom left, #A5865EFF , #C09F74FF, transparent 50%), radial-gradient(at center -14px, #E8B9B9FF 22%, #F6C7C7FF 24%, #F3CBCBFF 32%, #F1BABAFF 35%, transparent 43%), radial-gradient(at 40px -4px, transparent 31px, #C4A171FF 32px, #E7BFBFFF 33px, #E7BFBFFF , #C3BC97FF 43px, transparent 50px), linear-gradient(to top right, transparent, transparent 50%, #4E401EFF 50%), radial-gradient(at 37px 17px, transparent 26%, #A1671DFF 28%, #C89696FF 31%, #DCB2B2FF 35%, transparent 47%), linear-gradient(to right, #535252FF , #302F2FFF , white 12%, #F5EFEFFF , white , white , #EDEBE7FF 20%, white 25%, white 28%, #F9F0F0FF , white 33%, white 45%, #EDE7E7FF 47%, white 53%, white 65%, #C6B6B6FF 67%, #E2E0D7FF 69%, #F3EDEDFF 71%, #EFEADBFF 77%, #A39D9DFF 79%, #CCCBB2FF 82%, #D3CEC7FF 85%, #958D82FF 88%, #A9A093FF 89%, #A5977CFF 91%, #302F2FFF 97%), linear-gradient(to right, #D6AB85FF , transparent ), linear-gradient(190deg, #8F7C5BFF 20%, transparent 50%), linear-gradient(to top left, transparent, transparent 50%, #3E331AFF 50%), l.........完整代码请登录后点击上方下载按钮下载查看