Hiệu ứng hover 3D chim bay trong HTML CSS

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.

Video hướng dẩn chi tiết

Download full code và hình ảnh 


Previous Post Next Post