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

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

转载于:https://www.cnblogs.com/fengfan/p/4461407.html

CSS3 绘制360安仔小精灵[原创]相关推荐

Qt制作360安仔精灵
有两个QLabel, 一个显示静态图片, 一个显示动态图片, 相互切换显示 .. #ifndef TESTCHICKEN_H #define TESTCHICKEN_H#include <QtW ...
html制作卡通图案代码,使用HTML和CSS3绘制基本卡通图案的示例分享
这篇文章主要介绍了使用CSS3绘制基本卡通图案的示例分享,不过必须承认,这样做的代码量并不是很少...well,需要的朋友可以参考下纯HTML+CSS实现阿童木头像先上最终效果图: 在里面主要用的 ...
html如何绘制棒棒糖,CSS3绘制好玩ICON-有棒棒糖转转效果哦
CSS3可以用来实现很多很棒的UI效果,包括样式上的提升以及动画效果方面的改善.有很多文章讲述了如何用纯CSS画出一些基本的图形,比如说各种形状的三角形,具体可见文末参考资料3中的<The Sh ...
html 根据坐标画多边形,28种css3绘制多边形代码分享
本文分享了28种CSS3绘制多边形的代码.在做网页项目中需要使用多边形扇形图形来完成一些功能,第一印象就是使用CSS3来完成.经过查资料发现了transform 的skew()正好合适且且使用方便. ...
css3:绘制android3蜂巢Honeycomb
之前写过一个类似的,css3绘制android机器人图形.谷歌最近发布了android3,这次的图形挺好看的,很多地方都用到圆角,所以就想到用css3来实现.点击观看演示隔天再做了些修改,比之前的好 ...
【附全部代码+图片】使用HTML5+CSS3绘制HTML5的logo——Web前端系列学习笔记
文章目录页面展示技术要点代码实现 html代码 CSS代码用到的图片页面展示本项目将使用HTML5+CSS3绘制出HTML5的logo,页面效果如下所示. 技术要点 HTML5新特性 HT ...
css3绘制的钢琴代码
下载地址 css3绘制的钢琴代码,键盘带动画效果. dd:
如何使用HTML5+CSS3绘制一个QQ 企鹅Logo
看了腾讯全端团队AlloyTeam发布的这篇<使用CSS3绘制腾讯QQ的企鹅Logo>文章,自己仿照了一下,做了个是山寨版的QQ企鹅. 之所以称之为山寨版,是因为原版绘出来的是这样: 而我 ...
css画钟表_如何使用css3绘制出圆形动态时钟
使用css3绘制出圆形动态时钟的原理众所周知的是div形状是方形的,那么我们首先需要使用border-radius属性将其变换成圆形. 为了使指针转动起来,我们需要使用-webkit-transfo ...

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

CSS3 绘制360安仔小精灵[原创]相关推荐

最新文章

热门文章