css3 html动画源代码

最近，CSS3 和 HTML 动画在网页设计中越来越流行。这些动画可以让网页变得更加生动、有趣，帮助吸引用户的注意力。现在让我们来看看一些 CSS3 和 HTML 动画的源代码。

// CSS3 气泡动画.bubble{
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #e3f2fd;
    animation: bubble 1.5s ease-in-out infinite;
}
@keyframes bubble {
0% {
    box-shadow: 0 0 0px 0 rgba(255, 255, 255, 0.4);
}
100% {
    box-shadow: 0 0 50px 25px rgba(255, 255, 255, 0.0);
}
}
// HTML 飞翔鸟动画.bird-fly {
    position: relative;
    animation: fly 3s linear infinite;
}
@keyframes fly {
0% {
    transform: translateX(-150px);
}
100% {
    transform: translateX(1500px);
}
}
    

以上是两个例子，其中 CSS3 气泡动画使用了关键帧动画，同时也调用了一个无限循环来持续改变气泡的样式。HTML 飞翔鸟动画使用了 translateX() 函数来改变图片的位置，同时也调用了一个无限循环来让鸟的动画持续循环。

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