要使用CSS在column属性上实现动画,您可以尝试运行以下代码:
<!DOCTYPE html> <html> <head> <style> div { width: 600px; height: 300px; background: white; border: 10px solid red; animation: myanim 3s infinite; bottom: 30px; position: absolute; column-rule: 10px inset orange; column-count: 4; } @keyframes myanim { 20% { bottom: 100px; box-shadow: 30px 45px 70px orange; column-rule-color: black; columns: 70px 6; } } </style> </head> <body> <h2>Performing Animation on column rule color property</h2> <div>This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! </div> </body> </html>