css3炫酷加载动画效果

CSS3是一种用于网页设计的新一代样式语言，它可以为网页带来更加炫酷的加载动画效果。在本文中，我们将介绍一些常见的CSS3加载动画效果。

/* CSS3加载动画效果样式 *//* 方块旋转 */@keyframes squareSpin {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}
.square-spin {
    width: 50px;
    height: 50px;
    background-color: #2ecc71;
    animation: squareSpin 1s infinite linear;
}
/* 圆形旋转 */@keyframes circleSpin {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}
.circle-spin {
    width: 50px;
    height: 50px;
    background-color: #3498db;
    border-radius: 50%;
    animation: circleSpin 1s infinite linear;
}
/* 线条跳动 */@keyframes lineJump {
0% {
    transform: translateY(0);
}
50% {
    transform: translateY(-20px);
}
100% {
    transform: translateY(0);
}
}
.line-jump {
    width: 50px;
    height: 50px;
    background-color: #9b59b6;
    display: inline-block;
    animation: lineJump 1s infinite ease-in-out;
}
    

上述代码中，我们定义了三种不同的加载动画效果：方块旋转、圆形旋转和线条跳动。它们都使用了CSS3的@keyframes关键字定义动画效果，同时利用animation属性指定动画的播放方式。

通过在网页中引用这些CSS样式，我们就可以轻松地实现这些炫酷的加载动画效果了。

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