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;
}
}