今天偶然看到朋友用纯css3画了一个素描杯，很受启发，css3这么好玩的代码再不玩就要荒废了，于是决定画个哆啦A梦来复习一下css基础知识。用css作画最重要的就是要做好定位，其次是通过边框属性来切割棱角分明的盒子，让线条看起来流畅，还有就是通过z-index属性来控制图层，@keyframes可以让你的图片动起来，更加生动，接下来就一起复习一下这几个属性吧，然后就可以自己动手作画了。
1. position属性：规定元素的定位类型
（1）说明：
- 默认值：static
- 继承性：no
- 版本：css2
- javascript语法：object.style.position="absolute"
（2）可能的值：
- static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
- absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
- fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。
- relative：生成相对定位的元素，相对于其正常位置进行定位。
- inherit：规定应该从父元素继承 position 属性的值。
2.border属性
（1）border-style
属性值 功能描述
none 无边框
hidden 与“none”相同，应用于表格时用于解决边框冲突问题
dotted 点状边框
dashed 虚线边框
solid 实线边框
double 双线
groove 3D凹槽边框，其效果取决于border-color的值
ridge 3D垄状边框
inset 3D inset边框
outset 3D outset边框
inherit 规定应该从父元素继承边框样式，部分浏览器不支持这个属性（2）border-color
（3）border-radius
border-top-left-radius:<水平圆角半径值>/<垂直圆角半径值>;
border-top-right-radius:<水平圆角半径值>/<垂直圆角半径值>;
border-bottom-left-radius:<水平圆角半径值>/<垂直圆角半径值>;
border-bottom-left-radius:<水平圆角半径值>/<垂直圆角半径值>;（4）box-shadow
- none：默认值。元素没有任何阴影效果。
- inset：阴影类型，可选值。默认为外阴影，取值'inset'设置内阴影。
- x-offset：阴影水平偏移量。取正值，阴影在元素右边；取负值，反之。
- y-offset：阴影垂直偏移量。取正值，阴影在元素底部；取负值，反之。
- blur-radius：阴影模糊半径，可选参数。0：不具有模糊效果，值越大越模糊。
- spread-radius：阴影扩展半径，可选参数。取正值，整个阴影都延展扩大；取负值，反之。
- color：阴影颜色，可选参数。各浏览器默认颜色不相同。
3. z-index属性：设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
（1）说明：该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
- 默认值：auto
- 继承性：no
- 版本：css2
- javascript语法：object.style.zindex="1"
（2）可能的值
- auto：默认。堆叠顺序与父元素相等。
- number：设置元素的堆叠顺序。
- inherit：规定应该从父元素继承 z-index 属性的值。
4. @keyframes规则
（1）animation实现动画效果：
- 通过类似flash动画中的关键帧来声明一个动画；
- 在animation属性中调用关键帧声明的动画，从而实现一个更为复杂的动画效果。
（2）浏览器兼容性：
- 在chrome4+，Safari4.0+，Firefox5.0+至Firefox 16浏览器中需要添加各浏览器的私有属性。
- 在IE 10+，Firefox 16+和opera 12+浏览器中支持animation的标准语法。
- 在opera 16+，iOS Safari 3.2+，android browser 2.1+，blackberry browser 7.0+浏览器使用animation需要添加前缀-webkit。
（3）animation子属性
- animation-name:指定一个关键帧动画的名字，这个动画名必须对应一个@keyframes规则。
- animation-duration:设置动画播放所需时间，一般以秒为单位。
- animation-timing-function:设置动画的播放方式。
- animation-delay:指定动画开始时间，一般以秒为单位。
- animation-iteration-count:设置动画播放的循环次数。
- animation-direction:设置动画的播放方向。
- animation-play-state:设置动画的播放状态。
- animation-fill-mode:设置动画的时间外属性。
（4）@keyframes语法
@keyframes IDENT{
0%{
/*css样式*／
}
percentage{
/*css样式*／
}
100%{
/*css样式*／
}
}5.效果演示：
6.代码展示：
<!DOCTYPE html>
<html>
<head>
<title>叮当猫</title>
<link rel="stylesheet" type="text/css" href="Doraemon.css">
</head>
<body>
<div class="wrapper">
<!--哆啦A梦-->
<div class="doraemon">
<!--头部-->
<div class="head">
<!--眼睛部分-->
<div class="eyes">
<!--左眼-->
<div class="eye left">
<!--左眼球-->
<div class="eyeball bleft"></div>
</div>
<!--右眼-->
<div class=" eye right">
<!--右眼球-->
<div class="eyeball bright"></div>
</div>
</div>
<!--脸部-->
<div class="face">
<!--白色脸面-->
<div class="whiteFace"></div>
<!--鼻头-->
<div class="nose">
<!--鼻头高光部分-->
<div class="light"></div>
</div>
<!--人中-->
<div class="philtrum"></div>
<!--嘴巴-->
<div class="mouth"></div>
<!--胡须-->
<div class="whiskers">
<div class="whisker r1 r160"></div>
<div class="whisker r2"></div>
<div class="whisker r3 r20"></div>
<div class="whisker l1 r20"></div>
<div class="whisker l2"></div>
<div class="whisker l3 r160"></div>
</div>
</div>
<!--脸部结束-->
</div>
<!--头部结束-->
<!--项圈-->
<div class="collar">
<!--铃铛-->
<div class="bell">
<div class="bell_line"></div>
<div class="bell_circle"></div>
<div class="bell_under"></div>
<div class="bell_light"></div>
</div>
</div>
<!--项圈结束-->
<!--身体-->
<div class="body">
<!--肚子-->
<div class="belly"></div>
<!--肚兜-->
<div class="bellyband"></div>
<!--口袋-->
<div class="pocket"></div>
<!--修饰口袋-->
<div class="pocketAdorn"></div>
</div>
<!--身体结束-->
<!--左手-->
<div class="leftHand">
<!--手臂-->
<div class="arm"></div>
<!--手掌-->
<div class="palm"></div>
<!--修饰手臂-->
<div class="armAdorn"></div>
</div>
<!--左手结束-->
<!--右手-->
<div class="rightHand">
<!--手臂-->
<div class="arm"></div>
<!--手掌-->
<div class="palm"></div>
<!--修饰手臂-->
<div class="armAdorn"></div>
</div>
<!--右手结束-->
<!--脚部-->
<div class="foot">
<!--左脚-->
<div class="leftFoot"></div>
<!--右脚-->
<div class="rightFoot"></div>
<!--腿间隙-->
<div class="legGap"></div>
</div>
<!--脚部结束-->
</div>
<!--哆啦A梦结束-->
</div>
</body>
</html>.wrapper{
margin: 50px 100px;
}
.doraemon{
position: relative;
}
.head{
position: relative;
width: 320px;
height: 300px;
border-radius: 150px;
background: #07bbee;
/*此放射渐变也是使脸的左下角暗一些，看上去更真实*/
background: -webkit-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);
background: -moz-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);
background: -ms-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);
border: 2px solid #555;
box-shadow: -5px 10px 15px rgba(0,0,0,0.45);
}
.face{
/*让所有脸部元素可自由定位*/
position: relative;
/*脸在头部背景上面*/
z-index: 2;
}
.whiteFace{
width: 265px;
height: 195px;
border-radius: 150px;
position: absolute;
top: 75px;
left: 25px;
background: #fff;
/*此放射渐变也是使脸的左下角暗一些，看上去更真实*/
background: -webkit-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);
background: -moz-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);
background: -ms-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);
}
.nose{
width: 30px;
height: 30px;
border-radius: 15px;
background:#c93300;
border:2px solid #000;
position: absolute;
top: 110px;
left: 140px;
/*鼻子在白色脸底上面*/
z-index: 3;
}
.nose .light{
width: 10px;
height: 10px;
border-radius: 5px;
/*通过阴影实现高光*/
box-shadow: 19px 8px 5px #fff;
}
.philtrum{
width: 3px;
height: 100px;
background: #333;
position: absolute;
top: 143px;
left: 155px;
z-index: 3;
}
.mouth{
width: 220px;
height: 400px;
/*通过底边框加上圆角模拟微笑嘴巴*/
border-radius: 120px;
border-bottom: 3px solid #333;
position: absolute;
top: -160px;
left: 45px;
}
.eyes{
position: relative;
z-index: 3;
}
.eye{
width: 72px;
height: 82px;
background: #fff;
border: 2px solid #000;
border-radius: 35px;
position: absolute;
top: 40px;
-webkit-animation: eyemove 3s linear infinite;
-moz-animation: eyemove 3s linear infinite;
-ms-animation: eyemove 3s linear infinite;
-o-animation: eyemove 3s linear infinite;
animation: eyemove 3s linear infinite;
}
/*让眼睛动起来*/
@-webkit-keyframes eyemove {
70%{
margin:0 0 0 0;
}
80% {
margin: -22px 0 0 0;
}
85% {
margin: -22px 0 0 5px;
}
90% {
margin: -22px 10px 0 0;
}
93% {
margin: -22px 0 0 0;
}
96% {
margin: 0 0 0 0;
}
}
@-moz-keyframes eyemove {
70% {
margin: 0 0 0 0;
}
80% {
margin: -22px 0 0 0;
}
85% {
margin: -22px 0 0 5px;
}
90% {
margin: -22px 10px 0 0;
}
93% {
margin: -22px 0 0 0;
}
96% {
margin: 0 0 0 0;
}
}
@-o-keyframes eyemove {
70% {
margin: 0 0 0 0;
}
80% {
margin: -22px 0 0 0;
}
85% {
margin: -22px 0 0 5px;
}
90% {
margin: -22px 10px 0 0;
}
93% {
margin: -22px 0 0 0;
}
96% {
margin: 0 0 0 0;
}
}
@keyframes eyemove {
70% {
margin: 0 0 0 0;
}
80% {
margin: -22px 0 0 0;
}
85% {
margin: -22px 0 0 5px;
}
90% {
margin: -22px 10px 0 0;
}
93% {
margin: -22px 0 0 0;
}
96% {
margin: 0 0 0 0;
}
}
.eyes .left{
left: 82px;
}
.eyes .right{
left: 156px;
}
.eyeball{
width: 14px;
height: 14px;
background: #000;
border-radius: 7px;
position: absolute;
top: 40px;
}
.eye .bleft{
left: 50px;
}
.eye .bright{
left: 7px;
}
.whiskers{
width: 220px;
height: 80px;
background: #fff;
border-radius: 15px;
position: absolute;
top: 120px;
left: 45px;
z-index: 2;
}
.whisker{
width: 60px;
height: 2px;
background: #333;
position: absolute;
z-index: 2;
}
.l1{
top: 25px;
left: 0;
}
.l2{
top: 45px;
left: -2px;
}
.l3{
top: 65px;
left: 0;
}
.r1{
top: 25px;
left: 165px;
}
.r2{
top: 45px;
left: 167px;
}
.r3{
top: 65px;
left: 165px;
}
.r20{
-webkit-transform: rotate(200deg);
-moz-transform: rotate(200deg);
-ms-transform: rotate(200deg);
-o-transform: rotate(200deg);
transform: rotate(200deg);
}
.r160{
-webkit-transform: rotate(160deg);
-moz-transform: rotate(160deg);
-ms-transform: rotate(160deg);
-o-transform: rotate(160deg);
transform: rotate(160deg);
}
.collar{
width: 230px;
height: 20px;
background: #c40;
/*线性渐变 让围巾看上去更自然*/
background: -webkit-gradient(linear,left top,left bottom,from(#c40),to(#800400));
background: -moz-linear-gradient(center top,#c40,#800400);
background: -ms-linear-gradient(center top,#c40,#800400);
border: 2px solid #000;
border-radius: 10px;
position: relative;
top: -40px;
left: 45px;
z-index: 4;
}
.bell{
width: 40px;
height: 40px;
_overflow: hidden; /*IE6 hack*/
border-radius: 50px;
border:2px solid #000;
background: #f9f12a;
background: -webkit-gradient(linear, left top, left bottom, from(#f9f12a),color-stop(0.5, #e9e11a), to(#a9a100));
background: -moz-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100);
background: -ms-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100);
box-shadow: -5px 5px 10px rgba(0,0,0,0.25);
position: absolute;
top: 5px;
left: 90px;
}
.bell_line{
width: 36px;
height: 2px;
background: #f9f12a;
border: 2px solid #333;
border-radius: 3px 3px 0 0;
position: absolute;
top: 10px;
}
.bell_circle{
width: 12px;
height: 10px;
background: #000;
border-radius: 5px;
position: absolute;
top: 20px;
left: 14px;
}
.bell_under{
width: 3px;
height: 15px;
background: #000;
position: absolute;
top: 27px;
left: 18px;
}
.bell_light{
width: 12px;
height: 12px;
border-radius: 10px;
box-shadow: 19px 8px 5px #fff;
position: absolute;
top: -5px;
left: 5px;
opacity: 0.7;
}
.body{
position: relative;
top: -310px;
}
.belly{
width: 220px;
height: 165px;
background: #07beea;
background: -webkit-gradient(linear,right top,left top,from(#07beea),color-stop(0.5, #0073b3),color-stop(0.75,#00b0e0), to(#0096be));
background: -moz-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);
background: -ms-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);
border: 2px solid #333;
position: absolute;
top: 265px;
left: 50px;
}
.bellyband{
width: 170px;
height: 170px;
background: #fff;
background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000));
background: -moz-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000);
background: -ms-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000);
border:2px solid #000;
border-radius: 85px;
position: absolute;
top: 230px;
left: 72px;
}
.pocket{
width: 130px;
height: 130px;
border-radius: 65px;
background: #fff;
background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd), to(#fff));
background: -moz-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff);
background: -ms-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff);
border:2px solid #000;
position: absolute;
top: 250px;
left: 92px;
}
.pocketAdorn{
width: 134px;
height: 60px;
background: #fff;
border-bottom: 2px solid #000;
position: absolute;
top: 259px;
left: 92px;
}
.leftHand{
width: 100px;
height: 100px;
position: absolute;
top:272px;
left: -10px;
}
.rightHand{
width: 100px;
height: 100px;
position: absolute;
top:272px;
left: 248px;
}
.arm{
width: 80px;
height: 50px;
background: #07beea;
background: -webkit-gradient(linear, left top, left bottom, from(#07beea),color-stop(0.85,#07beea), to(#555));
background: -moz-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555);
background: -ms-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555);
border:1px solid #000000;
box-shadow: -10px 7px 10px rgba(0, 0, 0, 0.35);
z-index: -1;
position: relative;
top: 17px;
}
.leftHand .arm{
/*背光一面使用纯色，使其有立体感*/
background: #0096be;
box-shadow: 5px -7px 10px rgba(0, 0, 0, 0.25);
-webkit-transform: rotate(145deg);
-moz-transform: rotate(145deg);
-ms-transform: rotate(145deg);
-o-transform: rotate(145deg);
transform: rotate(145deg);
}
.rightHand .arm{
-webkit-transform: rotate(35deg);
-moz-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
transform: rotate(35deg);
}
.palm{
width: 60px;
height: 60px;
border-radius: 30px;
border: 2px solid #000;
background: #fff;
background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.5,#fff),color-stop(0.70,#eee),color-stop(0.8,#ddd), to(#999));
background: -moz-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999);
background: -ms-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999);
position: absolute;
top: 32px;
}
.leftHand .palm{
left: -20px;
}
.rightHand .palm{
left: 40px;
}
.armAdorn{
width: 5px;
height: 45px;
background: #07beea;
position: relative;
top: -45px;
}
.leftHand .armAdorn{
/*同理，背光一面使用纯色，使其有立体感*/
background: #0096be;
left: 60px;
}
.rightHand .armAdorn{
left: 22px;
}
.foot{
width: 280px;
height: 40px;
position: relative;
top: 55px;
left: 20px;
}
.leftFoot,.rightFoot{
width: 125px;
height: 30px;
background: #fff;
background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));
background: -moz-linear-gradient(right top, #fff, #fff 75%, #eee 85%, #999);
background: -ms-linear-gradient(right top, #fff, #fff 75%, #eee 85%, #999);
border: 2px solid #333;
border-radius: 80px 60px 60px 40px;
box-shadow: -6px 0 10px rgba(0, 0, 0, 0.35);
position: relative;
}
.leftFoot{
top: 65px;
left: 8px;
}
.rightFoot{
top: 31px;
left: 141px;
}
.legGap{
width: 20px;
height: 10px;
background: #fff;
background: -webkit-gradient(linear, right top, left bottom, from(#666),color-stop(0.83,#fff), to(#fff));
background: -moz-linear-gradient(right top, #666, #fff 83%, #fff);
background: -ms-linear-gradient(right top, #666, #fff 83%, #fff);
/*制作半圆效果*/
border: 2px solid #000;
border-bottom: none;
border-radius: 40px 40px 0 0;
position: relative;
top: -11px;
left: 130px;
}
扫一扫
464
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
