Welcome, Old Sport!

背景彩色变换的文字无缝滚动播放

by ilikecss ON 2016/06/06 826

背景彩色变换的文字无缝滚动播放基于jQery的一款文字滚动插件Marquee,是一款使用普遍性非常高的插件。根据文字无缝滚动效果我添加了CSS3动画,使得原本乏味的文字滚动播放更具有用户体验的互动性。

需要引入的文件

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/marquee.min.js"></script>
<script type="text/javascript">
    $('.js-marquee').marquee();
</script>

插件的API

pauseOnHover: true//鼠标悬停是否停止滚动

CSS

-webkit-animation: your-animation-name 1s infinite linear;
    animation: your-animation-name 1s infinite linear;
@-webkit-keyframes your-animation-name {
    0% {
        background-color: #0affa8;
    }

    10% {
        background-color: #0ac2ff;
    }

    20% {
        background-color: #0a2fff;
    }

    30% {
        background-color: #780aff;
    }

    40% {
        background-color: #ff0af3;
    }

    50% {
        background-color: #ff0a60;
    }

    60% {
        background-color: #ff470a;
    }

    70% {
        background-color: #ffda0a;
    }

    80% {
        background-color: #91ff0a;
    }

    90% {
        background-color: #0aff16;
    }

    100% {
        background-color: #0affa8;
    }
}
@keyframes your-animation-name {
    0% {
        background-color: #0affa8;
    }

    10% {
        background-color: #0ac2ff;
    }

    20% {
        background-color: #0a2fff;
    }

    30% {
        background-color: #780aff;
    }

    40% {
        background-color: #ff0af3;
    }

    50% {
        background-color: #ff0a60;
    }

    60% {
        background-color: #ff470a;
    }

    70% {
        background-color: #ffda0a;
    }

    80% {
        background-color: #91ff0a;
    }

    90% {
        background-color: #0aff16;
    }

    100% {
        background-color: #0affa8;
    }
}

本教程将CSS动画定义在鼠标悬停:hover后执行。

你不是老司机

目前还没有评论



TOP