单个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.........完整代码请登录后点击上方下载按钮下载查看

网友评论0