怎样用纯html和CSS写一个滑稽的表情
2017-07-29 13:01:29 -0400怎样用纯html和CSS写一个滑稽的表情呢？ 我们先来一段效果图给各位看看。
下面是整个编写的代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.face{
height:300px;
width:300px;
border-radius:50%;
background:#fbdf7b;
box-shadow:0 0 100px #da3 inset;
position:relative;
}
.brow-left{
position:absolute;
width:60px;
height:95px;
border:15px solid #000;
border-radius:30px 30px 0 0/30px 50px 0 0;
border-width:0;
border-top-width:15px;
top:15px;
left:30px;
}
.brow-right{
position:absolute;
width:60px;
height:95px;
border:15px solid #000;
border-radius:30px 30px 0 0/50px 30px 0 0;
border-width:0;
border-top-width:15px;
top:15px;
right:30px;
}
.eye-left{
height:40px;
width:100px;
position:absolute;
top:70px;
left:20px;
}
.eye-right{
height:40px;
width:100px;
position:absolute;
top:70px;
right:20px;
}
.e-left,.e-right{
height:20px;
width:20px;
border-radius:50%;
border:2px solid #000;
position:absolute;
bottom:0;
left:0;
background:#fff;
}
.e-right{
left:auto;
right:0;
}
.e-top,.e-bottom{
width:100px;
height:40px;
border:2px solid #000;
border-radius:100px/40px;
position:absolute;
top:8px;
left:-2px;
border-bottom:none;
z-index:1;
}
.e-bottom{
width:70px;
left:13px;
height:20px;
top:32px;
}
.e-white{
height:110px;
width:90px;
overflow:hidden;
border-radius:50%;
position:absolute;
left:5px;
top:-50px;
}
.e-white:before{
content:"";
width:180px;
height:180px;
position:absolute;
border-radius:50%;
box-sizing:border-radius;
border:21px solid #fff;
left:-67px;
top:60px;
}
.e-black{
position:absolute;
height:30px;
width:30px;
background:#000;
border-radius:50%;
top:10px;
left:8px;
}
.blush-left,.blush-right{
position:absolute;
height:20px;
width:70px;
background:pink;
border-radius:50%;
box-shadow:0 0 10px pink;
top:120px;
left:30px;
opacity:.5;
}
.blush-right{
left:auto;
right:30px;
}
.mouth{
height:220px;
width:220px;
position:absolute;
top:40px;
left:40px;
border-radius:50%;
border-bottom:10px solid #531;
}
</style>
</head>
<body>
<div class="face">
<div class="brow-left"></div>
<div class="brow-right"></div>
<div class="eye-left">
<div class="e-left"></div>
<div class="e-right"></div>
<div class="e-top"></div>
<div class="e-bottom"></div>
<div class="e-white"></div>
<div class="e-black"></div>
</div>
<div class="eye-right">
<div class="e-left"></div>
<div class="e-right"></div>
<div class="e-top"></div>
<div class="e-bottom"></div>
<div class="e-white"></div>
<div class="e-black"></div>
</div>
<div class="blush-left"></div>
<div class="blush-right"></div>
<div class="mouth"></div>
</div>
</body>
</html
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.face{
height:300px;
width:300px;
border-radius:50%;
background:#fbdf7b;
box-shadow:0 0 100px #da3 inset;
position:relative;
}
.brow-left{
position:absolute;
width:60px;
height:95px;
border:15px solid #000;
border-radius:30px 30px 0 0/30px 50px 0 0;
border-width:0;
border-top-width:15px;
top:15px;
left:30px;
}
.brow-right{
position:absolute;
width:60px;
height:95px;
border:15px solid #000;
border-radius:30px 30px 0 0/50px 30px 0 0;
border-width:0;
border-top-width:15px;
top:15px;
right:30px;
}
.eye-left{
height:40px;
width:100px;
position:absolute;
top:70px;
left:20px;
}
.eye-right{
height:40px;
width:100px;
position:absolute;
top:70px;
right:20px;
}
.e-left,.e-right{
height:20px;
width:20px;
border-radius:50%;
border:2px solid #000;
position:absolute;
bottom:0;
left:0;
background:#fff;
}
.e-right{
left:auto;
right:0;
}
.e-top,.e-bottom{
width:100px;
height:40px;
border:2px solid #000;
border-radius:100px/40px;
position:absolute;
top:8px;
left:-2px;
border-bottom:none;
z-index:1;
}
.e-bottom{
width:70px;
left:13px;
height:20px;
top:32px;
}
.e-white{
height:110px;
width:90px;
overflow:hidden;
border-radius:50%;
position:absolute;
left:5px;
top:-50px;
}
.e-white:before{
content:"";
width:180px;
height:180px;
position:absolute;
border-radius:50%;
box-sizing:border-radius;
border:21px solid #fff;
left:-67px;
top:60px;
}
.e-black{
position:absolute;
height:30px;
width:30px;
background:#000;
border-radius:50%;
top:10px;
left:8px;
}
.blush-left,.blush-right{
position:absolute;
height:20px;
width:70px;
background:pink;
border-radius:50%;
box-shadow:0 0 10px pink;
top:120px;
left:30px;
opacity:.5;
}
.blush-right{
left:auto;
right:30px;
}
.mouth{
height:220px;
width:220px;
position:absolute;
top:40px;
left:40px;
border-radius:50%;
border-bottom:10px solid #531;
}
</style>
</head>
<body>
<div class="face">
<div class="brow-left"></div>
<div class="brow-right"></div>
<div class="eye-left">
<div class="e-left"></div>
<div class="e-right"></div>
<div class="e-top"></div>
<div class="e-bottom"></div>
<div class="e-white"></div>
<div class="e-black"></div>
</div>
<div class="eye-right">
<div class="e-left"></div>
<div class="e-right"></div>
<div class="e-top"></div>
<div class="e-bottom"></div>
<div class="e-white"></div>
<div class="e-black"></div>
</div>
<div class="blush-left"></div>
<div class="blush-right"></div>
<div class="mouth"></div>
</div>
</body>
</html
木头
你不知道的事！
Copyright 2017-2018 挨踢技术宅 pan.itamle.cc/ 版权所有
Subscribe | Register | Login | N