CSS3 曲线动态效果

CSS3 曲线动态效果可以让你的网页更加生动活泼，吸引用户的眼球。在下面的 pre 标签中，你将看到一些常用的 CSS3 曲线动态效果的代码。

/* bezier 曲线 */.bezier {
    position: relative;
    animation: move 5s infinite alternate ease-in-out;
}
@keyframes move {
0% {
    top: 0px;
    left: 0px;
}
25% {
    top: 0px;
    left: 200px;
}
50% {
    top: 200px;
    left: 200px;
}
75% {
    top: 200px;
    left: 0px;
}
100% {
    top: 0px;
    left: 0px;
}
}
/* spiral 曲线 */.spiral {
    border: 1px solid #000;
    width: 200px;
    height: 200px;
    position: relative;
    border-radius: 50%;
    animation: spiral 5s infinite linear;
}
@keyframes spiral {
0% {
    transform: rotate(0deg) translate(0, 150px) rotate(0deg);
}
100% {
    transform: rotate(720deg) translate(0, 150px) rotate(-720deg);
}
}
/* 综合曲线 */.curve {
    position: relative;
    animation: curve 3s infinite ease-out;
}
@keyframes curve {
0% {
    left: -100px;
    top: 100px;
}
50% {
    left: 50%;
    top: 100px;
    transform: translate(100px, -50px);
}
100% {
    left: calc(100% + 100px);
    top: 100px;
}
}
    

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