css3动画特效鸟飞

CSS3可以实现丰富的动画特效，其中鸟飞特效是比较常用的一种。这个特效通过多个关键帧的组合，制作出鸟在飞翔的动态效果。

.bird {
    width: 200px;
    height: 180px;
    background: url('bird.png') no-repeat;
    background-position: 0 0;
    position: absolute;
    top: 200px;
    left: -200px;
    animation: bird-fly 2s linear infinite;
}
@keyframes bird-fly {
0% {
    transform: translateX(-200px) translateY(0) rotateY(0deg);
    background-position: 0 0;
}
20% {
    transform: translateX(200px) translateY(-100px) rotateY(180deg);
    background-position: -200px 0;
}
40% {
    transform: translateX(600px) translateY(0) rotateY(0deg);
    background-position: -400px 0;
}
60% {
    transform: translateX(200px) translateY(100px) rotateY(180deg);
    background-position: -600px 0;
}
80% {
    transform: translateX(-200px) translateY(0) rotateY(0);
    background-position: -800px 0;
}
100% {
    transform: translateX(-600px) translateY(0) rotateY(180deg);
    background-position: -1000px 0;
}
}
    

这个鸟飞的动画实现的思路是：通过keyframes关键字制作多个关键帧，每个关键帧的transform属性（包括transalte和rotate）都不同，这样就制造出了鸟在飞翔的动态效果。而animation属性则起到了将关键帧们有机地连在一起的作用。

上述代码初始化界面时，首先让鸟出现在左侧，接着使用animation属性控制鸟在2秒的时间里，按照一定的速率执行keyframes定义的动画。

这个鸟飞特效可以用在许多场景中，比如网站顶部和模板页面中的装饰性元素等等。想要让网站更加生动有趣，不妨尝试一下吧！

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