纯CSS: hover特效

最新推荐文章于 2024-07-29 23:44:34 发布

*杰

最新推荐文章于 2024-07-29 23:44:34 发布

阅读量8.3k

点赞数 8

分类专栏：专题

本文链接：https://blog.csdn.net/qq_42483491/article/details/89461241

版权

//样式++
<style>
        /*animation: name duration timing-function delay iteration-count direction;
        animation-name 规定需要绑定到选择器的 keyframe 名称。。
        animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
        animation-timing-function 规定动画的速度曲线。
        animation-delay 规定在动画开始之前的延迟。
        animation-iteration-count 规定动画应该播放的次数。
        animation-direction 规定是否应该轮流反向播放动画。*/
        a {
    
            display: inline-block;
            text-align: center; cursor: pointer; background: #e1e1e1;
            color: #999; padding: 1em; margin: 1em; text-decoration: none;
        }
        .magnify, .small {
      transition-duration: 0.3s; }
        .magnify:hover, .magnify:focus, .magnify:active {
    
            transform: scale(1.1); /*scale改变为原来的几倍*/
        }
        .small:hover, .small:focus, .small:active {
     transform: scale(0.9); }
        @@keyframes for-bigsmall {
    
            25% {
    transform: scale(1.1); }
            75% {
     transform: scale(0.9); }
        }
        .for-bigsmall:hover, .for-bigsmall:focus, .for-bigsmall:active {
    
            animation: for-bigsmall 1s linear infinite;
            /*animation-name: for-bigsmall;
            animation-duration: 1s;
            animation-timing-function: linear;linear 动画从头到尾的速度是相同的
            animation-iteration-count: infinite;infinite 循环播放动画*/
        }
        @@keyframes for-magnify {
    
            to {
    transform: scale(1.1); }
        }
        .for-magnify:hover, .for-magnify:focus, .for-magnify:active {
    
            animation: for-magnify 0.3s linear infinite alternate; /*alternate动画应该轮流反向播放*/
        }
        @@keyframes for-small {
    
            to {
     transform: scale(0.9); }
        }
        .for-small:hover, .for-small:focus, .for-small:active {
    
            animation: for-small 0.3s linear infinite alternate; /*alternate动画应该轮流反向播放*/
        }
        .wave-magnify, .wave-small {
     transition-duration: 0.5s; }
        .wave-magnify:hover, .wave-magnify:focus, .wave-magnify:active {
    
            transform: scale(1.2);
            transition-timing-function