伪类选择器，过渡效果，2D转换———部分

最新推荐文章于 2024-08-26 16:48:02 发布

安北北

最新推荐文章于 2024-08-26 16:48:02 发布

阅读量118

点赞数 1

分类专栏： CSS 文章标签： css html5 html

本文链接：https://blog.csdn.net/m0_48454458/article/details/120554390

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1伪类选择器

nth-child(n) : 匹配父元素中的第 n 个子元素，元素类型没有限制。
nth-of-type(n) : 匹配同类型中的第n个同级兄弟元素。

<style>
    p:nth-child(3){
        color: red;
        background-color: lightblue;
    }
    h3:nth-of-type(3){
        color: blue;
        background-color: pink;
    }
-------------------------------------------------------------------------------
 <div>
        <p>星期1</p>
        <h3>标题1</h3>
        <p>星期2</p>
        <p>星期3</p>
        <h3>标题2</h3>
        <p>星期4</p>
        <h3>标题3</h3>
        <p>星期5</p>
    </div>
</style>

效果显示
在这里插入图片描述

2.transition 属性设置元素当过渡效果

语法：
在这里插入图片描述
案例：
将鼠标悬停在一个 div 元素上，逐步改变表格的宽度transition-property 指定CSS属性的

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: pink;
        /* 对div宽度100px进行设置.5之后，宽度变为300px */
        transition: width  .5s;
    }
    div:hover{
        width: 300px;
    }
</style>
<body>
    <div></div>
</body>

效果显示：
在这里插入图片描述

3.transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
在这里插入图片描述
案例：

<style>
		* {
			margin: 0; padding: 0;
		}
		.box {
			/* 使用了子绝父相，可以精确定位box内的元素， */
			float: left; position: relative; width: 300px; height: 300px;
			margin: 100px 200px; overflow: hidden;
		}
		.box > img {
			width: 300px; height: 300px;
		}
		
		.box > *{
			/* 给box下的所有元素设置转换1秒，多个元素，同时开始，同时结束 */
			transition: 1s; position: absolute; left: 0px; top:  0px;
		}
		.box h2 {
			color: white; width: 200px;
			transform: translateX(10px) translateY(250px);
		}
		.box p {
			color: white;
		}
		.box p:nth-of-type(1) {
			/* 先定位原本隐藏x和y轴的位置 */
			transform: translateY(140px) translateX(-170px);
		}
		.box p:nth-of-type(2) {
			/* 先定位原本隐藏x和y轴的位置 */
			transform: translateY(180px) translateX(-110px);
			transition: 1s 0.1s;
		}
		.box p:nth-of-type(3) {			
			/* 先定位原本隐藏x和y轴的位置 */
			transform: translateY(220px) translateX(-100px);
			transition: 1s 0.2s;
		}
		.box:hover p:nth-of-type(1) {
			/* 鼠标经过时，转换为此时的x和y的坐标 */
			transform: translateY(140px) translateX(10px);
		}
		.box:hover p:nth-of-type(2) {
			/* 鼠标经过时，转换为此时的x和y的坐标 */
			transform: translateY(180px) translateX(10px);
		}
		.box:hover p:nth-of-type(3) {
			/* 鼠标经过时，转换为此时的x和y的坐标 */
			transform: translateY(220px) translateX(10px);;
		}
	</style>
	<body>
		<div class="box">
			<img src="imgs/8.png" >
			<h2>Taylor Swift</h2>
			<p class="p1">Birthday:1989.12.13</p>
			<p class="p2">Height:180cm</p>
			<p class="p3">Weight:56kg</p>
		</div>
	</body>