纯css3画3D爱心

最新推荐文章于 2023-11-27 23:09:39 发布

面壁思过程

最新推荐文章于 2023-11-27 23:09:39 发布

阅读量863

点赞数

分类专栏： html+css 文章标签：纯css3画3D爱心

本文链接：https://blog.csdn.net/Candy_mi/article/details/90447825

版权

html+css 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

图示

代码如下

<!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>

优惠劵

面壁思过程

关注关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
纯css3画3D爱心

图示代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } body { background: #000; } .he...
复制链接

扫一扫