本文主要包含html5,css3,css3机器猫等相关知识,佚名 希望在学习及工作中可以帮助到您
下面一段代码是有关html5和css3实现机器猫的代码，具体代码如下所示：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>机器猫</title>
- <style type="text/css">
- * {
- margin: 0;
- padding: 0;
- }
- .whole {
- width: 800px;
- margin: 20px auto;
- /*border: 2px solid yellow;*/
- background-color: white;
- position: relative;
- }
- .head {
- margin: 0 auto;
- position: relative;
- width: 500px;
- height: 440px;
- background-color: #00b7e7;
- border-radius: 220px;
- border: 1px solid red;
- }
- .eye .left_eye,
- .eye .right_eye {
- width: 100px;
- height: 130px;
- background-color: white;
- border: 2px solid black;
- border-radius: 50px;
- position: absolute;
- top: 50px;
- z-index: 3;
- }
- .eye .LeyeBall,
- .eye .ReyeBall {
- width: 20px;
- height: 20px;
- background: black;
- border-radius: 10px;
- position: absolute;
- top: 65px;
- }
- .eye .left_eye {
- left: 146px;
- }
- .eye .right_eye {
- left: 250px;
- }
- .eye .LeyeBall {
- right: 10px;
- }
- .eye .ReyeBall {
- left: 10px;
- }
- .face {
- position: relative;
- z-index: 2;
- }
- .face .feature {
- width: 400px;
- height: 320px;
- border-radius: 160px;
- position: absolute;
- top: 100px;
- left: 50px;
- background: white;
- }
- .face .nose {
- width: 45px;
- height: 50px;
- border-radius: 23px;
- background-color: #cf3318;
- border: 2px solid black;
- position: absolute;
- top: 165px;
- left: 225px;
- z-index: 3;
- }
- .face .Nline {
- width: 3px;
- height: 160px;
- background: black;
- position: absolute;
- top: 218px;
- left: 248px;
- z-index: 3;
- }
- .face .mouth {
- width: 280px;
- height: 280px;
- border-bottom: 5px solid black;
- border-radius: 140px;
- position: absolute;
- top: 98px;
- left: 105px;
- }
- .face .mustache .MutR_higher {
- width: 80px;