- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>CSS3画安卓标志</title>
- <style>
- *{margin: 0;padding: 0;}
- div div{
- position: relative;
- background: #A4CA39;
- }
- .android {
- height: 404px;
- width: 334px;
- margin: 100px auto;
- }
- .head{
- width: 220px;
- height: 100px;
- border-radius: 110px 110px 0 0;
- -moz-border-radius: 110px 110px 0 0;
- -webkit-border-radius: 110px 110px 0 0;
- -webkit-transition: all 0.1s ease-in;
- }
- .head:hover{
- -webkit-transform: rotate(-5deg) translate(-4px, -8px);
- transform: rotate(-5deg) translate(-4px, -8px);
- -moz-transform: rotate(-5deg) translate(-4px, -8px);
- }
- .l-angle, .r-angle{
- width: 6px;
- height: 50px;
- position: absolute;
- border-radius: 3px;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- top: -34px;
- }
- .l-angle{
- left: 50px;
- transform: rotate(-30deg);
- -webkit-transform: rotate(-30deg);
- -moz-transform: rotate(-30deg);
- }
- .r-angle{
- right: 50px;
- transform: rotate(30deg);
- -webkit-transform: rotate(30deg);
- -moz-transform: rotate(30deg);
- }
- .l-eye, .r-eye{
- width: 20px;
- height: 20px;
- background: #ffffff;
- position: absolute;
- top: 42px;
- border-radius: 50%;
- }
- .l-eye{
- left: 50px;
- }
- .r-eye{
- right: 50px;
- }
- .body{
- width: 220px;
- height: 184px;
- top: 10px;
- border-radius: 0 0 25px 25px;
- -webkit-border-radius: 0 0 25px 25px;
- -moz-border-radius: 0 0 25px 25px;
- }
- .l-han, .r-han{
- height: 150px;
- border-radius: 25px;
- -moz-border-radius: 25px;
- -webkit-border-radius: 25px;
- }
- .l-han{
- left: -58px;
- }
- .r-han{
- right: -58px;
- }
- .l-han:hover{
- -webkit-transform: rotate(15deg) translate(-14px, 0);
- -transform: rotate(15deg) translate(-14px, 0);
- -moz-transform: rotate(15deg) translate(-14px, 0);
- }
- .r-han:hover{
- -webkit-transform: rotate(-30deg) translate(30px, 0);
- -transform: rotate(-30deg) translate(30px, 0);
- -moz-transform: rotate(-30deg) translate(30px, 0);
- }
- .l-han, .r-han,
- .l-foot, .r-foot{
- position: absolute;
- width: 50px;
- -webkit-transition: all 0.1s ease-in;
- }
- .l-foot, .r-foot{
- height: 80px;
- top: 182px;
- border-radius: 0 0 25px 25px;
- -moz-border-radius: 0 0 25px 25px;
- -webkit-border-radius: 0 0 25px 25px;
- }
- .l-foot{left: 45px;}
- .r-foot{right: 45px;}
- </style>
- </head>
- <body>
- <!--
- 1. 首先写出安卓标志的原型:头/身体/手/脚
- 2. 给安卓添加基本样式
- 3. 添加点动画
- -->
- <div class="android">
- <div class="head">
- <!-- 两个触角 -->
- <div class="l-angle"></div>
- <div class="r-angle"></div>
- <!-- 两只眼睛 -->
- <div class="l-eye"></div>
- <div class="r-eye"></div>
- </div>
- <div class="body">
- <!-- 两只手 -->
- <div class="l-han"></div>
- <div class="r-han"></div>
- <!-- 两只脚 -->
- <div class="l-foot"></div>
- <div class="r-foot"></div>
- </div>
- </div>
- </body>
- </html>