您的位置：首页 > Web前端 > CSS

css画企鹅，知识点

2016-11-10 17:10 260 查看

position：absolute绝对定位，是相对于浏览器的定位。

position：absolute；left：20px;top:80px;表示这个容器始终位于距离浏览器左20px,距离浏览器上80px的位置

position：relative相对定位：是相对于前面的容器进行定位的，这时不能用top、left进行定位，应该用margin

overflow:hidden将超过边框部分隐藏

overflow：scroll滚动条滚动显示超过边框部分

overflow：auto默认也是显示滚动条

overflow：visible对超出的部分按正常显示，突出到边框外面

clip:rect(top,right,bottom,left)设置元素的形状

box-shadow:h-shadow v-shadow blur spread color inset

h-shadow:水平阴影的位置

v-shadow垂直阴影的位置

blur模糊距离

spread:阴影的尺寸

inset将外部阴影改为内部阴影

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>QQ企鹅妹妹</title>
<style>
/* 重置浏览器默认样式，对各浏览器样式统一 */
* {
margin: 0;
padding: 0;
}
/* 将div位置固定，用浏览器的绝对位置显示div
position规定元素的定位类型
absolute以屏幕左上角为参考点，relative是以原来元素的坐标为参考点
*/
div {
position: absolute;
}
/* 设置主体宽和高、左边距和上边距 */
.qq_body {
width: 470px;
height: 540px;
left: 100px;
top: 100px;
border: 1px solid red;
}
/*QQ头部*/

/* 画一个椭圆 */
.head {
/* 同级元素，默认情况下文档流后面的元素会覆盖前面的
默认z-index=0 ，z-index越大优先级别越高*/
z-index: 0;		/*优先级别为0*/
left: 65px;
top: 0;
width: 345px;
height: 367px;
background: #19161A;
/* 边框半径，为这个属性提供一个值，就能同时设置四个圆角的半径 */
border-radius: 50%;
border: 1px solid black;
}
/*QQ眼睛*/

.lefteye,.righteye {
width: 66px;
height: 99px;
border-radius: 50%;
background: #fff;
left: 153px;
top: 76px;
z-index: 7;
/* 隐藏内容溢出 */
overflow: hidden;
}

.eyeball {
width: 30px;
height: 42px;
background: #201E1F;
border-radius: 50%;
left: 28px;
top: 34px;
}

.eyeball .eyewhite {
width: 11px;
height: 18px;
background: #fff;
border-radius: 50%;
left: 12px;
top: 12px;
}

.righteye {
left: 245px;
}

.righteye .eyeball {
left: 11px;
}

.eyeshadowwhite {
width: 65px;
height: 54px;
border-radius: 50%;
background: rgba(255, 255, 255, 1);
top: 20px;
border: 1px solid white;
}

/*QQ嘴巴*/

.mouth_box {
width: 344px;
height: 188px;
top: 102px;
left: 66px;
border-radius: 50%;
z-index: 6;
background: #19161A;
border: 1px solid white;
}

.mouth {
width: 234px;
height: 70px;
border-radius: 50%;
background: #FC9202;
left: 52px;
bottom: 35px;
}

.mouth .mark {
width: 160px;
height: 84px;
border: 8px solid #201E1F;
border-left: 1px solid #201E1F;
border-right: 1px solid #201E1F;
border-radius: 50%;
clip: rect(65px 160px 100px 0);
left: 32px;
top: -25px;
/* border: 1px solid white; */
}

/*QQ身体*/

.belly {
width: 385px;
height: 322px;
left: 45px;
top: 185px;
z-index: 1;
background: #19161A;
border-radius: 50%;
border: 1px solid yellow;
}

.belly_white {
width: 315px;
height: 250px;
background: #fff;
border-radius: 50%;
left: 34px;
bottom: 10px;
border: 1px solid green;
}
/*QQ围巾*/

.scarf {
width: 355px;
height: 198px;
background: red;
border-radius: 50%;
z-index: 5;
left: 60px;
top: 155px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4),
0 0 30px rgba(0, 0, 0, 0.3) inset;
border: 1px solid black;
}
/* 围巾竖向的部分 */
.scarf_d {
width: 80px;
height: 110px;
border-radius: 15px 15px 18px 35px;
background:red;
left: 110px;
top: 325px;
/* 旋转一定角度 */
transform: rotate(15deg);
/* 各个浏览器旋转的角度 */
/* 火狐 */
-moz-transform: rotate(15deg);
/* Safari and chrome */
-webkit-transform: rotate(15deg);
/* Opera */
-o-transform: rotate(15deg);
z-index: 4;
/*box-shadow:h-shadow v-shadow blur spread color inset
h-shadow:水平阴影的位置
v-shadow垂直阴影的位置
blur模糊距离
spread:阴影的尺寸
inset将外部阴影改为内部阴影*/
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 0, 0, 0.3) inset;
}

/*QQ翅膀*/
.leftwing,.rightwing {
width: 50px;
height: 170px;
background: #1A1624;
border-radius: 50%;
top: 270px;
}

.leftwing {
left: 10px;
transform: rotate(25deg);
-moz-transform: rotate(25deg);
-webkit-transform: rotate(25deg);
-o-transform: rotate(25deg);
}

.rightwing {
right: 10px;
transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-webkit-transform: rotate(-25deg);
-o-transform: rotate(-25deg);
}
/*QQ脚掌*/

.leftsole,.rightsole {
width: 157px;
height: 82px;
background: #F07203;
top: 455px;
border-radius: 50%;
border: 3px solid #872E0C;
box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.3);
}

.leftsole {
left: 55px;
transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
border: 2px solid black;
}

.rightsole {
right: 55px;
transform: rotate(5deg);
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}

.leftsole .toe,.rightsole .toe {
width: 60px;
height: 22px;
background: #F07203;
border-radius: 50%;
border-top: 1px solid #872E0C;
border: 1px solid black;
}

.leftsole .toe {
transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
border-left: 3px solid #872E0C;
}

.rightsole .toe {
right: 0;
transform: rotate(20deg);
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
border-right: 3px solid #872E0C;
}
</style>
</head>

<body>
<div class="qq_body">
<div class="head"></div>
<!-- 蝴蝶结 -->
<div class="bowknot">
<div class="bowknot_l">
<div class="bowknot_line3"></div>
<div class="bowknot_line4"></div>
</div>
<div class="bowknot_c"></div>

<div class="bowknot_tip_l"></div>
<div class="bowknot_tip_r"></div>
</div>
<!-- 左眼 -->
<div class="lefteye">
<div class="eyeshadowwhite"></div>
<div class="eyeball">
<div class="eyewhite"></div>
</div>
</div>
<!-- 右眼 -->
<div class="righteye">
<div class="eyeshadow"></div>
<div class="eyeshadowwhite"></div>
<div class="eyeball">
<div class="eyewhite"></div>
</div>
</div>
<!-- 嘴巴 -->
<div class="mouth_box">
<div class="mouth">
<div class="mark"></div>
</div>
</div>
<!-- 肚子 -->
<div class="belly">
<div class="belly_white"></div>
</div>
<!-- 围巾 -->
<div class="scarf"></div>
<div class="scarf_d"></div>
<!-- 左右手 -->
<div class="leftwing"></div>
<div class="rightwing"></div>
<!-- 左右脚 -->
<div class="leftsole">
<div class="toe"></div>
</div>
<div class="rightsole">
<div class="toe"></div>
</div>
</div>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航