CSS动画-多列
Posted SoulCode
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS动画-多列相关的知识，希望对你有一定的参考价值。
1.CSS3中可以创建多列来对文本或者区域进行布局
2.属性：
column-count 文本列
column-gap 文本宽度
column-rule 文本线条
3.下面是个例子:
在.html文件中:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>动画</title> 6 <link rel="stylesheet" type="text/css" href="style05.css"> 7 </head> 8 <body> 9 <div class="div1"> 10 大家好，欢迎来到人间地狱 11 大家好，欢迎来到人间地狱 12 大家好，欢迎来到人间地狱 13 大家好，欢迎来到人间地狱 14 大家好，欢迎来到人间地狱 15 大家好，欢迎来到人间地狱 16 大家好，欢迎来到人间地狱 17 大家好，欢迎来到人间地狱 18 大家好，欢迎来到人间地狱 19 大家好，欢迎来到人间地狱 20 大家好，欢迎来到人间地狱 21 大家好，欢迎来到人间地狱 22 大家好，欢迎来到人间地狱 23 大家好，欢迎来到人间地狱 24 大家好，欢迎来到人间地狱 25 大家好，欢迎来到人间地狱 26 大家好，欢迎来到人间地狱 27 大家好，欢迎来到人间地狱 28 大家好，欢迎来到人间地狱 29 大家好，欢迎来到人间地狱 30 大家好，欢迎来到人间地狱 31 大家好，欢迎来到人间地狱 32 大家好，欢迎来到人间地狱 33 大家好，欢迎来到人间地狱 34 大家好，欢迎来到人间地狱 35 大家好，欢迎来到人间地狱 36 大家好，欢迎来到人间地狱 37 大家好，欢迎来到人间地狱 38 大家好，欢迎来到人间地狱 39 大家好，欢迎来到人间地狱 40 大家好，欢迎来到人间地狱 41 大家好，欢迎来到人间地狱 42 大家好，欢迎来到人间地狱 43 大家好，欢迎来到人间地狱 44 大家好，欢迎来到人间地狱 45 大家好，欢迎来到人间地狱 46 大家好，欢迎来到人间地狱 47 大家好，欢迎来到人间地狱 48 大家好，欢迎来到人间地狱 49 大家好，欢迎来到人间地狱 50 大家好，欢迎来到人间地狱 51 大家好，欢迎来到人间地狱 52 大家好，欢迎来到人间地狱 53 大家好，欢迎来到人间地狱 54 大家好，欢迎来到人间地狱 55 大家好，欢迎来到人间地狱 56 大家好，欢迎来到人间地狱 57 大家好，欢迎来到人间地狱 58 大家好，欢迎来到人间地狱 59 大家好，欢迎来到人间地狱 60 大家好，欢迎来到人间地狱 61 大家好，欢迎来到人间地狱 62 大家好，欢迎来到人间地狱 63 大家好，欢迎来到人间地狱 64 大家好，欢迎来到人间地狱 65 大家好，欢迎来到人间地狱 66 大家好，欢迎来到人间地狱 67 大家好，欢迎来到人间地狱 68 大家好，欢迎来到人间地狱 69 大家好，欢迎来到人间地狱 70 大家好，欢迎来到人间地狱 71 大家好，欢迎来到人间地狱 72 大家好，欢迎来到人间地狱 73 大家好，欢迎来到人间地狱 74 大家好，欢迎来到人间地狱 75 大家好，欢迎来到人间地狱 76 大家好，欢迎来到人间地狱 77 大家好，欢迎来到人间地狱 78 大家好，欢迎来到人间地狱 79 大家好，欢迎来到人间地狱 80 大家好，欢迎来到人间地狱 81 大家好，欢迎来到人间地狱 82 大家好，欢迎来到人间地狱 83 大家好，欢迎来到人间地狱 84 大家好，欢迎来到人间地狱 85 大家好，欢迎来到人间地狱 86 大家好，欢迎来到人间地狱 87 大家好，欢迎来到人间地狱 88 大家好，欢迎来到人间地狱 89 大家好，欢迎来到人间地狱 90 </div> 91 </body> 92 <html/>
在.css文件中:
1 .div1{ 2 -webkit-column-count:4; 3 -moz-column-count:4; 4 column-count:4; 5 -webkit-column-gap: 50px; 6 -moz-column-gap: 50px; 7 column-gap: 50px; 8 column-rule:5px outset #FF0000; /**/ 9 -webkit-column-rule:5px outset #FF0000; 10 }
运行结果：
注意：column-rule 效果没有出现，不知道什么原因，各位知道请指点指点！
以上是关于CSS动画-多列的主要内容，如果未能解决你的问题，请参考以下文章