码迷，mamicode.com
首页 > Web开发 > 详细

CSS3 绘制360安仔小精灵[原创]

时间：2015-05-01 14:47:23      阅读：132      评论：0      收藏：0      [点我收藏+]

标签：

 

Css3图形通常由矩形，圆形，椭圆，三角形,梯形等组合而成。

矩形，为display：block的块级元素设定宽高，便能实现, 圆角矩形，椭圆，圆形，则通过border-radius 属性来得到。

圆角矩形，几种写法：

1, border-radius: 70px 30px 60px 0px;

按顺时针方向, 上左，上右，下右，下左, 分别定义了矩形4个角的弧度。

如图：

技术分享

2、border-radius: 70px 30px 60px ;

不写第4个（下左角）的值，那么值默认与它的对角（上右角）相等，等同于 border-radius: 75px 30px 60px 30px;

如图：

技术分享

3、border-radius: 70px 30px;
是border-radius: 70px 30px 70px 30px; 的缩写形式，对角的弧度相同。

4. border-radius：30px
是border-radius: 30px 30px 30px 30px; 的缩写形式。

如图：

技术分享

 

椭圆
border-xxx-xxx-radius：x  y;  x, y两个值分别代表着椭圆长轴和短轴长度的一半，第1个值x，是以某角为原点，在横轴方向上取值，第2个值y，是以某角为原点，在竖轴方向上取值，例如: border-top-left-radius:50px 70px;

此时，原点为上左角，在横轴方向取值50px，竖轴方向取值70px，两点间画一条弧线，弧线为所在椭圆的1/4边。

如图：

 技术分享

同样， border-bottom-right-radius:50px 70px;

此时，原点则为下右角，在横轴方向取值50px，竖轴方向取值70px，两点间画一条弧线。

而要想让当前矩形变成椭圆，则要让xxx两个值，分别等于矩形长宽的一半，用百分比就是50%。

border-top-left-radius: 50% 50%;
border-top-right-radius: 50% 50%;
border-bottom-left-radius: 50% 50%;
border-bottom-right-radius: 50% 50%;

代码缩写为 border-radius: 50% ; 即可，得到的椭圆圆点正好是矩形的中心。

如果矩形长宽相等，则画出来的就是圆了。

 

三角形的绘制，需要border属性来实现。

border: 20px solid;
border-top-color:red;
border-right-color:green;
border-bottom-color:blue;
border-left-color:yellow;
width:100px;
height: 100px;
background: black; // 背景色为黑。

如图:

技术分享

为了更清楚的看清border所形成的三角形状， 我们将width 和 height的值均设置为0;

技术分享

一目了然，产生4个不同颜色的三角形。

要形成三角，需要两个相邻边border的配合，只一个边是无法实现的。

如果只定义了红色的上边框，如下代码

border-top: 20px solid red;
width:100px;
height: 100px;
background: black;

那么看图，三角无法形成。

技术分享

 

接下来，假如我们想得到红色三角形，就要让左右边框透明，下边框去掉（或根本不去定义下边框）。

border-top: 20px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
width:0px;
height: 0px;

如图：

技术分享

当然，你可以试着将左边框或右边框去掉 border-left：none,或（border-right：none） 看看会得到什么三角效果，

通过调整border的宽度，可以将这两个直角三角形拼接成任意形状的三角形。

  border-top: 40px solid red;
  border-left: 10px solid transparent;
  border-right: 30px solid transparent;
  width: 0px;
  height: 0px;

如图：

技术分享

a 是 border-left:10px;

b 是 border-right:30px;

c 是 border-top:40px;

 

根据以上技术点的介绍，我们开始绘制安仔， O(∩_∩)O

基本框架的绘制，选择使用绝对位置position:absolute;来布局各个元素，它们需要有一个相同的父级元素position: relative; 来作为参照。

如图：

技术分享

 

眼框

画边框弧线。
border-radius: 35px; 

