CSS3动画短视频剧本

这是一部关于CSS3动画的短视频剧本。

场景1：一个方格不停地跳动

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: jump 0.5s infinite alternate;
}
@keyframes jump {
0% {
    transform: translateY(0);
}
100% {
    transform: translateY(-20px);
}
}

场景2：一个心形逐渐变大变小

.heart {
    width: 50px;
    height: 50px;
    font-size: 50px;
    color: red;
    animation: bounce 1s infinite;
}
@keyframes bounce {
0% {
    transform: scale(1);
}
50% {
    transform: scale(1.5);
}
100% {
    transform: scale(1);
}
}

场景3：几个圆形交替变换颜色

.circle1, .circle2, .circle3 {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    animation: changeColor 3s infinite;
}
.circle1 {
    background-color: red;
    animation-delay: 0s;
}
.circle2 {
    background-color: green;
    animation-delay: 1s;
}
.circle3 {
    background-color: blue;
    animation-delay: 2s;
}
@keyframes changeColor {
0% {
    background-color: red;
}
33% {
    background-color: green;
}
66% {
    background-color: blue;
}
100% {
    background-color: red;
}
}

场景4：一个图片在不断旋转

img {
    width: 100px;
    height: 100px;
    animation: rotate 1s linear infinite;
}
@keyframes rotate {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}
    

通过这些场景，我们可以看到CSS3动画的强大和灵活性，让网页更加生动和有趣。

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