Khái quát
Trong lập trình web, hẳn việc tạo ra hiệu ứng animation mỗi khi hover vào hình ảnh không còn quá xa lạ nửa, tùy vào mục đích, nhu cầu mà ta có những option hiệu ứng animaion khác nhau. Hôm nay hãy cùng mình tạo ra hiệu ứng animation hình ảnh 3d mỗi khi hover vào tấm hình nhé.
Xây dựng animation hover 3d Image
Code HTML
Code CSS
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-image: linear-gradient(to bottom right, #1E2853, #482558);
}
.box{
position: relative;
width: 300px;
height:400px;
margin: 50px;
}
.bg{
position: absolute;
background-image: url(bg2.jpg);
width: 100%;
height: 100%;
background-size: cover;
border-radius: 5px;
transition: 1s;
}
.box:hover .bg{
transform: perspective(20px) rotateX(2deg) translateY(-50px);
}
.bird{
position: absolute;
width: 300px ;
height: 300px;
background-size: 100%;
background-repeat: no-repeat;
animation: gifAnimation 0.1s linear infinite;
bottom: 0;
animation-play-state: paused!important;
transition: 1s;
}
.box:hover .bird{
animation-play-state:running!important;
transform: translateY(-200px) translateX(-50px);
}
@keyframes gifAnimation{
from{
background-image: url(img21.png);
}
to{
background-image: url(img22.png);
}
}
@keyframes gifAnimation1{
from{
background-image: url(img11.png);
}
to{
background-image: url(img12.png);
}
}
.box:nth-child(2) .bird{
animation: gifAnimation1 0.1s linear infinite;
}
.box:nth-child(2) .bg{
background-image: url(bg.jpg);
}
Thuộc tính animation-play-stat: pause sẽ dừng trạng thái animation của một element lại.
Thuộc tính animation-play-stat: running sẽ tiếp tục thực hiện tiếp hiệu ứng animation khi người dùng hover vào.