动画CSS column-rule-color属性
要使用CSS在column-rule-color属性上实现动画,您可以尝试运行以下代码:
示例
<!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;
}
}
</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>热门推荐
10 六一祝福语简短感动女生
11 送情侣生日祝福语简短
12 蛋糕生日弥勒祝福语简短
13 炸鸡拼盘生日祝福语简短
14 学生宴祝福语简短的
15 祝福语赠言给老师简短
16 公司开年仪式祝福语简短
17 最美婆婆生日祝福语简短
18 回家长的祝福语简短