0
点赞
收藏
分享

微信扫一扫

css写小动物

花明 2022-03-11 阅读 50
vscodecsscss3html

HTML 

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animal</title>
    <link rel="stylesheet" href="animal.css">
</head>

<body>
    <div class="pig">
        <!-- 耳朵 -->
        <div class="ear_left"></div>
        <div class="ear_right"></div>
        <!-- 眼睛 -->
        <div class="eye_left"></div>
        <div class="eye_right"></div>
        <!-- 鼻子 -->
        <div class="nose"></div>
        <div class="nose_left"></div>
        <div class="nose_right"></div>
    </div>
    <div class="mouse">
        <!-- 耳朵 -->
        <div class="mouse_ear_left"></div>
        <div class="mouse_ear_right"></div>
        <div class="mouse_ear_left_in"></div>
        <div class="mouse_ear_right_in"></div>
        <!-- 眼睛 -->
        <div class="eye_left_outer"></div>
        <div class="eye_right_outer"></div>
        <div class="eye_left_in"></div>
        <div class="eye_right_in"></div>
        <!-- 鼻子 -->
        <div class="nose_trigon"></div>
        <!-- 胡须 -->
        <div class="beard_left_one"></div>
        <div class="beard_left_two"></div>
        <div class="beard_left_three"></div>
        <div class="beard_right_one"></div>
        <div class="beard_right_two"></div>
        <div class="beard_right_three"></div>
        <!-- 牙齿 -->
        <div class="tooth_feft"></div>
        <div class="tooth_right"></div>
    </div>
    <div class="cow">
        <!-- 耳朵 -->
        <div class="cow_ear_left"></div>
        <div class="cow_ear_right"></div>
        <div class="cow_face">
            <!-- 眼睛 -->
            <div class="cow_eye_left_outer"></div>
            <div class="cow_eye_right_outer"></div>
            <div class="cow_eye_left_in"></div>
            <div class="cow_eye_right_in"></div>
            <!-- 鼻子 -->
            <div class="cow_nose"></div>
            <div class="cow_nose_left"></div>
            <div class="cow_nose_right"></div>
            <!-- 斑点 -->
            <div class="spot_box"></div>
            <div class="spot_box1"></div>
            <div class="spot_box2"></div>
            <div class="spot_box3"></div>
            <div class="spot_box4"></div>
            <!-- 嘴 -->
            <div class="drunk"></div>
        </div>
        <!-- 草 -->
        <div class="grass_box"></div>
        <div class="grass_box1"></div>
        <div class="grass_box2"></div>
        <div class="grass_box3"></div>
        <div class="grass_box4"></div>
        <div class="grass_box5"></div>
        <div class="grass_box6"></div>
        <div class="grass_box7"></div>
        <div class="grass_box8"></div>
        
    </div>
</body>

</html>

css

body {
    width: 100%;
    height: 12000px;
    margin: 0 auto;
    background: skyblue;
}
/* 猪 */
.pig {
    position: relative;
    float: left;
    margin: 52px; 
    width: 240px;
    height: 240px;
    background: #fa8cc8;
    border-radius: 120px; 
}
.ear_left {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 0px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 35px solid #d30073;
    border-left: 25px solid transparent;
    transform: rotate(-22deg);
    left: 30px;
    top: 8px;
}
.ear_right {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 0px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 35px solid #d30073;
    border-left: 25px solid transparent;
    transform: rotate(22deg);
    right: 30px;
    top: 8px;
}
.eye_left {
    position: absolute;
    width: 15px;
    height: 30px;
    background: #000;
    border-radius: 10px;
    top: 70px;
    left: 80px;
}
.eye_right {
    position: absolute;
    width: 15px;
    height: 30px;
    background: #000;
    border-radius: 10px;
    top: 70px;
    right: 80px;
}
.nose {
    position: absolute;
    width: 90px;
    height: 60px;
    background: #fa4eac;
    border-radius: 50%;
    top: 120px;
    left: 50%;
    margin-left: -45px;
}
.nose_left {
    position: absolute;
    width: 18px;
    height: 40px;
    background: #e01b87;
    border-radius: 45%;
    top: 130px;
    left: 92px;
}
.nose_right {
    position: absolute;
    width: 18px;
    height: 40px;
    background: #e01b87;
    border-radius: 45%;
    top: 130px;
    right: 92px;
}

