下面是我制作有动画效果的钢琴键,主要复习之前案例学习到的内容。
设置完后的效果:图1
当鼠标移动到黑色块时,白色琴键向下移动,并有动画效果;鼠标移开则恢复-图1:图2
当鼠标移在白色琴键时会被触发:图3
经典代码:源代码 图4
图5:
复习设置小手的属性-cursor:pointer;
定义盒子位置移动距离-transform:translatey(x水平方向;y垂直方向)
过渡属性-transition:all(默认值)0.1s(过渡效果完成时间)ease(匀速过渡)。
图6:
设置盒子的阴影-box-shadow:inset(内阴影)x-offset(水平方向偏移量,数值为负数时阴影在左边,为正时在右边)y- offset(垂直方向偏移量,数值为负数时阴影在上边,为正时在下边)blur-radius(模糊程度,数值越大越模糊)color(阴影颜色)
图7
transition-delay动画延迟时间,数值越大延迟时间越长;
移动的钢琴键
最新推荐文章于 2024-08-29 14:33:40 发布