首页工厂流水线动画css

工厂流水线动画css

时间: 2023-11-20 17:56:56 浏览: 43

以下是一个工厂流水线动画的CSS代码示例： ```html <!DOCTYPE html> <html> <head> <title>工厂流水线动画</title> <style type="text/css"> .container { position: relative; width: 800px; height: 600px; margin: 0 auto; background-color: #f2f2f2; overflow: hidden; } .chimney { position: absolute; top: 0; left: 50%; margin-left: -50px; width: 100px; height: 100px; background-color: #333; border-radius: 50%; box-shadow: 0 0 20px #000; animation: smoke 2s ease-in-out infinite; } @keyframes smoke { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(-200px) rotate(360deg); opacity: 0; } } .conveyor-belt { position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; background-color: #666; animation: conveyor 2s linear infinite; } @keyframes conveyor { 0% { background-position: 0 0; } 100% { background-position: 100px 0; } } .box { position: absolute; bottom: 100px; left: 0; width: 100px; height: 100px; background-color: #f00; animation: move 2s linear infinite; } @keyframes move { 0% { transform: translateX(-100px); } 100% { transform: translateX(800px); } } </style> </head> <body> <div class="container"> <div class="chimney"></div> <div class="conveyor-belt"></div> <div class="box"></div> </div> </body> </html> ``` 这段代码实现了一个工厂流水线动画，包括烟囱冒烟、传送带运动和货物移动等效果。你可以将代码复制到一个HTML文件中并在浏览器中打开，就可以看到动画效果了。