单个div+css实现卡通络腮胡男人人物头像效果代码

代码语言:html

所属分类:布局界面

代码描述:单个div+css实现卡通络腮胡男人人物头像效果代码

代码标签: 单个 div css 卡通 络腮胡 男人 人物 头像

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
          min-height: 400px;
          height: 100vh;
          position: relative;
          background-color: #ddd;
          text-align: center;
        }
        div {
          position: absolute;
          left: 50%;
          top: 50%;
        }
        div::before,
        div::after {
          display: block;
          content: '';
          position: absolute;
        }
        @media (max-width: 400px) {
          div:not(.no-scale) {
            transform: scale(0.8);
          }
        }
        #quiet {
          width: 250px;
          height: 250px;
          margin-left: -125px;
          margin-top: -125px;
          background: radial-gradient(circle, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0) 50.8%) 14% 30%/11% 11%, radial-gradient(circle, #ffdab9 50%, rgba(255,218,185,0) 50.8%) 10% 30%/16% 16%, radial-gradient(circle, #8b4513 50%, rgba(139,69,19,0) 50.8%) 7.5% 29%/20% 20%, radial-gradient(circle, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0) 50.8%) 86% 30%/11% 11%, radial-gradient(circle, #ffdab9 50%, rgba(255,218,185,0) 50.8%) 90% 30%/16% 16%, radial-gradient(circle, #8b4513 50%, rgba(139,69,19,0) 50.8%) 92.5% 29%/20% 20%, radial-gradient(circle at 50% 0, #ffdab9 29.5%, #8b4513 30%, #8b4513 35%, rgba(139,69,19,0) 35.5%) 50% 95%/40% 20%, radial-gradient(ellipse at 50% 100%, rgba(139,69,19,0) 49%, #8b4513 49.5%, #8b4513 52%, rgba(139,69,19,0) 52.5%) 50% 110%/120% 40%, radial-gradient(circle at 50% 0, rgba(255,255,255,0) 35%, white 35%, white 45%, rgba(255,255,255,0) 45.5%) 50% 89%/40% 13%, linear-gradient(#8b4513, #8b4513) 37% 100%/0.25em 22%, linear-gradient(#8b4513, #8b4513) 63% 100%/0.25em 22%, linear-gradient(80deg, rgba(0,0,0,0) 50%, #333 50.5%) 24% 100%/1em 18%, linear-gradient(-80deg, rgba(0,0,0,0) 50%, #333 50.5%) 76% 100%/1em 18%, linear-gradient(162deg, rgba(0,0,0,0) 10%, #333 10%) 30% 100%/1.5em 21%, linear-gradient(-162deg, rgba(0,0,0,0) 10%, #333 10%) 70% 100%/1.5em 21%, radial-gradient(ellipse at 100% 100%, #556b2f 50%, rgba(85,107,47,0) 50.5%) 0 100%/37% 29%, radial-gradient(ellipse at 0 100%, #556b2f 50%, rgba(85,107,47,0) 50.5%) 100% 100%/37% 29%, radial-gradient(ellipse at 50% 100%, #222 51%, rgba(0,0,0,0) 51.5%) 50% 110%/120% 40%, radial-gradient(circle at 50% 0, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0) 40.5%) 50% 82%/20% 20%, linear-gradient(to right, #8b4513 4px, rgba(139,69,19,0) 4px) 50% 80%/20% 20%, linear-gradient(to left, #8b4513 4px, rgba(139,69,19,0) 4px) 50% 80%/20% 20%, linear-gradient(#ffdab9, #ffdab9) 50% 80%/20% 20%, linear-gradient(#4.........完整代码请登录后点击上方下载按钮下载查看

网友评论0