微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

动画CSS的column-count属性

动画CSS的column-count属性

要在CSS中使用 column-count属性实现动画效果,你可以尝试运行以下代码

<!DOCTYPE html> <html> <head> <style> div { width: 400px; height: 300px; background: white; border: 10px solid red; animation: myanim 3s infinite; bottom: 30px; position: absolute; } @keyframes myanim { 20% { bottom: 100px; Box-shadow: 30px 45px 70px orange; column-count: 4; } } </style> </head> <body> <h2>Performing Animation on column-count 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>

以上就是动画CSS的column-count属性的详细内容,更多请关注编程之家其它相关文章

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