用CSS样式画安卓标志。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css3画安卓标志 - Web前端之家</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>
网友评论文明上网理性发言 已有0人参与
发表评论: