颤动可滚动行介绍

根据题目，我们可以理解为要介绍一种可滚动的行，这个行还可以颤动。

颤动

首先我们需要解决的就是“颤动”。这里可以使用CSS3中的animation和@keyframes属性来实现。

<style>
    .shake {
        animation: shake 0.5s;
        transform-origin: center;
    }

    @keyframes shake {
        0% {
            transform: translateX(0);
        }
        20% {
            transform: translateX(-5px) rotate(1deg);
        }
        40% {
            transform: translateX(5px) rotate(-1deg);
        }
        60% {
            transform: translateX(-5px) rotate(1deg);
        }
        80% {
            transform: translateX(5px) rotate(-1deg);
        }
        100% {
            transform: translateX(0);
        }
    }
</style>

<div class="shake">
    这一行会颤动
</div>

以上代码就实现了一个简单的颤动效果。其中，@keyframes定义了一组动画，在shake类中规定了animation属性，将动画应用到classname为shake的div元素中。

滚动

接下来，我们需要实现行的滚动效果。这里实现方式比较多，我们使用jQuery库中的animate()函数。

<div>
    <p>这是一行滚动文字</p>
    <button onclick="scroll()">滚动</button>
</div>

<script>
    function scroll() {
        $('p').animate({top: '-=20px'}, 'fast');
    }
</script>

以上代码中，我们使用了jQuery库中的animate()函数，通过对p元素的top属性做变化来实现滚动。当执行scroll()时，文字就会往上滚动20px。

颤动与滚动结合

最后，我们将颤动和滚动结合，实现题目要求：一行颤动可滚动。

<style>
    .shake {
        animation: shake 0.5s;
        transform-origin: center;
    }

    @keyframes shake {
        0% {
            transform: translateX(0);
        }
        20% {
            transform: translateX(-5px) rotate(1deg);
        }
        40% {
            transform: translateX(5px) rotate(-1deg);
        }
        60% {
            transform: translateX(-5px) rotate(1deg);
        }
        80% {
            transform: translateX(5px) rotate(-1deg);
        }
        100% {
            transform: translateX(0);
        }
    }
</style>

<div style="position:relative;">
    <p class="shake" style="position:absolute;top:0;">这是一行颤动可滚动的文字</p>
    <button onclick="scroll()">滚动</button>
</div>

<script>
    function scroll() {
        $('p').animate({top: '-=20px'}, 'fast');
    }
</script>

以上代码实现了一行颤动的文字，可通过点击按钮上滚20px。在实现中，我们将p元素的position属性设为absolute，使其相对于父元素定位。滚动时改变其top属性即可。

完整代码如下：

<style>
    .shake {
        animation: shake 0.5s;
        transform-origin: center;
    }

    @keyframes shake {
        0% {
            transform: translateX(0);
        }
        20% {
            transform: translateX(-5px) rotate(1deg);
        }
        40% {
            transform: translateX(5px) rotate(-1deg);
        }
        60% {
            transform: translateX(-5px) rotate(1deg);
        }
        80% {
            transform: translateX(5px) rotate(-1deg);
        }
        100% {
            transform: translateX(0);
        }
    }
</style>

<div style="position:relative;">
    <p class="shake" style="position:absolute;top:0;">这是一行颤动可滚动的文字</p>
    <button onclick="scroll()">滚动</button>
</div>

<script>
    function scroll() {
        $('p').animate({top: '-=20px'}, 'fast');
    }
</script>