css画扇子

最新推荐文章于 2023-05-31 21:41:51 发布

zs806661306

最新推荐文章于 2023-05-31 21:41:51 发布

阅读量716

点赞数

分类专栏： web前端开发文章标签： nth-of-type transform rotate first-of-type

本文链接：https://blog.csdn.net/qq_27381193/article/details/53506450

版权

web前端开发专栏收录该内容

16 篇文章 0 订阅

订阅专栏

first-of-type:指定父元素的首个元素的属性。
例如：指定父元素的首个P元素的背景色
p:first-of-type
{
background:#ff0000;
}

nth-of-type(n) 指定规定属于父元素的第n个P元素的每个P
p:nth-of-type(n)
{
background:#ff0000;

}

transform-origin:设置旋转元素的基点位置

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>扇子</title>
	<style>
		html{
			overflow: hidden;
		}
		body{
			background: #999;
		}
		div{
			width: 10px;
			height: 500px;
			background: #c40000;
			position: absolute;
			top: 20%;
			left: 50%;
			transform-origin: center 90%;
			transition: transform 2s;
			border-left: 1px solid black;
			border-right: 1px solid black;
		}
		div:before,div:after{
			content: '';
			position: absolute;
			height: 300px;
			width: 20px;
		}
		div:before{
			border-top: 300px solid #dddddd;
			border-right: 25px solid transparent;
		}
		div:after{
			left:-35px;
			border-top: 300px solid white;
			border-left: 25px solid transparent;
		}
		div:first-of-type:after,
		div:last-of-type:before,
		div:last-of-type:after{
			border-top:300px solid #c40000; 
		}
		body:hover div:nth-of-type(1){
			transform: rotate(-70deg);
		}
		body:hover div:nth-of-type(2){
			transform: rotate(-60deg);
		}
		body:hover div:nth-of-type(3){
			transform: rotate(-50deg);
		}
		body:hover div:nth-of-type(4){
			transform: rotate(-40deg);
		}
		body:hover div:nth-of-type(5){
			transform: rotate(-30deg);
		}
		body:hover div:nth-of-type(6){
			transform: rotate(-20deg);
		}
		body:hover div:nth-of-type(7){
			transform: rotate(-10deg);
		}
		body:hover div:nth-of-type(8){
			transform: rotate(0deg);
		}
		body:hover div:nth-of-type(9){
			transform: rotate(10deg);
		}
		body:hover div:nth-of-type(10){
			transform: rotate(20deg);
		}
		body:hover div:nth-of-type(11){
			transform: rotate(30deg);
		}
		body:hover div:nth-of-type(12){
			transform: rotate(40deg);
		}
		body:hover div:nth-of-type(13){
			transform: rotate(50deg);
		}
		body:hover div:nth-of-type(14){
			transform: rotate(60deg);
		}
		body:hover div:nth-of-type(15){
			transform: rotate(70deg);
		}
		
	</style>
</head>
<body>
	<div></div><div></div><div></div><div></div><div></div>
	<div></div><div></div><div></div><div></div><div></div>
	<div></div><div></div><div></div><div></div><div></div>
</body>
</html>

zs806661306

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css画扇子

first-of-type:指定父元素的首个元素的属性。例如：指定父元素的首个P元素的背景色p:first-of-type{background:#ff0000;}nth-of-type(n) 指定规定属于父元素的第n个P元素的每个Pp:nth-of-type(n){background:#ff0000;} 扇子
复制链接

扫一扫

专栏目录