单个div+css实现小绵羊效果代码-html代码-BFW代码库

代码语言：html

代码描述：单个div+css实现小绵羊效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1">



    <style>
        article {
          --skin: #a98;
          --skin-dark: #876;
          width: 60vmin;
          aspect-ratio: 1.2;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: 
            /* details 1 */
            radial-gradient(130% 140% at 74.5% 48%, #fff 7.5%, #0000 0),
            radial-gradient(110% 100% at 77.5% 48%, #000 7%, #0000 0),
            radial-gradient(circle at 74% 37%, #fff 7.5%, #0000 0),
            radial-gradient(90% 100% at 74.8% 34.5%, #000 6.5%, #0000 0),
            radial-gradient(circle at 32% 58%, #fff 7.5%, #0000 0),
            radial-gradient(circle at 34% 61%, #fff 7.5%, #0000 0),
            radial-gradient(circle at 31% 57.85%, #000 7.5%, #0000 0),
            radial-gradient(circle at 33% 61%, #000 7.5%, #0000 0),
            radial-gradient(130% 100% at 43% 70%, #fff 7.5%, #0000 0),
            radial-gradient(90% 100% at 43.5% 72%, #000 7%, #0000 0),
            radial-gradient(130% 100% at 68% 70%, #fff 7.5%, #0000 0),
            radial-gradient(100% 100% at 68% 72%, #000 7%, #0000 0),
            /* front-legs */
            conic-gradient(from -0.009turn at 50% 250%, #0000, var(--skin) 0.0005turn 0.018turn, #0000 0.0185turn) 43% 95% / 15% 25%,
            conic-gradient(from -0.01turn at 50% 290%, #0000, #000 0.0005turn 0.02turn, #0000 0.0205turn) 43% 100% / 15% 25%,
            conic-gradient(from -0.009turn at 50% 250%, #0000, var(--skin) 0.0005turn 0.018turn, #0000 0.0185turn) 72% 95% / 15% 25%,
            conic-gradient(from -0.01turn at 50% 290%, #0000, #000 0.0005turn 0.02turn, #0000 0.0205turn) 72% 100% / 15% 25%,
            /* cover */
            radial-gradient(100% 100% at 54% 50.4%, #fff 30.2%, #0000 0),
            /* details 2 */
            radial-gradient(circle at 61% 25%, #000 4.9%, #0000 0),
            radial-gradient(circle at 59% 76%, #000 4.9%, #0000 0),
            /* edges */
            radial-gradient(circle at 25% 58%, #fff 6%, #0000 0),
            radial-gradient(circle at 32.5% 65%, #fff 8.5%, #0000 0),
            radial-gradient(circle at 35% 74%, #fff 5%, #0000 0),
            radial-gradient(100% 95% at 45% 74%, #fff 10%, #0000 0),
            radial-gradient(circle at 55% 76%, #fff 7%, #0000 0),
            radial-gradient(90% 100% at 65% 74%, #fff 9%, #0000 0),
            radial-gradient(circle at 75% 75%, #fff 4%, #0000 0),
            radial-gradient(circle at 79% 64%, #fff 8%, #0000 0),
            radial-gradient(circle at 80% 53%, #fff 7%, #0000 0),
            radial-gradient(circle at 79% 40%, #fff 9%, #0000 0),
            radial-gradient(circle at 72% 30%, #fff 7%, #0000 0),
            radial-gradient(circle at 65% 24%, #fff 4%, #0000 0),
            radial-gradient(circle at 55% 27%, #fff 11%, #0000 0),
            radial-gradient(90% 95% at 45% 24%, #fff 10%, #0000 0),
            /* edges lines */
            radial-gradient(circle at 24.7% 58%, #000 7%, #0000 0),
            radial-gradient(circle at 32.5% 65%, #000 9.5%, #0000 0),
            radial-gradient(circle at 34.25% 74.7%, #000 5.2%, #0000 0),
            radial-gradient(100% 95% at 45% 74%, #000 11%, #0000 0),
            radial-gradient(circle at 55% 76.5%, #000 7.7%, #0000 0),
            radial-gradient(90% 100% at 65% 74.2%, #000 9.8%, #0000 0),
            radial-gradient(circle at 75% 75%, #000 4.9%, #0000 0),
            radial-gradient(circle at 78.8% 64.1%, #000 9%, #0000 0),
            radial-gradient(circle at 80% 53%, #000 8%, #0000 0),
            radial-gradient(circle at 79.3% 39.9%, #000 9.6%, #0000 0),
            radial-gradient(circle at 72% 30%, #000 8%, #0000 0),
            radial-gradient(circle at 65% 23.9%, #000 4.9%, #0000 0),
            radial-gradient(circle at 55% 27%, #000 12%, #0000 0),
            radial-gradient(90% 95% at 45% 23.8%, #000 11%, #0000 0),
            /* back-legs */
            conic-gradient(from -0.009turn at 50% 250%, #0000, var(--skin-dark) 0.0005turn 0.018turn, #0000 0.0185turn) 30.5% 95% / 15% 25%,
            conic-gradient(from -0.01turn at 50% 290%, #0000, #000 0.0005tu.........完整代码请登录后点击上方下载按钮下载查看