Tất cả bài viết  |  CSS3

  • zoom in
  • zoom out
  • text align left
  • text align center
  • text align right
  • Chỉnh màu chữ
  • Làm đậm

Thiết kế hiệu ứng cho hình bằng CSS3 Animations

Trong bài học thiết kế web này các Bạn sẽ được Hướng dẫn cách Thiết kế hiệu ứng cho hình bằng CSS3 Animations

Bước 1: Tạo cấu trúc HTML
 
 

Thời trang cho bé trai nhiều màu sắc ngộ nghĩnh

Học thiết kế web giá rẻ

Mẫu thiết kế 1

Giá: 200.000 đ

Chúc con yêu của bạn có thêm những bộ đồ thời trang cho bé trai theo phong cách đa màu sắc cực xinh xắn và đáng yêu!

Học thiết kế web giá rẻ

Mẫu thiết kế 2

Giá: 200.000 đ

Chúc con yêu của bạn có thêm những bộ đồ thời trang cho bé trai theo phong cách đa màu sắc cực xinh xắn và đáng yêu!

Học thiết kế web giá rẻ

Mẫu thiết kế 3

Giá: 200.000 đ

Chúc con yêu của bạn có thêm những bộ đồ thời trang cho bé trai theo phong cách đa màu sắc cực xinh xắn và đáng yêu!

Bước 2: Định dạng CSS
.box{
    
position: relative;
    
box-shadow: 0 0 5px #a3a3a3;

}


.box img{
    
width: 100%;
    
height: auto;

}


.box .box-content{
    
width: 100%;
    
height: 100%;
    
background-color: rgba(53, 179, 147, 0.8);
    
padding: 50px 30px 20px;
    
opacity: 0;
    
position: absolute;
    
top: 0;
    
left: 0;

}


.box:hover .box-content{
    
-webkit-animation-name: animate;
    
animation-name: animate;
    
-webkit-animation-duration: 1200ms;
    
animation-duration: 1200ms;
    
-webkit-animation-iteration-count: 1;
    
animation-iteration-count: 1;
    
-webkit-animation-timing-function: linear;
    
animation-timing-function: linear;
    
opacity: 1;

}


.box .title{
    
font-size: 22px;
    
font-weight: 600;
    
color: #fff;
    
text-transform: uppercase;
   
margin-top: 0;

}


.box .post{
    
display: block;
    
font-size: 14px;
    
color: #fff;
    
text-transform: uppercase;

}


.box .description{
    
font-size: 14px;
    
margin-top: 20px;
    
color:#FFFFFF;

}


.box .icon{
    
list-style: none;
    
padding: 0;
    
margin: 20px 0 0 0;

}


.box .icon li{
    
display: inline-block;
    
margin-right: 8px;

}


.box .icon li:last-child{
    
margin-right: 0;

}


.box .icon li a{
    
display: block;
    
width: 35px;
    
height: 35px;
    
line-height: 35px;
    
border-radius: 50%;
    
border: 1px solid #fff;
    
font-size: 14px;
    c
olor: #fff;
    
text-decoration:none;
    
text-align: center;
    
transition: all 0.3s ease 0s;

}


.box .icon li a:hover{
    
background: #fff;
    
color: #28a68f;

}


@-webkit-keyframes animate{
    
0% {
        
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        
-webkit-animation-timing-function: ease-in;
        
animation-timing-function: ease-in;
        
opacity: 0;
    
}
    
40% {
        -
webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        
-webkit-animation-timing-function: ease-in;
        
animation-timing-function: ease-in;
    
}
    
60% {
        
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        
opacity: 1;
    
}
    
80% {
        
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    
}
    
100% {
        
-webkit-transform: perspective(400px);
        
transform: perspective(400px);
    
}

}

@keyframes animate{
    
0% {
        
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        
-webkit-animation-timing-function: ease-in;
        
animation-timing-function: ease-in;
        
opacity: 0;
    
}
    
40% {
        
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        
-webkit-animation-timing-function: ease-in;
        
animation-timing-function: ease-in;
    
}
    
60% {
        
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        
opacity: 1;
    
}
    
80% {
        
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    
}
    
100% {
        
-webkit-transform: perspective(400px);
        
transform: perspective(400px);
    
}

}


@media only screen and (max-width:990px){
    
.box{ 
margin-bottom: 30px; 
}

}
Bước 3: Gọi thư viện Bootstrap và Font awesome
 
  
  
Bước 4: Gọi thư viện JQUERY
 
Xem  demo Tải Code Đăng ký tham gia làm hội viên của kênh để được xem các bài học mới nhất
Bạn có thể quan tâm

Cách tạo hiệu ứng Hover Effects cho hình ảnh bằng CSS3 Transitions Học lập trình web

Cách tạo hiệu ứng Hover Effects cho hình ảnh Học lập trình web

Tìm hiểu cách sử dụng CSS3 Transitions để tạo hiệu ứng Hover Học lập trình web

Tạo hiệu ứng cho hình ảnh với CSS3 Animations và Bootstrap Học lập trình web

Hướng dẫn cách tạo hiệu ứng cho nút bằng CSS3 Học lập trình web

Tạo hiệu ứng cho trang sản phẩm bằng Bootstrap Học lập trình web

Hướng dẫn tạo trang trình bày sản phẩm bằng Bootstrap với hiệu ứng CSS3 Học lập trình web

Hướng dẫn tạo trang trình bày sản phẩm bằng Bootstrap Học lập trình web

Hướng dẫn cách tạo border với hiệu ứng bằng CSS3 & JQUERY Học lập trình web

Tạo hiệu ứng bóng đổ cho văn bản bằng CSS3 (Phần 3) Học lập trình web