div+css实现卡通小马新年快乐代码

代码语言:html

所属分类:布局界面

代码描述:div+css实现卡通小马新年快乐代码

代码标签: div css 卡通 小马 新年 快乐 代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
<style>
:root {
  --gray: #666;
  --white: #fff;
  --black: #000;

  --pink: #d77584;
  --pinktwo: #ff9db5;
  --pinkthree: #f0608b;
  --brown: #752b42;
  --red: #af2d13;
  --waterblue: #8ed3dd;

  --switch-transition: 250ms ease-out;
  --border-width: 0.2vw;
  --switch-shadow: 0.3vw 0.3vw 0.1vw 0;

  --label-size: 30px;
  --checkbox-size: 15px;

  --kirby-animation-timing: 0.25s ease-in-out;
  --eye-animation-timing: 5s ease-out;

  --eye-gradient: radial-gradient(
    circle at 100% center,
    rgb(0, 0, 0),
    rgb(0, 0, 0) 50%,
    rgb(28, 34, 213) 75%,
    rgb(28, 34, 213) 75%
  );
  --eye2-gradient: linear-gradient(
    90deg,
    #f6bfce,
    #fcb5c7 95%,
    var(--black) 95% 100%
  );
  --eye3-gradient: linear-gradient(
    -90deg,
    #f6bfce,
    #fcb5c7 95%,
    var(--black) 95% 100%
  );

  --kirby-gradient: linear-gradient(
    0deg,
    var(--pink),
    var(--pinktwo) 20%,
    #ffc8d6
  );
  --kirby-hand-gradient: linear-gradient(
    116deg,
    rgb(248, 182, 199) 38%,
    rgb(255, 153, 178)
  );
  --kirby-hand2-gradient: linear-gradient(
    -35deg,
    rgb(248, 182, 199) 38%,
    rgb(255, 153, 178)
  );
  --foot-gradient: linear-gradient(
    0deg,
    var(--brown),
    var(--red) 20%,
    #cf472c
  );
}

body {
  margin: 0;
  padding: 0;
}

/* =========================
   Background & Text
   ========================= */
#bg {
  background: linear-gradient( 0deg,#223818, 5%, #5e9a44, 34.9%, var(--pinktwo) 35%, #ffc8d6);
  background-repeat: no-repeat;
  background-position: top center;
  back.........完整代码请登录后点击上方下载按钮下载查看

网友评论0