css动画特效模板

CSS 动画特效在网页设计中扮演了很重要的角色，可以使网页的元素更加生动、美观，更好地吸引用户的注意力。在制作 CSS 动画时，我们可以选择从头编写，也可以选择使用现成的模板加速开发进程。下面介绍几个 CSS 动画特效模板。

!-- CSS 动画模板1 -->
    div class="box1">
    /div>
.box1 {
    width: 50px;
    height: 50px;
    background: #f00;
    animation: box1 1s ease infinite;
}
@keyframes box1 {
0% {
    transform: scale(1);
}
50% {
    transform: scale(1.1);
}
100% {
    transform: scale(1);
}
}
    !-- CSS 动画模板2 -->
    div class="box2">
    /div>
.box2 {
    width: 50px;
    height: 50px;
    background: #f00;
    position: relative;
    animation: box2 1s ease infinite;
}
.box2:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    border: 3px solid #f00;
    animation: box2-border 1s ease infinite;
}
@keyframes box2 {
0% {
    transform: rotate(0);
}
100% {
    transform: rotate(360deg);
}
}
@keyframes box2-border {
0% {
    opacity: 1;
    transform: scale(1);
}
100% {
    opacity: 0;
    transform: scale(1.5);
}
}
    !-- CSS 动画模板3 -->
    div class="box3">
    /div>
.box3 {
    width: 50px;
    height: 50px;
    background: #f00;
    position: relative;
    animation: box3 1s ease infinite;
}
.box3:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    border: 3px solid #fff;
    animation: box3-border 1s ease infinite;
}
@keyframes box3 {
0% {
    transform: scale(1);
}
50% {
    transform: scale(1.5);
    background: #0f0;
}
100% {
    transform: scale(1);
    background: #f00;
}
}
@keyframes box3-border {
0% {
    transform: scale(1);
    border-color: #fff;
}
50% {
    transform: scale(1.5);
    border-color: #ff0;
}
100% {
    transform: scale(1);
    border-color: #fff;
}
}
    

以上三种 CSS 动画特效模板可以应用于不同的场景，实现不同的效果。使用模板可以节省时间，同时也可以为初学者提供参考，使其更快地学会如何制作 CSS 动画特效。

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