HTML+CSS制小老鼠

最新推荐文章于 2024-08-12 15:32:16 发布

半根烟闯江湖.

最新推荐文章于 2024-08-12 15:32:16 发布

阅读量326

点赞数 2

分类专栏： html+css制作小老鼠 HTML代码文章标签： html5 css css3 html

本文链接：https://blog.csdn.net/weixin_54862883/article/details/117737387

版权

HTML代码同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

html+css制作小老鼠

1 篇文章 0 订阅

订阅专栏

HTML代码块

<!DOCTYPE html>
<html>
    <title>小老鼠</title>
    <link rel="stylesheet" type="text/css" href="css/xls.css">
    <body>
<div id="mouse">
    <div id="mouse_head"></div>

    <div id="mouse_ear_left"></div>
    <div id="mouse_ear_right"></div>

    <div id="mouse_eye_left_outer"></div>
    <div id="mouse_eye_right_outer"></div>
    <div id="mouse_eye_left_inner"></div>
    <div id="mouse_eye_right_inner"></div>

    <div id="mouse_nose"></div>

    <div id="mouse_whisker_left_1"></div>
    <div id="mouse_whisker_left_2"></div>
    <div id="mouse_whisker_left_3"></div>
    <div id="mouse_whisker_right_1"></div>
    <div id="mouse_whisker_right_2"></div>
    <div id="mouse_whisker_right_3"></div>

    <div id="mouse_tooth_left"></div>
    <div id="mouse_tooth_right"></div>

  </div>
</body>
  </html>

CSS代码块

#mouse{
    position: absolute;
    top: 40px;
    left: 280px;
  }
  
  #mouse_head {
    width: 200px;
    height: 200px;
    background-color: #8F9595;
    border-radius: 100px;
  }
  
  #mouse_ear_left {
    display: inline-block;
    position: relative;
    top: -230px;
    left: -25px;
    border: 12px solid #6E6E6E;
    width: 75px;
        height: 75px;
    background: #E5A95F;
        border-radius: 50%;
  }
  
  #mouse_ear_right {
    display: inline-block;
    position: relative;
    top: -230px;
    left: 25px;
    border: 12px solid #6E6E6E;
    width: 75px;
        height: 75px;
    background: #E5A95F;
        border-radius: 50%;
  }
  
  #mouse_eye_left_outer {
    width: 40px;
        height: 40px;
    position: absolute;
    top: 55px;
    left: 50px;
        background: white;
        -webkit-border-radius: 50px;
        border-radius: 50px;
  }
  
  #mouse_eye_right_outer {
    width: 40px;
        height: 40px;
    position: absolute;
    top: 55px;
    left: 110px;
        background: white;
        -webkit-border-radius: 50px;
        border-radius: 50px;
  }
  
  #mouse_eye_left_inner {
    width: 15px;
        height: 15px;
    position: absolute;
    top: 75px;
    left: 63px;
        background: black;
        -webkit-border-radius: 50px;
        border-radius: 50px;
  }
  
  #mouse_eye_right_inner {
    width: 15px;
        height: 15px;
    position: absolute;
    top: 75px;
    left: 122px;
        background: black;
        -webkit-border-radius: 50px;
        border-radius: 50px;
  }
  
  #mouse_nose {
    width: 0;
        height: 0;
    position: absolute;
    top: 110px;
    left: 75px;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-top: 50px solid #6E6E6E;
    z-index: 1;
  }
  
  #mouse_whisker_left_1 {
    width: 80px;
    height: 1.5px;
    border-radius: 2px;
    background-color: black;
    position: absolute;
    top: 115px;
    left: 25px;
    -webkit-transform: rotate(10deg);
  }
  
  #mouse_whisker_left_2 {
    width: 80px;
    height: 1.5px;
    border-radius: 2px;
    background-color: black;
    position: absolute;
    top: 118px;
    left: 28px;
    }
  
  #mouse_whisker_left_3 {
    width: 80px;
    height: 1.5px;
    border-radius: 2px;
    background-color: black;
    position: absolute;
    top: 120px;
    left: 25px;
    -webkit-transform: rotate(-10deg);
  }
  
  #mouse_whisker_right_1 {
    width: 80px;
    height: 1.5px;
    border-radius: 2px;
    background-color: black;
    position: absolute;
    top: 115px;
    left: 90px;
    -webkit-transform: rotate(-10deg);
  }
  
  #mouse_whisker_right_2 {
    width: 80px;
    height: 1.5px;
    border-radius: 2px;
    background-color: black;
    position: absolute;
    top: 118px;
    left: 90px;
    }
  
  #mouse_whisker_right_3 {
    width: 80px;
    height: 1.5px;
    border-radius: 2px;
    background-color: black;
    position: absolute;
    top: 121px;
    left: 92px;
    -webkit-transform: rotate(10deg);
  }
  
  #mouse_tooth_left {
    width: 15px;
    height: 22px;
    background-color: white;
    position: absolute;
    top: 170px;
    left: 84px;
    -webkit-transform: rotate(10deg);
  }
  
  #mouse_tooth_right {
    width: 15px;
    height: 22px;
    background-color: white;
    position: absolute;
    top: 170px;
    left: 102px;
    -webkit-transform: rotate(-10deg);
  }

半根烟闯江湖.

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS制小老鼠

**HTML代码块**<!DOCTYPE html><html> <title>小老鼠</title> <link rel="stylesheet" type="text/css" href="css/xls.css"> <body><div id="mouse"> <div id="mouse_head"></div> <div id="mo
复制链接

扫一扫

专栏目录