css样式动画源代码

在网页设计中，CSS样式动画可以很好地增强用户体验，使网页更加生动活泼。以下是一些CSS样式动画源代码的示例：

/* 旋转动画 */.rotate {
    animation: rotate 2s linear infinite;
}
@keyframes rotate {
0% {
     transform: rotate(0deg);
 }
100% {
     transform: rotate(360deg);
 }
}
/* 红色闪烁动画 */.blink {
    animation: blink 1s linear infinite;
}
@keyframes blink {
0% {
     background-color: red;
 }
50% {
     background-color: white;
 }
100% {
     background-color: red;
 }
}
/* 跳跃动画 */.jump {
    animation: jump 1s ease-in-out infinite;
}
@keyframes jump {
0%, 50%, 100% {
     transform: translateY(0);
 }
25% {
     transform: translateY(-20px);
 }
75% {
     transform: translateY(-10px);
 }
}
/* 变形动画 */.shape {
    animation: shape 2s ease-out infinite;
    transform-origin: 50% 50%;
}
@keyframes shape {
0% {
     transform: scale(1);
 }
30% {
     transform: scale(1.2) skew(20deg);
 }
60% {
     transform: scale(0.8, 1.2) skew(-20deg);
 }
90% {
     transform: scale(1.2) skew(0deg);
 }
100% {
     transform: scale(1);
 }
}
    

以上动画代码可以通过添加class属性来应用于元素，例如:

div class="rotate">
    /div>
    div class="blink">
    /div>
    div class="jump">
    /div>
    div class="shape">
    /div>
    

值得注意的是，这些动画使用了CSS3的animation属性，需要在一些老旧浏览器上使用-vendor-prefixed前缀。除此之外，动画的效果可以通过调整关键帧（@keyframes）属性来改变。

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