html 实例源码
实例源码：
源代码：
执行
执行中...
x
1
<!DOCTYPE html>2
<html>3
<head>4
<meta charset="utf-8"> 5
<title>时代Java与您共同学习(NowJava.com)</title> 6
<style> 7
#myDIV {8
border: 1px solid black;9
/* Firefox */10
-moz-column-count: 3;11
-moz-column-rule: 1px outset red;12
/* Chrome, Safari, Opera */13
-webkit-column-count: 3;14
-webkit-column-rule: 1px outset red;15
-webkit-animation: mymove 5s infinite;16
/* Standard syntax */17
column-count: 3;18
column-rule: 1pxpx outset red;19
animation: mymove 5s infinite;20
}21
22
/* Chrome, Safari, Opera */23
@-webkit-keyframes mymove {24
50% {-webkit-column-rule-width: 50px;}25
}26
27
/* Standard syntax */28
@keyframes mymove {29
50% {30
-moz-column-rule-width: 50px; /* Firefox */31
column-rule-width: 50px;32
}33
}34
</style>35
</head>36
<body>37
38
<p>column-rule-width 属性支持动画效果。</p>39
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>40
41
<p>逐步改变列的宽度，从 1px 到 50px:<p>42
<div id="myDIV">43
/**代码未完, 请加载全部代码(NowJava.com).**/执行结果：
本文系作者在时代Java发表，未经许可，不得转载。如有侵权，请联系nowjava@qq.com删除。
编辑于
关注时代Java