数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C #
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚学
法学使用 CSS 动画更改 column-rule-width 属性
要使用 CSS 在 column-rule-width 属性上实现动画，你可尝试运行以下代码
示例
<!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;
column-rule-width: 20px;
}
}
</style>
</head>
<body>
<h2>Performing Animation on column rule width 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>
更新于： 25-Jun-2020
127 次浏览
广告