CSS3过渡小案例：折扇

最新推荐文章于 2023-07-27 11:05:11 发布

轻踏云层

最新推荐文章于 2023-07-27 11:05:11 发布

阅读量457

点赞数 2

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.csdn.net/chaochao2_0/article/details/107958391

版权

CSS3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS3过渡小案例：折扇

- 简单应用：利用鼠标经过后盒子阴影和上边距属性的改变，制作一个简单的页面效果
- 小案例：折扇案例

CSS3的过渡效果:
通过 CSS3的过渡效果，我们可以在不使用 Flash 动画或 JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：
过渡效果添加的具体 CSS 属性
效果时长
具体用法：
transition:transition-property transition-duration transition-timing-function transition-delay;

transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。
transition-delay 规定过渡效果何时开始。默认是 0。

简单应用：利用鼠标经过后盒子阴影和上边距属性的改变，制作一个简单的页面效果

		img {
			margin-top: 5px;
			margin-left: 40px;
			height: 200px;
			width: 200px;
			display: inline-block;
			transition: box-shadow 0.8s ease 0.1s;
		}
		 img:hover {
			margin-top: 3px;
			box-shadow: 0px 9px 10px 10px rgba(201,2,33,0.9);
		 }

小案例：折扇案例

鼠标经过后，折扇慢慢展开的页面效果

案例展示图片:
案例展示图片1

案例展示图片2
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box {
				width: 600px;
				height: 300px;
				border-bottom: 2px solid black;
				margin: 100px auto;
				position: relative;
			}
			.child {
				width: 20px;
				height: 120px;
				background-color: pink;
				left: calc(50% - 10px);
				top: calc(100% - 160px);
				position: absolute;
			}
			#box .child:nth-child(1) {
				background-color: skyblue;
			}
			#box:hover .child:nth-child(2) {
				transform: rotate(30deg);
				transform-origin: 50% 100%;
				/*设置旋转中心为折扇底部中心*/
				transition: transform 1s ease;
			}
			#box:hover .child:nth-child(3) {
				background-color: red;
				transform: rotate(-30deg);
				transform-origin: 50% 100%;
				transition: transform 1s ease;
			}
			#box:hover .child:nth-child(4) {
				transform: rotate(-60deg);
				transform-origin: 50% 100%;
				transition: transform 1s ease;
			}
			#box:hover .child:nth-child(5) {
				transform: rotate(60deg);
				transform-origin: 50% 100%;
				transition: transform 1s ease;
			}
			#box:hover .child:nth-child(6) {
				transform: rotate(45deg);
				transform-origin: 50% 100%;
				transition: transform 1s ease;
			}
			#box:hover .child:nth-child(7) {
				transform: rotate(-45deg);
				transform-origin: 50% 100%;
				transition: transform 1s ease;
			}
			#box:hover .child:nth-child(8) {
				transform: rotate(-15deg);
				transform-origin: 50% 100%;
				transition: transform 1s ease;
			}
			#box:hover .child:nth-child(9) {
				transform: rotate(15deg);
				transform-origin: 50% 100%;
				transition: transform 1s ease;
			}
			#box:hover .child:nth-child(10) {
				transform: rotate(-30deg);
				transform-origin: 50% 100%;
				transition: transform 1s ease;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="child"></div>
			<div class="child"></div>
			<div class="child"></div>
			<div class="child"></div>
			<div class="child"></div>
			<div class="child"></div>
			<div class="child"></div>
			<div class="child"></div>
			<div class="child"></div>
			<div class="child"></div>
		</div>
	</body>
</html>

轻踏云层

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3过渡小案例：折扇

CSS3过渡小案例：折扇简单应用：利用鼠标经过后盒子阴影和上边距属性的改变，制作一个简单的页面效果小案例：折扇案例CSS3的过渡效果: 通过 CSS3的过渡效果，我们可以在不使用 Flash 动画或 JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。 CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：过渡效果添加的具体 CSS 属性效果时长具体用法：transition:transition-property tra
复制链接

扫一扫