#学习笔记#(41)CSS3画心

最新推荐文章于 2023-03-13 19:10:25 发布

游走走

最新推荐文章于 2023-03-13 19:10:25 发布

阅读量3.3k

点赞数 1

分类专栏：学习笔记 web

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_24734285/article/details/50652278

版权

学习笔记同时被 2 个专栏收录

108 篇文章 0 订阅

订阅专栏

web

93 篇文章 1 订阅

订阅专栏

原理，两个圆与正方形组合而成，正方形边长与圆的直径相等

代码如下

<html>
	<head>
		<meta charset="utf-8" />
		<style>
		.box{
			width:200px;
			height:200px;
			margin:50px auto;
			animation:size 1s infinite;
			animation-direction:alternate;
			transition:1s all;
		}
		.round1{
			width:100px;
			height:100px;
			border-radius:50%;
			background-color:red;
			float:left;
			position:absolute;
		}
		.round2{
			width:100px;
			height:100px;
			border-radius:50%;
			background-color:red;
			float:left;
			position:absolute;
			margin-left:80px;
		}
		.rec{
			width:100px;
			height:100px;
			background-color:red;
			float:left;
			position:absolute;
			margin-top:40px;
			margin-left:40px;
			transform:rotateZ(45deg);
		}
		@keyframes size{
			0%{
				transform:scale(0.6);
			}
			100%{
				transform:scale(1);
			}
		}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="round1"></div>
			<div class="round2"></div>
			<div class="rec"></div>
		</div>
	</body>
</html>