PHP前端开发

动画CSS的column-count属性

百变鹏仔 3个月前 (09-22) #HTML

文章标签属性

要在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>

文章推荐

本站为非盈利性网站,不接受任何赞助和广告。

特别声明：本网站尊重并保护知识产权，根据《信息网络传播权保护条例》，如果我们转载的作品侵犯了您的权利,请在一个月内通知我们，我们会及时删除。 | 举报邮箱：344225443@qq.com

互联网ICP备案：陕ICP备2023000799号 Copyright 2023-2024 sharedbk.com All rights reserved | (c)2008-2024 共享博客