Tất cả bài viết | CSS3
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
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
CSS3 Xem (2497) Học thiết kế web giá rẻ
