亚伦影音工作室 发表于 2025-8-19 14:36

骑车

本帖最后由 亚伦影音工作室 于 2025-8-20 06:39 编辑 <br /><br /><style>
.road{
        width:100%; left: -200px; top: 0%;
        position: relative;
        height:400px;display: flex;
        justify-content: center;
        align-items: end;
        }
.jump {position: absolute;
        font-size: 5rem;
        animation: jump 6s linear infinite;
}
@keyframes jump {
        0% {
                transform: translateX(calc(50vw - 5rem)) translateY(0rem) rotateZ(0deg);
        }
        25%{
                transform: translateX(calc(15vw)) translateY(0rem) rotateZ(0deg);
        }
        50%{
                transform: translateX(0) translateY(-10rem) rotateZ(180deg);
        }
        75%{
                transform: translateX(calc(-15vw)) translateY(0rem) rotateZ(360deg);
        }
        100%{
                transform: translateX(calc(-50vw + 5rem)) translateY(0rem) rotateZ(360deg);
        }
}
</style>
<div class="road">
        <div class="jump">&#128692;</div>
</div>

杨帆 发表于 2025-8-19 15:53

本帖最后由 杨帆 于 2025-8-19 15:55 编辑

挺自然的动画效果！请问亚伦老师：那个骑车的小人人是什么图片呀，去哪找呢？

亚伦影音工作室 发表于 2025-8-19 16:30

杨帆 发表于 2025-8-19 15:53
挺自然的动画效果！请问亚伦老师：那个骑车的小人人是什么图片呀，去哪找呢？

特殊符号

杨帆 发表于 2025-8-19 18:49

亚伦影音工作室 发表于 2025-8-19 16:30
特殊符号

知道了，谢谢亚伦老师{:4_190:}

红影 发表于 2025-8-19 18:58

非常有趣的制作。欣赏亚伦老师好帖{:4_199:}
页: [1]
查看完整版本: 骑车