css3 音符跳动

CSS3可以创造出许多有趣的效果，今天我们介绍一种很酷的音符跳动效果。

.note{
    width: 15px;
    height: 15px;
    background-color: white;
    border-radius: 100% 0 100% 0;
    position: absolute;
    animation: noteJump 1s ease-in-out infinite;
    transform-origin: center;
}
@keyframes noteJump {
0% {
     transform: translateY(0);
 }
50% {
     transform: translateY(-30px);
 }
100% {
     transform: translateY(0);
 }
}
    

首先我们需要定义一个音符的样式，这里我们使用白色圆形，通过border-radius属性创建出橢圆形，使其看起来更像真正的音符。

通过position属性设置音符的定位方式为绝对定位。然后我们使用animation属性来实现音符的跳动效果。指定animation-name为noteJump，也就是指向我们下面定义的关键帧，指定animation-duration为1秒，指定animation-timing-function为ease-in-out，实现动画缓慢可能完成，然后无缝地回到开始状态。最后添加animation-iteration-count，使得动画无限重复。

在关键帧noteJump中，我们定义了音符的弹跳规律。在0%的位置，音符的位置为原始位置，通过transform属性指定位移为0。在50%的位置，音符的位置为向上弹出30px的位置，通过transform属性指定位移为负值。在100%的位置，音符的位置回到原始位置，通过transform属性指定位移为0。这样就实现了音符的跳动效果。

我们可以在需要的地方添加音符，如：

div class="note">
    /div>
    

然后我们就可以看到音符在页面上跳跃起来了！快来试试吧！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！