HTML 3D表白爱心

最新推荐文章于 2024-08-11 17:47:06 发布

霜月枫桥

最新推荐文章于 2024-08-11 17:47:06 发布

阅读量1.2w

点赞数 13

分类专栏： Web前台demo小记

本文链接：https://blog.csdn.net/MOONCOM/article/details/78591815

版权

Web前台demo小记专栏收录该内容

22 篇文章 3 订阅

订阅专栏

代码如下:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	@keyframes ani{
		from{
			transform:rotateY(0deg) rotateX(0deg);
		}
		to{
			transform:rotateY(360deg) rotateX(360deg);
		}
	}
	body{
		perspective:1000px;
	}
	#heart{
		position:relative;
		height:200px;
		width:150px;
		margin:200px auto;
		animation:ani 5s linear infinite; 
		transform-style:preserve-3d;

	}
	.line{
		position:absolute;
		height:200px;
		width:150px;
		border:2px solid red;
		border-left:0;
		border-bottom:0;
		border-radius:50% 50% 0/50% 40% 0;
	}
	#word{
		font-family:"隶书";
		font-size:1.3em;
		color:red;
		position:absolute;
		top: 80px;
		left:22px;
		font-weight:bold;
	}

	</style>
</head>
<body>
	<div id="heart">
		<div id="word">I Love You</div>
	</div>

	<script>
		var heart=document.getElementById("heart");
		var html="";
		for(var i=0;i<36;i++){
			html+="<div class='line' style='transform:rotateY("+i*10+"deg) rotateZ(45deg) translateX(25px)'></div>";
		}
		heart.innerHTML += html;
	</script>
</body>
</html>

效果图如下:

知识点:

1. border-radius的属性值有8个,斜杠前是水平方向,斜杠后是垂直方向

eg: border-radius:50% 50% 0%/50% 40% 0;

2.注意HTML代码的书写规范,腾讯的 http://alloyteam.github.io/code-guide/百度的 https://github.com/ecomfe/spec

3. 3D字体随笔

3.1. 伪3D字体
特点:该方法制作的3D字体是在2D平面上实现的,就像在纸上画水滴一样,看起来是3D的,但它只是使用光线等手法实现的伪3D.
代码:
<style>
.demop{
text-shadow: 1px -1px #CCC,
2px -1px #BBB,
3px -2px #AAA,
4px -2px #999,
5px -3px #888,
6px -3px #777;
font-size:2em;
}
</style>
<p class="demop">测试用例</p>

3.2. 3D字体
思路:使用制作长方体的方法,正方体的六个面分别对应字体的正视图,侧视图,俯视图
缺点,太麻烦了.需要单独制作六个页面的显示图形.