背景色径向渐变，从圆形的左上角开始。
background: -webkit-radial-gradient(left top, #fffffa, #d5d8df);

包括眼睛里的亮光，也是通过背景渐变的方式，这里采用的是线性渐变。
background: -webkit-gradient(linear, left top, 43% 70%, from(#fff), to(#000));

linear 线性
左上角开始（left，top），横向43%，纵向70%处截止渐变。

触角

Transform该属性允许我们对元素进行旋转、缩放、移动或倾斜，

transform-origin属性，设定中心点，整个图形绕着这个点进行角度变化, 例如：transform-origin:bottom left， 使用左下角作为原点。

rotate(angle) 定义 2D 旋转，规定角度。

-webkit-transform-origin: bottom left;
-webkit-transform: rotate(-13deg);

 

对基本线条着色的过程可以帮助我们调整z-index，也就是各个元素的重叠层次，多余的线条和边角要遮掉。

利用overflow:hidden的属性来截取所要的部分，绘制复杂图形的时候常用的方法就是切割和拼接，将图形切割成一个个简单的小块，通过层叠和旋转变化进行组合。

安仔的身体和双腿，就是拼接而成, 身体部分的弧线，通过border-top-left-radius 等属性来进行微调实现。

最终的结果：

技术分享

 demo源代码：

技术分享 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>demo</title>
    <style type="text/css">
        .wapper {
            position: relative;
            width: 260px;
            height: 373px;
            left: 100px;
            margin-top: 100px;
        }
        .bodyMain {
            width: 260px;
            height: 373px;
            border: 3px solid #538a47;
            border-bottom: 3px solid  transparent;
            border-top-left-radius: 173% 70%;
            border-top-right-radius: 173% 70%;
            border-bottom-right-radius: 50% 290%;
            border-bottom-left-radius: 50% 290%;
            position: absolute;
            z-index: 5;
            background: -webkit-radial-gradient(bottom, rgba(194,220,131,1), #73c443);
        }
        .footer {
            width: 75px;
            height: 50px;
            border-top: 1px dotted #538a47;
            border-bottom: 3px solid #538a47;
            position: absolute;
            bottom: -9px;
            z-index: 7;
            background: -webkit-radial-gradient(bottom, rgba(194,220,131,1), #73c443);
        }
        .footerLeft {
            left: 16px;
            border-bottom-left-radius: 73% 151%;
            border-bottom-right-radius: 55% 119%;
            border-left: 2px solid #538a47;
        }
        .footerRight {
            right: 10px;
            border-bottom-right-radius: 73% 151%;
            border-bottom-left-radius: 55% 119%;
            border-right: 2px solid #538a47;
        }
        .chassis{
            border-top: 3px solid #538a47;
            position: absolute;
            bottom: 42px;
            width: 98px;
            left: 84px;
            z-index: 6;
            background-color: black;
        }
        .eyes{
            width: 70px;
            height: 70px;
            border-radius: 35px;
            position: absolute;
            z-index: 8;
            background: -webkit-radial-gradient(left top, #fffffa, #d5d8df);
            box-shadow: 1px 1px #4f893c;
        }
        .eyesLeft {
            left: 25px;
            top: 50px;
        }
        .eyesRight {
            right: 17px;
            top: 50px;
        }
        .pupil{
            position: absolute;
            top: 6px;
            left: 13px;
            width: 38px;
            height: 38px;
            border: 1px solid #aaa;
            border-radius: 50%;
            background-color: #000;
        }
        .pupil i {
            display:block;
            width: 25px;
            height: 25px;
            border-radius: 25px;
            background: -webkit-gradient(linear, left top, 43% 70%, from(#fff), to(#000));
            position: absolute;
            left: 5px;
            top: 3px;
            z-index: 10;
        }
        .pupil cite {
            display:block;
            width: 25px;
            height: 25px;
            border-radius: 25px;
            background: -webkit-gradient(linear, right bottom, 79% 61%, from(#fff), to(#000));
            position: absolute;
            left: 10px;
            top: 10px;
        }
        .mouth{
            position: absolute;
            left: 110px;
            top: 120px;
            border-bottom: 10px solid #358a46;
            width: 45px;
            height: 10px;
            border-bottom-right-radius: 50px 30px;
            border-bottom-left-radius: 50px 30px;
        }
        .arm {
            position: absolute;
            width: 40px;
            height: 40px;
            border: 3px solid #538a47;
            border-radius: 50%;
            top: 60%;
            background: -webkit-radial-gradient(bottom, rgba(194,220,131,1), #73c443);
            z-index: 4;
        }
        .arm_l {
            left: -20px;
        }
        .arm_r {
            right: -30px;
        }
        .arm i {
            position: absolute;
            display: block;
            width: 30px;
            height: 30px;
            border-radius: 30px;
        }
        .arm_r i {
            background: -webkit-gradient(linear, right top, 59% 53%, from(#fff), to(rgba(147,205,92,0.1)));
            left: 7px;
            top: 1px;
        }
        i.armLeft{
            left: -10px;
            border-top-left-radius: 14px 80px;
            position: absolute;
            top: 143px;
            display: block;
            width: 10px;
            height: 80px;
            border: 3px solid #538a47;
            background: -webkit-linear-gradient(bottom, rgba(194,220,131,1), #73c443);
        }
        i.armRight{
            position: absolute;
            top: 143px;
            display: block;
            width: 10px;
            height: 80px;
            border: 3px solid #538a47;
            background: -webkit-linear-gradient(bottom, rgba(194,220,131,1), #73c443);
            left: 259px;
            border-top-right-radius: 14px 80px;
        }
        .corner {
            width: 25px;
            height: 25px;
            border: 3px solid #538a47;
            position: absolute;
            height: 25px;
            width: 5px;
            top: -19px;
            z-index: 4;
            background: -webkit-linear-gradient(bottom, rgba(194,220,131,1), #73c443);
        }
        .cornerLeft {
            left: 63px;
            -webkit-transform-origin: bottom left;
            -webkit-transform: rotate(-13deg);
            -moz-transform-origin: bottom left;
            -moz-transform: rotate(-13deg);
            -o-transform-origin: bottom left;
            -o-transform: rotate(-13deg);
            transform-origin: bottom left;
            transform: rotate(-13deg);
        }
        .cornerRight{
            left: 199px;
            -webkit-transform-origin: bottom left;
            -webkit-transform: rotate(13deg);
            -moz-transform-origin: bottom left;
            -moz-transform: rotate(13deg);
            -o-transform-origin: bottom left;
            -o-transform: rotate(13deg);
            transform-origin: bottom left;
            transform: rotate(13deg);
        }
        .corner i {
            width: 20px;
            height: 20px;
            border: 3px solid #538a47;
            display: block;
            border-radius: 20px;
            position: absolute;
            top: -26px;
            left: -10px;
            background: -webkit-radial-gradient(bottom, rgba(194,220,131,1), #73c443);
            z-index: 5;
        }
        .corner cite{
            display:block;
            width: 17px;
            height: 17px;
            border-radius: 17px;
            background: -webkit-gradient(linear, left top, 46% 95%, from(#fff), to(rgba(147,205,92,0.2)));
            position: absolute;
            left: -6px;
            top: -22px;
            z-index: 7;
        }
        .footerShadow {
            background-color: #949599;
            width: 240px;
            height: 30px;
            position: absolute;
            bottom: -10px;
            left: 10px;
            border-radius: 50%;
            z-index: 0;
        }
        .white {
            height: 50px;
            width: 100px;
            position: absolute;
            bottom: -5px;
            width: 265px;
            background-color: #fff;
        }
    </style>
  </head>
<body>
<div style="width:0px;height:0px;overflow:hidden;" id="aaaa">
    <img src=" http://p0.qhimg.com/d/inn/4e1ae987/icon/apple-touch-icon-120x120.png" alt="" />
</div>
    <!-- <img src="log.jpg"> -->
    <div class="wapper">
        <div class="corner cornerLeft">
            <i></i>
            <cite></cite>
        </div>
        <div class="corner cornerRight">
            <i></i>
            <cite></cite>
        </div>
        <div class="arm arm_l"></div>
        <i class="armLeft"></i>
        <div class="arm arm_r"><i></i></div>
        <i class="armRight"></i>
        <div class="bodyMain">
            <div class="mouth"></div>
            <div class="white"></div>
        </div>
        <div class="eyes eyesLeft"><div class="pupil"><i></i><cite></cite></div></div>
        <div class="eyes eyesRight"><div class="pupil"><i></i><cite></cite></div></div>
        <div class="footer footerLeft"></div>
        <div class="footer footerRight"></div>
        <div class="chassis"></div>
    </div>
</body>
</html>
View all Code

 

CSS3 绘制360安仔小精灵[原创]

标签：

原文地址：http://www.cnblogs.com/fengfan/p/4461407.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！