好看的鼠标hover效果

好看的鼠标hover效果

0919自我总结

常见的鼠标hover效果

展示效果:http://ianlunn.github.io/Hover/

部分动画制作

对于的效果都以备注

使用

拿pulse为例子

导入上述的方法

全是再样式中操作

@keyframes pulse {
    25% {
        transform: scale(1.1);
    }

    75% {
        transform: scale(.9);
    }
}

配置方法

.pulse:hover {
    animation-name: pulse;  #方法名称
    animation-duration: 1s; #方法时间
    animation-timing-function: linear; #从开头到结尾以相同的速度来播放动画
    animation-iteration-count: infinite; #动画的次数
}

参考文档'https://www.w3school.com.cn/cssref/index.asp#animation'