纯css3画3D爱心

最新推荐文章于 2024-05-25 09:11:17 发布

原创最新推荐文章于 2024-05-25 09:11:17 发布 · 1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#纯css3画3D爱心

html+css 专栏收录该内容

29 篇文章

订阅专栏

博客展示了用纯CSS3绘制3D爱心的内容，包含相关图示及代码。CSS3在前端开发中可实现丰富的视觉效果，此次用于绘制3D爱心，为前端页面增添独特元素。

图示

代码如下

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		body {
			background: #000;
		}

		.heart3d {
			width: 100px;
			height: 160px;
			margin: 200px auto;
			position: relative;
			transition: 4s;
			transform-style: preserve-3d;
		}

		.heart {
			width: 100px;
			height: 160px;
			border: 2px solid red;
			position: absolute;
			border-left: 0;
			border-bottom: 0;
			border-radius: 50% 50% 0/40% 50% 0;

		}

		.heart3d:hover {
			transform: rotateX(360deg) rotateY(360deg);
		}
	</style>
</head>

<body>
	<div class="heart3d"></div>
	<script>
		var heart3d = document.getElementsByClassName("heart3d")[0];  
		for (var i = 0; i < 36; i++) {
			var odiv = document.createElement("div");
			odiv.className = "heart";
			odiv.style.transform = "rotateY(" + i * 10 + "deg) rotateZ(45deg)  translateX(30px)";
			heart3d.appendChild(odiv);   //遍历插入

		}
	</script>
</body>

</html>