下面是一个使用CSS实现元素旋转、翻转和位移的动画效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 动画效果</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
overflow: hidden;
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
border-radius: 10px;
position: relative;
/* 动画定义 */
animation:
rotate 4s linear infinite,
flip 4s ease-in-out infinite,
move 8s linear infinite;
}
/* 旋转动画 */
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* 翻转动画 */
@keyframes flip {
0%, 100% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(180deg);
}
}
/* 位移动画 */
@keyframes move {
0% {
left: -100px;
}
50% {
left: calc(100vw - 100px);
}
100% {
left: -100px;
}
}
/* 添加文字说明 */
.box::before {
content: "动画效果";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
代码说明
旋转动画：
1.使用 rotate 关键帧使元素从0度旋转到360度
2.设置为线性无限循环
翻转动画：
1.使用 flip 关键帧通过 rotateY 实现3D翻转效果
2.从0度到180度再回到0度
3.使用ease-in-out使动画更平滑
位移动画：
1.使用 move 关键帧使元素从屏幕左侧移动到右侧再返回
2.使用 calc(100vw - 100px) 确保元素完全移出屏幕
组合动画：
1.所有动画同时应用于同一个元素
2.通过不同的持续时间和时间函数创造更丰富的效果
你可以根据需要调整动画的持续时间、方向和幅度来创建不同的效果。 ————————————————
