利用css新特性，手动开花

最新推荐文章于 2023-02-02 11:15:22 发布

HerayChen

最新推荐文章于 2023-02-02 11:15:22 发布

阅读量414

点赞数

分类专栏：笔记文章标签：定位 css css3 js html

本文链接：https://blog.csdn.net/qq_45832807/article/details/105150410

版权

笔记专栏收录该内容

145 篇文章 6 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>手动开花</title>
		<style type="text/css">
			body{
				background-color: #000000;
			}
			.lotus{
				width: 300px;
				height: 300px;
				/* background-color: red; */
				/* transform：变换 旋转 */
				transform: rotate(45deg);
				margin:150px auto;
			}
			.lotus > div{
				/* 规范：定位，浮动，display写在选择器的前面，让程序的性能达到最高 */
				/* 代码性能优化，能提升页面打开速度 */
				/* 根据自身定位  将lotus下div重叠在一起 */
				position: absolute;
				width: 300px;
				height: 300px;
				background-color: pink;
				margin: 10px;
				/* 左上  右上  右下  左下 */
				border-radius: 0 300px 0 300px;
				/* rotate旋转 默认每个盒子旋转的中心点就在盒子的中心 */
				transform-origin: 300px 300px;	/* x轴位置 y轴位置 */
				opacity: 0.5;
				transition: 2s;
			}
			.lotus:hover > div:nth-child(1) {
				transform: rotate(30deg);
			}
			.lotus:hover > div:nth-child(2) {
				transform: rotate(60deg);
			}
			.lotus:hover > div:nth-child(3) {
				transform: rotate(90deg);
			}
			.lotus:hover > div:nth-child(4) {
				transform: rotate(-30deg);
			}
			.lotus:hover > div:nth-child(5) {
				transform: rotate(-60deg);
			}
			.lotus:hover > div:nth-child(6) {
				transform: rotate(-90deg);
			}
		</style>
	</head>
	<body>
		<div class="lotus">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</body>
</html>

HerayChen

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用css新特性，手动开花

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>手动开花</title> <style type="text/css"> body{ background-color: #000000; } .lotu...
复制链接

扫一扫