×

用CSS样式画会动的安卓标志

作者:andy0012018.03.01来源:Web前端之家浏览:1919评论:0
关键词:androidcss3
微信公众号

微信公众号

用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>


温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://jiangweishan.com/article/biaozhi12312312312.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • admin

    关于微信小程序,后面会出一些文章的,请关注网站更新。。。...

  • webred

    博主可以分享点小程序的文章......

  • 访客

    可以用。...

  • admin

    可以的,可以联系下QQ,或者加群。...

  • admin

    可以的,可以联系下QQ,或者加群。...

  • Web前端技能

    申请交换友链,可以吗...

  • 访客

    代码不可以用...

  • asidl

    这个DEMO应该再细点更好。。。...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2013-2018 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero