动画CSS的column-count属性
- WBOY转载
- 2023-08-31 13:37:17527浏览
要在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属性的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文转载于：tutorialspoint.com。如有侵权，请联系admin@php.cn删除