Maison >interface Web >tutoriel HTML >css3写的android logo_html/css_WEB-ITnose
css3写的android logo_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-21 09:14:38921parcourir
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>android</title> <style type="text/css"> *{ margin: 0; padding: 0; } div.head{ margin-top: 100px; margin-left: 200px; width: 200px; height: 100px; background: greenyellow; border-top-left-radius: 100px; border-top-right-radius: 100px; position: relative; } div.head:after{ content:""; position: absolute; top: 50px; left: 50px; width: 20px; height: 20px; background: white; border-radius: 10px; } div.head:before{ content:""; position: absolute; top: 50px; right: 50px; width: 20px; height: 20px; background: white; border-radius: 10px; } div.left-ear{ width: 10px; height: 50px; background: greenyellow; position: absolute; left: 30px; top: -30px; transform: rotate(-30deg); -webkit-transform: rotate(-30deg); -ms-transform: rotate(-30deg); } div.right-ear{ width: 10px; height: 50px; background: greenyellow; position: absolute; right: 30px; top: -30px; transform: rotate(30deg); -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); } div.body{ width: 200px; height: 200px; background: greenyellow; margin-top: 10px; margin-left: 200px; border-bottom-right-radius: 100px; border-bottom-left-radius: 100px; position: relative; } div.body:after{ content:""; position: absolute; top:0; left: -40px; width: 30px; height: 130px; background: greenyellow; border-radius: 20px; } div.body:before{ content:""; position: absolute; top:0; right: -40px; width: 30px; height: 130px; background: greenyellow; border-radius: 20px; } div.body_1{ width: 50px; height: 50px; background: white; position: absolute; top: 50px; left: 70px; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); box-shadow: 0px 0px 50px #ADFF2F; } div.left_foot{ width: 30px; height: 100px; background: greenyellow; position: absolute; top:150px; left:20px; border-radius: 20px; z-index: -1; } div.right_foot{ width: 30px; height: 100px; background: greenyellow; position: absolute; top:150px; right:20px; border-radius: 20px; z-index: -1; } @-webkit-keyframes eye{ 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} } @keyframes eye{ 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} } div.body:hover{ -webkit-animation-name: eye; -webkit-animation-duration: 1s; animation-name: eye; animation-duration: 1s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;; } </style> </head> <body> <div class="head"> <div class="left-ear"></div> <div class="right-ear"></div> </div> <div class="body"> <div class="body_1"></div> <div class="left_foot"></div> <div class="right_foot"></div> </div> </body></html>
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：为什么我的width不起作用？_html/css_WEB-ITnoseArticle suivant：纯CSS写的下拉菜单_html/css_WEB-ITnose