/* 鼠 */
.mouse {
    position: relative;
    float: left;
    margin-top: 52px;
    margin-left: 52px; 
    width: 240px;
    height: 240px;
    background: #8f9595;
    border-radius: 120px; 
}
.mouse_ear_left {
    float: left;
    position: relative;
    width: 100px;
    height: 100px;
    background: #6e6e6e;
    border-radius: 50%;
    margin-top: -20px;
    margin-left: -10px;
}
.mouse_ear_right {
    position: relative;
    float: right;
    width: 100px;
    height: 100px;
    background: #6e6e6e;
    border-radius: 50%;
    margin-top: -20px;
    margin-right: -10px;
}
.mouse_ear_left_in {
    /* float: left; */
    position: relative;
    width: 70px;
    height: 70px;
    background: #e5a95f;
    border-radius: 50%;
    margin-top: -5px;
    margin-left: 5px;
}
.mouse_ear_right_in {
    float: right;
    position: relative;
    width: 70px;
    height: 70px;
    background: #e5a95f;
    border-radius: 50%;
    margin-top: -85px;
    margin-right: 5px; 
}
.eye_left_outer {
    position: absolute;
    width: 45px;
    height: 45px;
    background: #fff;
    border-radius: 50%;
    margin-left: 55px;
    margin-top: 7px;
}
.eye_right_outer {
    /* position: absolute; */
    float:right;
    width: 45px;
    height: 45px;
    background: #fff;
    border-radius: 50%;
    margin-right: 55px;
    margin-top: -7px;
}
.eye_left_in {
    position: absolute;
    width: 15px;
    height: 15px;
    background: #000;
    border-radius: 50%;
    top: 98px;
    left: 70px;
}
.eye_right_in {
    position: absolute;
    width: 15px;
    height: 15px;
    background: #000;
    border-radius: 50%;
    top: 98px;
    right: 70px;
}
.nose_trigon {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 50px solid #6e6e6e;
    border-right: 25px solid transparent;
    border-bottom: 0px solid #6e6e6e;
    border-left: 25px solid transparent;
    top: 120px;
    left: 50%;
    margin-left: -25px;
    margin-top: 14px;
}
/* 左边胡须 */
.beard_left_one {
    position: absolute;
    width: 60px;
    height: 2px;
    background: #000;
    border-radius: 30%;
    transform: rotate(10deg);
    top: 139px;
    left: 42px;
}
.beard_left_two {
    position: absolute;
    width: 58px;
    height: 1px;
    background: #000;
    border-radius: 30%;
    /* transform: rotate(10deg); */
    top: 145px;
    left: 42px;
}
.beard_left_three {
    position: absolute;
    width: 60px;
    height: 2px;
    background: #000;
    border-radius: 30%;
    transform: rotate(350deg);
    top: 150px;
    left: 42px;
}
/* 右边胡须 */
.beard_right_one {
    position: absolute;
    width: 60px;
    height: 2px;
    background: #000;
    border-radius: 30%;
    transform: rotate(-10deg);
    top: 139px;
    right: 42px;
}
.beard_right_two {
    position: absolute;
    width: 58px;
    height: 1px;
    background: #000;
    border-radius: 30%;
    /* transform: rotate(10deg); */
    top: 145px;
    right: 43px;
}
.beard_right_three {
    position: absolute;
    width: 60px;
    height: 2px;
    background: #000;
    border-radius: 30%;
    transform: rotate(-350deg);
    top: 150px;
    right: 42px;
}
/* 牙齿 */
.tooth_feft {
    position: absolute;
    width: 16px;
    height: 25px;
    background: #fff;
    transform: rotate(10deg);
    top: 200px;
    left: 102px;
}
.tooth_right {
    position: absolute;
    width: 16px;
    height: 25px;
    background: #fff;
    transform: rotate(-10deg);
    top: 200px;
    right: 102px;
}

