允儿相册—动画、过渡、结构伪类选择器

最新推荐文章于 2022-09-08 19:24:58 发布

何迟

最新推荐文章于 2022-09-08 19:24:58 发布

阅读量207

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 前端开发也蛮有意思的

本文链接：https://blog.youkuaiyun.com/qq_42036616/article/details/83478524

前端开发也蛮有意思的同时被 2 个专栏收录

82 篇文章

订阅专栏

CSS

13 篇文章

订阅专栏

本文介绍如何使用CSS的结构伪类选择器和过渡属性创建动态旋转效果，通过设置不同图层的权重，实现复杂的视觉展示。文章详细解释了nth-child、first-child和last-child的用法，以及transform-origin和transition属性的配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要点：

1.结构伪类选择器，注意nth-child后面接括号，里面写数字，从0开始。

特殊开头是first-child和last-child

2.过渡属性有四个值，后面的效果时间曲线和延时设为默认

3.旋转注意，正值为顺时针，负值为逆时针，单位是度（deg，千万不能与战队edg混，哈哈）

4.后加载的图层权重更大，在上面（所以我们看到的，是最后加载的）

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			width: 170px;
			height: 250px;
			border: 1px solid red;
			margin: 350px auto;
			position: relative;
		}
		div img{
			width: 100%;
			height: 100%;
			/*图片长宽比例不一致*/
			position: absolute;
			top: 0;
			left: 0;
			transition: all 1.4s;
			/*为所有的动画对象执行，执行时间为1.6s*/
			transform-origin: top right;
			/*默认以图片的中心点为旋转点，改成右上角点*/
		}
		div:hover img:first-child{
            transform: rotate(45deg);
            /*一共8一幅图片共360deg，平均45deg*/
		}
		div:hover img:nth-child(2){
            transform: rotate(90deg);
	    }
	    div:hover img:nth-child(3){
            transform: rotate(135deg);
	    }
	    div:hover img:nth-child(4){
            transform: rotate(180deg);
	    }
	    div:hover img:nth-child(5){
            transform: rotate(225deg);
	    }
	    div:hover img:nth-child(6){
            transform: rotate(270deg);
	    }
	    div:hover img:nth-child(7){
            transform: rotate(315deg);
	    }
        div:hover img:last-child{
            transform: rotate(360deg);
            /*第一幅位置没有变换，但是加上动画，就会旋转一圈，好看*/
		}
       
	</style>
</head>
<body>
	<div>
		<img src="img/1.jpg">
		<img src="img/2.jpg">
		<img src="img/11.jpg">
		<img src="img/12.jpg">
		<img src="img/13.jpg">
		<img src="img/14.jpg">
		<img src="img/16.jpg">
		<img src="img/18.jpg">
	</div>
</body>
</html>

效果：（gif图，多加载一会）