Tất cả bài viết | CSS3
Tạo hiệu ứng cho hình ảnh với CSS3 Animations và Bootstrap
Trong bài học thiết kế web này các Bạn sẽ được Hướng dẫn cách tạo hiệu ứng cho hình ảnh với CSS3 Animations và Bootstrap
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
Bước 2: Định dạng CSS
.box{
text-align: center;
position: relative;
overflow: hidden;
box-shadow: 0 0 5px #555;
}
.box img{
width: 100%;
height: auto;
}
.box .box-content{
width: 100%;
height: 100%;
padding: 0 20px;
position: absolute;
top: 0;
left: 0;
color: #fff;
background-color: rgba(35, 35, 35, 0.7);
transform: rotate(0deg) scale(0);
transition: all 1.1s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
}
.box:hover .box-content{
transform: rotate(360deg) scale(1);
transform-origin: -10% -20% 0;
}
.box .title{
font-size: 21px;
font-weight: 700;
text-transform: uppercase;
padding-bottom: 20px;
margin-bottom: 0;
border-bottom: 1px solid #fff;
}
.box .description{
font-size: 14px;
margin-top: 20px;
}
@media only screen and (max-width:990px){
.box{
margin-bottom: 30px;
}
}
@media only screen and (max-width:360px){
.box .box-content{
padding: 0 5px;
}
.box .title{
margin-top: 10px;
padding-bottom: 10px;
}
}
Bước 3: Gọi thư viện Bootstrap và Font awesome
Bước 4: Gọi thư viện JQUERY
CSS3 Xem (3239) Học thiết kế web giá rẻ
