CSS布局案例 5-51 折扇效果

一醉南柯

已于 2024-01-04 17:02:30 修改

阅读量397

点赞数

分类专栏： Web前端开发文章标签： css 前端 javascript

于 2021-04-27 22:18:19 首次发布

本文链接：https://blog.csdn.net/dpl12/article/details/116211504

版权

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

13 篇文章 0 订阅

订阅专栏

该博客详细介绍了如何使用CSS3来创建一个交互式的折扇效果。通过设置绝对定位、旋转、过渡动画和透明度，实现了鼠标悬停时扇叶依次展开的视觉效果。代码示例中展示了不同颜色的扇叶在鼠标悬停时按特定角度旋转并逐渐显现，形成逼真的折扇动画。

摘要由CSDN通过智能技术生成

前言

使用css3实现折扇效果。

实现过程

1.步骤

折扇效果实现步骤:
	  1、先制作一个底座，还有几个扇叶（绝对定位实现组合）
	  2、旋转几个扇叶
	  3、设置打开动画和透明度效果

2.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS3实现折扇效果</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 600px;
				height: 230px;
				border-bottom: 2px #000000 solid;
				margin: 50px auto;
				position: relative;
			}
			.box div{
				width: 60px;
				height: 200px;
				position: absolute;                  /* 扇叶叠加到一块 */
				left: 270px;
				box-shadow: 3px 3px 5px #333;       /* 扇子合拢时的阴影效果 */
				transform-origin: center bottom;    /* 扇叶的旋转以底边中心点为原点 */
				transition: all 2s linear;  /* 扇子打开的过度动画,平滑一些 */
			}
			/* 鼠标点击之前的样式,在点击后扇子打开,扇叶透明度由0到1,打开时出现阴影折叠效果 */
			.box div:nth-of-type(1){background-color: red;}
			.box div:nth-of-type(2){background-color: yellow;opacity: 0;}
			.box div:nth-of-type(3){background-color: green;opacity: 0;}
			.box div:nth-of-type(4){background-color: blue;opacity: 0;}
			.box div:nth-of-type(5){background-color: pink;opacity: 0;}
			.box div:nth-of-type(6){background-color: gray;opacity: 0;}
			.box div:nth-of-type(7){background-color: yellowgreen;opacity: 0;}
			.box div:nth-of-type(8){background-color: yellowgreen;opacity: 0;}
			.box div:nth-of-type(9){background-color: gray;opacity: 0;}
			.box div:nth-of-type(10){background-color: pink;opacity: 0;}
			.box div:nth-of-type(11){background-color: blue;opacity: 0;}
			.box div:nth-of-type(12){background-color: green;opacity: 0;}
			.box div:nth-of-type(13){background-color: yellow;opacity: 0;}
			/* 鼠标点击的时候触发的样式 ,每个扇叶旋转15度*/
			.box:hover div:nth-of-type(2){transform: rotate(15deg);	opacity: 1;}
			.box:hover div:nth-of-type(3){transform: rotate(30deg);	opacity: 1;}
			.box:hover div:nth-of-type(3){transform: rotate(30deg);	opacity: 1;}
			.box:hover div:nth-of-type(4){transform: rotate(45deg);	opacity: 1;}
			.box:hover div:nth-of-type(5){transform: rotate(60deg);	opacity: 1;}
			.box:hover div:nth-of-type(6){transform: rotate(75deg);	opacity: 1;}
			.box:hover div:nth-of-type(7){transform: rotate(90deg);	opacity: 1;}
			.box:hover div:nth-of-type(8){transform: rotate(-90deg);opacity: 1;}
			.box:hover div:nth-of-type(9){transform: rotate(-75deg);opacity: 1;}
			.box:hover div:nth-of-type(10){transform: rotate(-60deg);opacity: 1;}
			.box:hover div:nth-of-type(11){transform: rotate(-45deg);opacity: 1;}
			.box:hover div:nth-of-type(12){transform: rotate(-30deg);opacity: 1;}
			.box:hover div:nth-of-type(13){transform: rotate(-15deg);opacity: 1;}
		</style>
	</head>
	<body>
		<div class="box">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>7</div>
			<div>6</div>
			<div>5</div>
			<div>4</div>
			<div>3</div>
			<div>2</div>
		</div>
	</body>
</html>

3.效果

在这里插入图片描述

一醉南柯

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS布局案例 5-51 折扇效果

文章目录前言实现过程1.步骤2.代码3.效果前言使用css3实现折扇效果。实现过程1.步骤折扇效果实现步骤: 1、先制作一个底座，还有几个扇叶（绝对定位实现组合） 2、旋转几个扇叶 3、设置打开动画和透明度效果2.代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CSS3实现折扇效果</title> <st
复制链接

扫一扫

专栏目录