js书写爱心(单身狗的福音)

时间:2022-07-11 18:23:03

作为一个刚入到的小白 感觉到IT行业的压力 不过我们也可以在闲暇的时间去写一些小的案例去减压 下面是本人写的一个效果js书写爱心(单身狗的福音)

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				background: #000;
				perspective: 1200px;
			}
			
			#heart{
				width: 80px;
				height: 120px;
				animation: first 9s infinite;
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				margin: auto;
				transform-style: preserve-3d;
			}
			@keyframes first{
				from{transform: rotateZ(0deg) rotateX(0deg);}
				to{transform: rotateZ(360deg) rotateX(360deg);}
			}
			ul{
				width: 50px;
				height: 50px;
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				margin: auto;
				transform-style: preserve-3d;
			}
			li{
				width: 50px;
				height: 50px;
				list-style: none;
				background: #fff;
				opacity: 1;
				position: absolute;
				top: 0;
			}
			ul>li:nth-child(1){
				transform: rotateY(90deg) translateZ(25px);
			}
			ul>li:nth-child(2){
				transform: rotateY(90deg) translateZ(-25px);
			}
			ul>li:nth-child(3){
				transform: rotateX(90deg) translateZ(25px);
			}
			ul>li:nth-child(4){
				transform: rotateX(90deg) translateZ(-25px);
			}
			ul>li:nth-child(5){
				transform: translateZ(25px);
			}
			ul>li:nth-child(6){
				transform: translateZ(-25px);
			}
			img{
				width: 50px;
				height: 50px;
				display: block;
				border: none;
			}
			#heart>div{
				position: absolute;
				top: 0;
				width: 80px;
				height: 120px;
				border: 1px solid red;
				border-left: 0;
				border-bottom: 0;
				border-radius: 61px 52px 64px 43px/65px 39px 0px 0px;
				/*transform: rotateZ(45deg);*/
			}
		</style>
	</head>
	<body>
		<div id="heart">
			<ul>
				<li></li>  // 可以自行加图片
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<script type="text/javascript">
			var oHeart = document.getElementById("heart");
			for(var i = 0;i < 36;i++){
				var oDiv = document.createElement("div");//创建div
				oHeart.appendChild(oDiv);//在heart中添加div
				oDiv.style.transform = "rotateY("+i*10+"deg) rotateZ(45deg) translateX(23px)";
			}
		</script>
	</body>
</html>

图片:本身是一个动图 只是截取的

js书写爱心(单身狗的福音)

因本人第一次发帖 有问题或者更好的办法请大牛赐教