CSS3 Vẽ ếch xanh dễ thương

Trước tiên ta phân tích con ếch.


Ta quan sát sơ bộ thấy con ếch được tạo thành chủ yếu tạo thành từ hình oval , để tạo một hình oval ta cho chiều cao gấp đôi chiều rộng và dùng thuộc tính border-radius của CSS3 để bo góc
Ví dụ:

Code:

#oval {
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}

Khi đó nó sẽ bo góc với bán kính chiều ngang là 100px,và bán kính chiều dọc là 50pta có thể thay bằng 50%) và khi ta áp dụng cho 1 hình vuông khi bo góc 50% thì ta được 1 hình tròn.
Lòng đen của con mắt phải (giống y hình pacman-phần này dài ko tiện giải thích).

Code:

#pacman {
width: 0px;
height: 0px;
border-right: 40px solid transparent;
border-top: 40px solid red;
border-left: 40px solid red;
border-bottom: 40px solid red;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
}

Để tạo các bộ phận đối xứng ta xoay nó 1 góc 180 độ với thuộc tính transform:

Code:

transform: rotate(180deg);
-moz-transform:rotate(180deg); /* cho FF */
-webkit-transform:rotate(180deg); /* cho các trình duyệt webkit: safari, chrome */

Ngoài ra ta sử dung position để căn chỉnh và selector nth-child để lựa chọn các đối tượng.

Code HTML

Code:

<div class="ech">
<div class="dau">
<div class="mattrai">
<div class="dongtu">
<div class="longden"></div>
</div>
</div>
<div class="matphai">
<div class="dongtu">
<div class="longden"></div>
</div>
</div>
<div class="mieng">
<div class="ma-trai"></div>
<div class="mieng-giua"></div>
<div class="ma-phai"></div>
</div>
</div>
<div class="than">
<div class="bung"></div>
<div class="taytrai">
<div class="ngontay"></div>
<div class="ngontay"></div>
<div class="ngontay"></div>
</div>
<div class="tayphai">
<div class="ngontay"></div>
<div class="ngontay"></div>
<div class="ngontay"></div>
</div>
<div class="chantrai">
<div class="ngonchan"></div>
<div class="”ngonchan”"></div>
<div class="ngonchan"></div>
</div>
<div class="chanphai">
<div class="ngonchan"></div>
<div class="ngonchan"></div>
<div class="ngonchan"></div>
</div>
</div>
</div>

CSS

Code:

.ech{
margin: 100px;
}
.dau{
position: relative;
background: #55d400;
width:500px;
height: 250px;
-moz-border-radius: 250px / 125px;
-webkit-border-radius: 100px / 50px;
border-radius: 250px / 125px;
}
.mattrai,.matphai{
border-radius: 150px;
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
width: 150px;
height: 150px;
background: #338000;
position: absolute;
}
.mattrai{
top: -50px;
left: 50px;
}
.matphai{
top: -54px;
left: 293px;
}
.dongtu{
border-radius: 120px;
background: #fff;
width: 120px;
height: 120px;
position:absolute;
}
.mattrai .dongtu{
top: 12px;
left: 22px;
}
.matphai .dongtu{
top: 12px;
left: 10px;
}
.longden{
width: 0px;
  height: 0px;
  border-right: 40px solid transparent;
  border-top: 40px solid #000;
  border-left: 40px solid #000;
  border-bottom: 40px solid #000;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
position: absolute;
-webkit-animation-name: cate;
        -webkit-animation-duration: 10s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: 200;
}
.mattrai .longden{
top: 17px;
left: 30px;
transform: rotate(180deg);
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
}
.matphai .longden{
top: 17px;
left: 10px;
}
.mieng{
position: relative;
}
.ma-trai,.ma-phai{
border-radius: 80px;
width: 80px;
height: 80px;
background: #fe0000;
position: absolute;
}
.ma-trai{
top: 120px;
left:90px;
}
.ma-phai{
top: 120px;
left:310px;
}
.mieng-giua{
border-radius: 200px;
width: 400px;
height: 400px;
border-bottom: 8px solid #000;
position: absolute;
top: -180px;
left: 40px;
z-index: 100;
clip: rect(360px auto auto auto);
}
.than{
background: #55d400;
width:400px;
height: 200px;
-moz-border-radius: 200px / 100px;
-webkit-border-radius: 200px / 100px;
border-radius: 200px / 100px;
position: absolute;
top: 300px;
left: 150px;
}
.bung{
background: #fff;
width:250px;
height: 125px;
-moz-border-radius: 125px / 62px;
-webkit-border-radius: 125px / 62px;
border-radius: 125px / 62px;
position: absolute;
top: 70px;
left: 70px;
}
.taytrai,.tayphai{
width: 80px;
height: 200px;
background-color: #338000;
border-radius:  50%;
position: absolute;
}
.taytrai{
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
top: 20px;
left: -35px;
}
.tayphai{
transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
top: 22px;
left: 340px;
}
.ngontay,.ngonchan{
width: 50px;
height: 50px;
border-radius: 50%;
background: #55d400;
position: relative;
}
.taytrai div:nth-child(1){
position: absolute;
top: 170px;
left: -20px;
}
.taytrai div:nth-child(2){
position: absolute;
top: 185px;
left: 10px;
}
.taytrai div:nth-child(3){
position: absolute;
top: 170px;
left: 42px;
}
.tayphai div:nth-child(1){
position: absolute;
top: 170px;
left: -20px;
}
.tayphai div:nth-child(2){
position: absolute;
top: 180px;
left: 10px;
}
.tayphai div:nth-child(3){
position: absolute;
top: 170px;
left: 42px;
}
.chantrai,.chanphai{
width: 80px;
height: 90px;
background-color: #338000;
border-radius:  50%;
position: absolute;
}
.chantrai{
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
top: 150px;
left: 70px;
z-index: -99;
}
.chanphai{
transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
top: 150px;
left: 250px;
z-index: -99;
}
.chantrai div:nth-child(1){
position: absolute;
top: 70px;
left: -20px;
}
.chantrai div:nth-child(2){
position: absolute;
top: 80px;
left: 20px;
}
.chantrai div:nth-child(3){
position: absolute;
top: 50px;
left: 58px;
}
.chanphai div:nth-child(1){
position: absolute;
top: 50px;
left: -30px;
}
.chanphai div:nth-child(2){
position: absolute;
top: 70px;
left: 10px;
}
.chanphai div:nth-child(3){
position: absolute;
top: 60px;
left: 50px;
}
//animation eye
@-webkit-keyframes cate{
    0%{
        margin:0 0 0 0;
    }
    80%    {
        margin:0px 0 0 0;
    }
    85%    {
        margin:-20px 0 0 0;
    }
    90%{
        margin:0 0 0 0;
    }
    93%{
        margin:0 0 0 7px;
    }
    96%{
        margin:0 0 0 0;
    }
    100%{
        margin:0 0 0 0;
    }
}
@-moz-keyframes cate{
    0%{
        margin:0 0 0 0;
    }
    80%    {
        margin:0px 0 0 0;
    }
    85%    {
        margin:-20px 0 0 0;
    }
    90%{
        margin:0 0 0 0;
    }
    93%{
        margin:0 0 0 7px;
    }
    96%{
        margin:0 0 0 0;
    }
    100%{
        margin:0 0 0 0;
    }
}

Demo : xem tại đây



Nguồn: Cosmos phạm 's blog