/* 牛 */
.cow {
    position: relative;
    margin-right: 500px;
    margin-top: 52px;
    float: right;
    width: 240px;
    height: 240px;
    background: #fff;
    border-radius: 50%;
}
.cow_face {
    position: relative;
    overflow: hidden;
    /* margin-right: 500px; */
    /* margin-top: 52px; */
    float: right;
    width: 240px;
    height: 240px;
    background: #fff;
    border-radius: 50%;
}
/* 耳朵 */
.cow_ear_left {
    position: absolute;
    width: 18px;
    height:40px;
    border-radius: 6px 6px 0 0;
    background: #000;
    transform: rotate(-35deg);
    top: 2px;
    left: 34px;
    z-index: 2;
}
.cow_ear_right {
    position: absolute;
    width: 18px;
    height:40px;
    border-radius: 6px 6px 0 0;
    background: #000;
    transform: rotate(35deg);
    top: 2px;
    right: 34px;
    z-index: 2;
}
/* 眼睛 */
.cow_eye_left_outer {
    position: absolute;
    width: 50px;
    height: 50px;
    border: 1px solid #000;
    border-radius: 50%;
    top: 52px;
    left: 58px;
}
.cow_eye_right_outer {
    position: absolute;
    width: 50px;
    height: 50px;
    border: 1px solid #000;
    border-radius: 50%;
    top: 52px;
    right: 58px;
}
.cow_eye_left_in {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #000;
    top: 80px;
    left: 74px;
}
.cow_eye_right_in {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #000;
    top: 80px;
    right: 74px;
}
/* 鼻子 */
.cow_nose {
    position: absolute;
    width: 90px;
    height: 60px;
    background: #e5a95f;
    border-radius: 50%;
    top: 110px;
    left: 50%;
    margin-left: -45px;
}
.cow_nose_left {
    position: absolute;
    width: 18px;
    height: 40px;
    background: #8c6a3f;
    border-radius: 45%;
    top: 120px;
    left: 92px;
}
.cow_nose_right {
    position: absolute;
    width: 18px;
    height: 40px;
    background: #8c6a3f;
    border-radius: 45%;
    top: 120px;
    right: 92px;
}
.spot_box {
    position: absolute;
    width: 50px;
    height: 50px;
    background: #000;
    border-radius: 50%;
    top: 95px;
    left:-1px;
}
.spot_box1 {
    position: absolute;
    width: 35px;
    height: 50px;
    background: #000;
    border-radius: 50%;
    transform: rotate(-25deg);
    top: 110px;
    left:-5px;
}
.spot_box2 {
    position: absolute;
    width: 40px;
    height: 40px;
    background: #000;
    border-radius: 50%;
    /* transform: rotate(-25deg); */
    top: -2px;
    left:116px;
}
.spot_box3 {
    position: absolute;
    width: 25px;
    height: 40px;
    background: #000;
    border-radius: 50%;
    transform: rotate(70deg);
    top: -10px;
    left:110px;
}
.spot_box4 {
    position: absolute;
    width: 25px;
    height: 40px;
    background: #000;
    border-radius: 25px;
    transform: rotate(15deg);
    top: 110px;
    right: 2px;
}
/* 嘴 */
.drunk {
    position: absolute;
    width: 50px;
    height: 20px;
    /* background: #000; */
    border-radius: 25px;
    border: 1px solid #000;
    top: 190px;
    right: 60px;
}
/* 草 */
.grass_box{
    position: absolute;
    width: 10px;
    height: 90px;
    background: #399200;
    border-radius: 2px;
    transform: rotate(10deg);
    /* border: 1px solid #000; */
    top: 192px;
    right: 108px;
}
.grass_box1 {
    position: absolute;
    width: 10px;
    height: 90px;
    background: #399200;
    border-radius: 2px;
    /* transform: rotate(10deg); */
    /* border: 1px solid #000; */
    top: 192px;
    right: 90px;
}
.grass_box2{
    position: absolute;
    width: 10px;
    height: 90px;
    background: #399200;
    border-radius: 2px;
    transform: rotate(-10deg);
    /* border: 1px solid #000; */
    top: 192px;
    right: 80px;
}
.grass_box3{
    position: absolute;
    width: 10px;
    height: 90px;
    background: #399200;
    border-radius: 2px;
    transform: rotate(10deg);
    /* border: 1px solid #000; */
    top: 192px;
    right: 75px;
}
.grass_box4{
    position: absolute;
    width: 10px;
    height: 98px;
    background: #399200;
    border-radius: 2px;
    transform: rotate(-28deg);
    /* border: 1px solid #000; */
    top: 188px;
    right: 72px;
}
.grass_box5{
    position: absolute;
    width: 10px;
    height: 90px;
    background: #399200;
    border-radius: 2px;
    transform: rotate(-28deg);
    /* border: 1px solid #000; */
    top: 188px;
    right: 52px;
}
.grass_box6{
    position: absolute;
    width: 10px;
    height: 45px;
    background: #5cba20;
    border-radius: 2px;
    transform: rotate(10deg);
    /* border: 1px solid #000; */
    top: 196px;
    right: 96px;
}
.grass_box7{
    position: absolute;
    width: 10px;
    height: 45px;
    background: #5cba20;
    border-radius: 2px;
    /* transform: rotate(10deg); */
    /* border: 1px solid #000; */
    top: 196px;
    right: 78px;
}
.grass_box8{
    position: absolute;
    width: 10px;
    height: 45px;
    background: #5cba20;
    border-radius: 2px;
    transform: rotate(-30deg);
    /* border: 1px solid #000; */
    top: 196px;
    right: 78px;
}

以上是代码详细 不懂私信

举报

相关推荐

视频汇聚/监控汇聚平台EasyCVR助力小动物保护

后端视频监控视频流解决方案Html/CSS前端开发

[oeasy]python0037_字符画艺术_asciiview_自制小动物_imagick_asciiart

cipythonCodePython编程语言

【绘画素材】一组小动物拟人线稿素材，真的不要太像啦！

yhmx7762视觉艺术手绘

视频监控系统/安防监控/视频AI智能分析：小动物识别算法场景汇总

leetcodelinux算法

AI 实战篇 ｜十分钟学会【动物识别】，快去寻找身边的小动物试试看吧【送书】

人工智能unity游戏引擎动物识别

[oeasy]python0036_牛说_cowsay_小动物说话_asciiart_figlet_lolcat_管道(祝大家新年快乐~)

python当前路径字符串Python编程语言

有趣的css - 音频小动效

css动效设计ux/ui音频动效交互设计Html/CSS前端开发技术人为什么要写博客？

如何实现页面中的小动画，动画按钮 CSS JS （待写）

cssjavascript前端腾讯云服务器前端开发

有趣的CSS - 搜索框小动效

css动效动画搜索框uxHtml/CSS前端开发技术人为什么要写博客？

有趣的css - 图片懒加载小动效

css动效设计交互设计加载动画ux/uiHtml/CSS前端开发技术人为什么要写博客？
0 条评论