用css布局把自己头像画出来
代码语言: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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0