[分享]Css3文字缩放抖动

Css3是一种用于美化网页的语言，它提供了许多强大的功能，比如文字缩放抖动。这种效果可以让文字在鼠标悬停时产生震动的动画效果，让页面更加生动有趣。 .shakyText:hover { webkita...

Css3是一种用于美化网页的语言，它提供了许多强大的功能，比如文字缩放抖动。这种效果可以让文字在鼠标悬停时产生震动的动画效果，让页面更加生动有趣。

 .shakyText:hover {
        -webkit-animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
        animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
    }
    @-webkit-keyframes shake {
        10%, 90% {
            -webkit-transform: translate3d(-1px, 0, 0);
            transform: translate3d(-1px, 0, 0);
        }
        20%, 80% {
            -webkit-transform: translate3d(2px, 0, 0);
            transform: translate3d(2px, 0, 0);
        }
        30%, 50%, 70% {
            -webkit-transform: translate3d(-4px, 0, 0);
            transform: translate3d(-4px, 0, 0);
        }
        40%, 60% {
            -webkit-transform: translate3d(4px, 0, 0);
            transform: translate3d(4px, 0, 0);
        }
    }
    @keyframes shake {
        10%, 90% {
            -webkit-transform: translate3d(-1px, 0, 0);
            transform: translate3d(-1px, 0, 0);
        }
        20%, 80% {
            -webkit-transform: translate3d(2px, 0, 0);
            transform: translate3d(2px, 0, 0);
        }
        30%, 50%, 70% {
            -webkit-transform: translate3d(-4px, 0, 0);
            transform: translate3d(-4px, 0, 0);
        }
        40%, 60% {
            -webkit-transform: translate3d(4px, 0, 0);
            transform: translate3d(4px, 0, 0);
        }
    } 

使用上述代码可以为指定的文字添加缩放抖动效果，在鼠标悬停在文字上时触发。其中的核心是使用了CSS3动画效果，通过一系列的关键帧来控制文字的变化，最终实现了文字缩放抖动的效果。

总之，CSS3为我们提供了许多强大的美化页面的功能，文字缩放抖动只是其中的一个例子，开发者可以结合实际需求灵活运用，让页面更加生动有趣，提升用户体验。