欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

用css画一个哆啦A梦

程序员文章站 2022-09-10 14:42:43
原图: 效果图: 虽然说没用啥什么高级的技巧,但这让我感受到了CSS的乐趣! 好好学习,天天向上! ......

原图:

用css画一个哆啦A梦

 

效果图:

用css画一个哆啦A梦

虽然说没用啥什么高级的技巧,但这让我感受到了css的乐趣!

好好学习,天天向上!

<!doctype html>
<html>
<head>
    <title></title>
    <style type="text/css">
    body{
        background-color: #66b3ff;
        height: 300px;
        overflow: hidden;
    }
        #head{
            width: 200px;
            height: 200px;
            position: absolute;
            left: 50%;
            top:31%;
            margin-left: -100px;
            margin-top: -100px;
            background-color: #0080ff;
            border-radius: 999px;
            border: 1px solid black;
        }
        #face{
            width: 179px;
            height: 150px;
            position: absolute;
            left: 43.4%;
            top:22%;
            
            background-color: white;
            border-radius: 999px;
            border: 1px solid black;
        }
        #lefteye{
            width: 50px;
            height: 60px;
            position: absolute;
            left:46.2%;
            top:18%;
            
            background-color: white;
            border-radius: 50%;
            border: 1px solid black;    
        }
        #righteye{
            width: 50px;
            height: 60px;
            position: absolute;
            left:50%;
            top:18%;
            
            background-color: white;
            border-radius: 50%;
            border: 1px solid black;    
        }
        #lefteye1{
            width: 13px;
            height: 20px;
            position: absolute;
            left:48.5%;
            top:22.2%;
            
            background-color: black;
            border-radius: 50%;
            border: 1px solid black;    
        }
        #righteye1{
            width: 13px;
            height: 20px;
            position: absolute;
            left:50.5%;
            top:22.2%;
            background-color: black;
            border-radius: 50%;
            border: 1px solid black;    
        }
        #lefteye2{
            width: 5px;
            height: 8px;
            position: absolute;
            left:48.9%;
            top:23%;
            
            background-color: white;
            border-radius: 50%;
            border: 1px solid black;    
        }
        #righteye2{
            width: 5px;
            height: 8px;
            position: absolute;
            left:50.7%;
            top:23%;
            
            background-color: white;
            border-radius: 50%;
            border: 1px solid black;    
        }
        #nose{
            width: 25px;
            height: 25px;
            position: absolute;
            left:49%;
            top:25.5%;
            
            background-color: red;
            border-radius: 50%;
            border: 1px solid black;
        }
        #nose1{
            width: 6px;
            height: 6px;
            position: absolute;
            left:49.5%;
            top:26.5%;
            
            background-color: white;
            border-radius: 50%;
                
        }
        #line{
            width: 1px;
            height: 100px;
            position: absolute;
            left:49.9%;
            top:29.7%;
            background-color: white;
            border-left: 2px solid #000000;
            margin-left: 1px;
        }
        #line1{
            width: 60px;
            height: 1px;
            position: absolute;
            left:43.5%;
            top:28%;
            background-color: white;
            border-bottom: 1px solid #000000;
            margin-left: 1px;
            transform:rotate(12deg);
        }
            #line2{
            width: 60px;
            height: 1px;
            position: absolute;
            left:43.5%;
            top:32%;
            background-color: white;
            border-bottom: 1px solid #000000;
            margin-left: 1px;
            
        }
            #line3{
            width: 60px;
            height: 1px;
            position: absolute;
            left:43.5%;
            top:36%;
            background-color: white;
            border-bottom: 1px solid #000000;
            margin-left: 1px;
            transform:rotate(-12deg);
        }
        #line4{
            width: 60px;
            height: 1px;
            position: absolute;
            left:51.6%;
            top:28%;
            background-color: white;
            border-bottom: 1px solid #000000;
            margin-left: 1px;
            transform:rotate(-12deg);
        }
        #line5{
            width: 60px;
            height: 1px;
            position: absolute;
            left:51.6%;
            top:32%;
            background-color: white;
            border-bottom: 1px solid #000000;
            margin-left: 1px;
            
        }
        #line6{
            width: 60px;
            height: 1px;
            position: absolute;
            left:51.6%;
            top:36%;
            background-color: white;
            border-bottom: 1px solid #000000;
            margin-left: 1px;
            transform:rotate(12deg);
        }
    
        #mouse{

            width: 130px;
            height: 130px;
            position: absolute;
            left: 45.1%;
            top:30%;
            margin-left: -0.5px;
            background-color: white;
            border-radius: 0 0 65px 65px;
            border-bottom: 2px solid black;
            height: 65px;
        }
        #food{
            width: 80px;
            height: 62px;
            position: absolute;
            left:46.9%;
            top:39.2%;
            
            background-color:#ffaf60;
            border-radius: 50%;
            border: 1px solid black;
        }
        #food1{
            width: 78px;
            height: 57px;
            position: absolute;
            left:47%;
            top:38.9%;
            
            background-color: #ffaf60;
            border-radius: 50%;
            border: 1px solid black;
        }
        #food2{
            width: 73px;
            height: 52px;
            position: absolute;
            left:47.2%;
            top:39.1%;
            
            background-color:#844200;
            border-radius: 50%;
            
        }
        #leftfist{
            width: 50px;
            height: 50px;
            position: absolute;
            left:45%;
            top:40%;
            margin-left: -15px;
            margin-top: -15px;
            background-color: white;
            border-radius: 999px;
            border: 1px solid black;
        }
        #rightfist{
            width: 50px;
            height: 50px;
            position: absolute;
            left:53%;
            top:40%;
            margin-left: -15px;
            margin-top: -15px;
            background-color: white;
            border-radius: 999px;
            border: 1px solid black;
        }
        #lefthand{
            width: 50px;
            height: 70px;
            position: absolute;
            left:43.3%;
            top:44%;
            margin-left: -15px;
            margin-top: -15px;
            background-color: #0080ff;
            border-radius: 50%;
            transform:rotate(34deg);
            border: 1px solid black;
        }
        #righthand{
            width: 50px;
            height: 70px;
            position: absolute;
            left:54.3%;
            top:44%;
            margin-left: -15px;
            margin-top: -15px;
            background-color: #0080ff;
            border-radius: 50%;
            transform:rotate(-34deg);
            border: 1px solid black;
        }
        #tummy{
            width: 110px;
            height: 110px;
            position: absolute;
            left: 53.1%;
            top:58.5%;
            margin-left: -100px;
            margin-top: -100px;
            background-color: white;
            border-radius: 999px;
            border: 1px solid black;
        }
        #bodyy{
            width: 135px;
            height: 115px;
            position: absolute;
            left: 44.7%;
            top:45%;
            background-color: #0080ff;
        }
        #cover{
            width: 400px;
            height: 400px;
            position: absolute;
            left: 35.3%;
            top:62.3%;
            background-color:#66b3ff;
            border-radius: 50%;
        }
        #leftleg{
            width: 80px;
            height: 90px;
            position: absolute;
            left:42%;
            top:53.5%;
            margin-left: -15px;
            margin-top: -15px;
            background-color: white;
            border-radius: 50%;
            border: 1px solid black;
        }
        #rightleg{
            width: 80px;
            height: 90px;
            position: absolute;
            left:53.7%;
            top:53.5%;
            margin-left: -15px;
            margin-top: -15px;
            background-color: white;
            border-radius: 50%;
            border: 1px solid black;
        }
        #pocket{
            width: 88px;
            height: 82px;
            position: absolute;
            left: 46.5%;
            top:51.6%;
            margin-left: -0.5px;
            background-color: white;
            border-radius: 0 0 41px 41px;
            border: 1px solid black;
            height: 41px;

        }
    </style>
</head>
<body>
        <div id="head"></div>
        <div id="face"></div>
        <div id="lefteye"></div>
        <div id="righteye"></div>
        <div id="lefteye1"></div>
        <div id="righteye1"></div>
        <div id="lefteye2"></div>
        <div id="righteye2"></div>
        <div id="nose"></div>
        <div id="nose1"></div>
        <div id="bodyy"></div>
        <div id="tummy"></div>
        <div id="mouse"></div>
        <div id="line"></div>
        <div id="line1"></div>
        <div id="line2"></div>
        <div id="line3"></div>
        <div id="line4"></div>
        <div id="line5"></div>
        <div id="line6"></div>
        <div id="food"></div>
        <div id="food1"></div>
        <div id="food2"></div>
        
        <div id="lefthand"></div>    
        <div id="righthand"></div>    
        
        
        <div id="cover"></div>
        <div id="leftfist"></div>    
        <div id="rightfist"></div>
        <div id="leftleg"></div>    
        <div id="rightleg"></div>    
        <div id="pocket"></div>    
</body>
</html>