多列，结构性伪类，过渡

最新推荐文章于 2021-06-20 06:23:23 发布

檬了个柠

最新推荐文章于 2021-06-20 06:23:23 发布

阅读量197

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/lemonnomel1/article/details/79948306

1.多列

将文本内容设计成像报纸一样的多列布局

column-width：指定列的宽度
column-count：要分的列数
column-gap：列与列之间的间隙
column-rule：列与列之间的边框属性，复合属性。（column-rule-style、column-rule-width和column-rule-color的集合样式）
column-rule-style：间隔线类型（hidden：定义隐藏规则/dotted：定义点状规则/dashed：定义虚线规则/solid：定义实线规则/double：定义双线规则）
column-span：元素是否横跨所有列

direction：定义文字排列方式

rtl:从右向左排列

ltr:从左向右排列

注意要配合unicode-bidi:bidi-override; 一块使用

下面是一首诗的从右到左的4列排列：

<p>锄禾日当午汗滴禾下土谁知盘中餐粒粒皆辛苦</p>

p{direction:rtl;unicode-bidi:bidi-override;column-width:30px;column-count:4;width:150px;font-size:20px;column-gap:10px}

2.结构性伪类

E:nth-child(n) 表示E父元素的第n个子节点，且类型为E
p:nth-child(odd){background:red} /*匹配奇数行*/
p:nth-child(even){background:red} /*匹配偶数行*/
E:nth-last-child(n) 表示E父元素的第n个子节点，从后向前算，且类型为E
E:nth-of-type(n) 表示E父元素的第n个E子节点
E:nth-last-of-type(n)表示E父元素的第n个E子节点，从后向前算

下面是一个伪类的练习：

<div>
	<p>p1</p>
    <p>p2</p>
</div>
<div>
	<div>
    	<p>p3</p>
        <p>p4</p>
    </div>
    <p>p5</p>
    <p>p6</p>
    <p>p7</p>
</div>

p:nth-of-type(2){color:#ccc}
p:nth-child(2n){color:red;}

3.过渡

transition：过渡（css3的动画的一种）
transition-property：要运动的样式（all || [attr] || none）
transition-duration：规定完成过渡效果需要多少秒或毫秒，默认值为0
transition-delay：定义动画延迟多久开始，默认值为0

transition-timing-function：运动速度曲线。ease：（逐渐变慢）默认值；linear：（匀速）；ease-in：(加速)；ease-out：（减速）；ease-in-out：（先加速后减速）；cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ），贝赛尔曲线的图transition: property duration timing-function delay

下面是一个风车的练习，在6s转上三圈：

<div class="div1">
	<div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

.div1{overflow:hidden;width:400px;height:400px;transition:all 6s;margin:100px auto;}
.div1 div:nth-child(1),.div1 div:nth-child(4){width:200px;height:200px;float:left;border-radius:0 200px 0 200px;background-color:red}
.div1 div:nth-child(2),.div1 div:nth-child(3){width:200px;height:200px;float:left;border-radius:200px 0px 200px 0px;background-color:red}
.div1:hover{transform:rotate(1080deg);}