首页 > 前端
鼠标划上旋转360度
来源:TP课堂 时间:2022-12-19 点击:807

1、粗暴版:

.bg:hover{
transition: all 0.5s ease-in;
transform:rotate(360deg);
}


2、温柔版:


.icon:hover{
        animation-name: name1;
        animation-duration: 1s;
    }
@keyframes name1{
    0%   {opacity: 0;}
    100% {transform: rotate(360deg);opacity: 1;}
}


3、实践版:


流畅

.nav_box .nav_title{   

    transition: all 1s ease;
}
.nav_box:hover .nav_title{
    transform: rotate(90deg);
    transition: all 1s ease;
}