css3 画动态微笑猫的最佳实践
由于平时工作并不经常使用css,再加上很少接触css3，导致css会有一些生疏。前些天在网上看到有人使用css3画了一只动态的猫，所以自己也想尝试一下，其实很简单，但是可以熟练一下css的布局，也给繁忙的工作增加一点小乐趣。
这是我们这次要实现的效果
访问地址smile cat
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style type="text/css" rel="stylesheet">
.container{
}
.face,.ear {
position: absolute;
width: 400px;
height: 360px;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -180px;
}
.face{
border: 2px solid #000;
z-index: 10;
border-radius: 50% 50% 34% 34%;
overflow: hidden;
background-color: #f3f3f3;
}
.hair {
position: absolute;
height: 160px;
width: 200px;
top: 0px;
left: 50%;
margin-left: -100px;
background-color: #8d8d8d;
border-radius: 0 0 50% 50%;
overflow: hidden;
}
.hair_left {
position: absolute;
height: 100%;
width: 100px;
background-color: #f0ac6b;
}
.ear_left,.ear_right {
position: absolute;
top: -22px;
width: 160px;
height: 200px;
border: 2px solid #000;
background-color: #f3f3f3;
transition: all 1s;
}
.ear_left {
transform: rotate(-20deg);
border-radius: 0 75%;
}
.ear_right {
position: absolute;
right: 0px;
transform: rotate(20deg);
border-radius: 75% 0;
}
.eye {
position: absolute;
width: 300px;
height: 80px;
top: 50%;
margin-left: 50px;
overflow: hidden;
}
.eye_left,.eye_right {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
border: 2px solid #000;
border-bottom: none;
border-radius: 50%;
box-sizing: border-box;
overflow: hidden;
transition: all 1s;
}
.eye_right {
position: absolute;
right: 0;
}
.eye_left_bottom,.eye_right_bottom {
position: absolute;
width: 160px;
height: 50px;
border-top: 2px solid #000 ;
background-color: #f3f3f3;
margin-top: -50px;
left: -30px;
transition: all 1s;
border-radius: 50%;
transition: all 1s;
}
.eye_right_bottom {
margin-left: 200px;
}
.eye_left_red,.eye_right_red {
opacity: 0;
position: absolute;
top: 35px;
width: 70px;
height: 28px;
background-color: #fdacc0;
border-radius: 45%;
transition: all 1s;
}
.eye_left_red{
left: 13px;
}.eye_right_red{
right: 13px;
}
.eye_left_core,.eye_right_core {
position: absolute;
width: 30px;
height: 55px;
left: 50%;
margin-left: -15px;
background-color: #000;
transition: all 1s;
}
.nose {
position: absolute;
width: 30px;
height: 10px;
border-bottom: 8px solid #000;
top:240px;
left: 50%;
margin-left: -15px;
border-radius: 0 0 50% 50%;
background-color: #f3f3f3;
}
.mouth{
position: absolute;
width: 130px;
height: 50px;
left: 50%;
margin-left: -65px;
top: 250px;
}
.mouth_left,.mouth_right {
position: absolute;
top:-10px;
width: 50px;
height: 40px;
background-color: #f3f3f3;
border-bottom: 4px solid #000000;
transition: all 1s;
}
.mouth_left {
left: 12px;
border-right: 4px solid #000000;
border-radius: 0 0 40% 20%;
}
.mouth_right {
right: 12px;
border-left: 4px solid #000000;
border-radius: 0 0 20% 40%;
}
.mustache {
position: absolute;
width: 380px;
height:80px;
top:170px;
left: 50%;
margin-left: -190px;
}
.mustache_container.right{
position: absolute;
right: 0px;
top: 0px;;
transform: rotateY(180deg);
}
.mustache_container > div:first-child {
width: 30px;
height: 10px;
border-top: 6px solid red;
transform: rotate(20deg);
border-radius: 30% 50% 20% 50%;
}
.mustache_container > div:nth-child(2) {
width: 15px;
height: 5px;
background-color: red;
transform: rotate(20deg);
border-radius: 50% 50%;
margin-left:5px;
}
.mustache_container > div:nth-child(3) {
width: 35px;
height: 10px;
border-bottom: 4px solid red;
transform: rotate(20deg);
border-radius: 30% 50% 40% 50%;
}
.mustache_container > div:nth-child(4) {
position: absolute;
width: 20px;
height: 10px;
border-bottom: 4px solid red;
transform: rotate(12deg);
border-radius: 30% 50% 40% 50%;
top: 65px;
left: 29px;
}
.mustache_container > div:nth-child(5) {
position: absolute;
width: 15px;
height: 10px;
border-bottom: 3px solid red;
transform: rotate(-25deg);
border-radius: 30% 50% 40% 50%;
top: 70px;
left: 40px;
}
.container:hover .ear_left{
transform: rotate(-15deg);
transition: all 1s;
}
.container:hover .ear_right{
transform: rotate(15deg);
transition: all 1s;
}
.container:hover .mouth_left,.container:hover .mouth_right{
border-radius: 0 0 50% 50%;
transition: all 1s;
}
.container:hover .eye_left_bottom, .container:hover .eye_right_bottom{
margin-top: -70px;
}
.container:hover .eye_left_core, .container:hover .eye_right_core{
width: 40px;
margin-left: -20px;
transition: all 1s;
}
.container:hover .eye_left_red, .container:hover .eye_right_red{
opacity: 1;
transition: all 1s;
}
style>
head>
<body>
<div class="container">
<div class="face">
<div class="hair">
<div class="hair_left">div>
div>
<div class="eye">
<div class="eye_left">
<div class="eye_left_core">div>
div>
<div class="eye_left_bottom">div>
<div class="eye_left_red">div>
<div class="eye_right">
<div class="eye_right_core">div>
div>
<div class="eye_right_bottom">div>
<div class="eye_right_red">div>
div>
<div class="mouth">
<div class="mouth_left">div>
<div class="mouth_right">div>
div>
<div class="nose">div>
<div class="mustache">
<div class="mustache_container left">
<div>div>
<div>div>
<div>div>
<div>div>
<div>div>
div>
<div class="mustache_container right">
<div>div>
<div>div>
<div>div>
<div>div>
<div>div>
div>
div>
div>
<div class="ear">
<div class="ear_left">div>
<div class="ear_right">div>
div>
div>
body>
html>