css3实现div动画效果（横向循环播放，首尾相连）（animation和transform）
以下是一个使用CSS3的@keyframes和animation属性实现的横向循环动画效果的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>横向循环动画</title>
<style>
.container {
overflow: hidden;
white-space: nowrap;
background: #f0f0f0;
width: 300px;
height: 100px;
position: relative;
}
.slider {
display: inline-block;
height: 100%;
background: #3498db;
width: 100px;
position: relative;
animation: slide 5s linear infinite;
}
.slider:before,
.slider:after {
content: "";
display: block;
position: absolute;
top: 0;
width: 50%;
height: 100%;
background: #3498db;
}
.slider:before {
left: -100%;
}
.slider:after {
right: -100%;
}
@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(300px);
}
}
</style>
</head>
<body>
<div class="container">
<div class="slider"></div>
</div>
</body>
</html>这段代码中，.container是一个容器，.slider是需要动画化显示的元素。通过CSS @keyframes slide 规则定义了一个从左至右平移300px的动画，在动画结束时返回到初始位置，形成一个循环的效果。使用:before和:after伪元素是为了实现首尾相连的效果，使得动画看起来是无界限循环的。
评论已关闭