css3字掉落效果 |右上角 css旋转

/* 使用CSS3实现字掉落效果 */
@keyframes drop {
0% {
transform: translateY(-200px); /* 将字向上移动200px */
opacity: 0; /* 让字消失 */
}
10% {
transform: translateY(0); /* 让字落下 */
opacity: 1; /* 让字出现 */
}
90% {
transform: translateY(0); /* 让字停留在原位 */
opacity: 1;
}
100% {
transform: translateY(200px); /* 将字向下移动200px */
opacity: 0; /* 让字消失 */
}
}
/* 给要添加效果的字添加动画 */
.word {
animation: drop 6s ease-in-out;
}

上面的代码中，大家首先定义了一个CSS3动画，名字为”drop”，包含4个关键帧。在0%时，将字向上移动200px并让其消失；在10%时，让字落下并出现；在90%时，让字停留在原位；在100%时，将字向下移动200px并让其消失。

接下来，大家为要添加效果的字创建一个样式名为”word”的类，并将动画属性设置为”drop”，时长为6秒，时间函数为”ease-in-out”。

最后，将要添加效果的字的标签添加”word”类名即可实现CSS3字掉落效果。