抖音上用记事本写“爱心”小程序教程

Love The Way You Lie 2022-05-16 08:51 1600阅读 1赞

先上一波效果图：

一颗旋转的小心心

![70][]

![70 1][]

![70 2][]

七夕的前一天晚上，当我满怀期待的把这颗“爱心”展示给我女朋友的时候，我以为她会very..very..happy

但是..她和我说你给我颗大蒜干什么啊..

Why are you giving me a garlic..

也就是那个时候，我突然觉得这真的像一颗大蒜哎

好啦，不多说了。直接上源代码：

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

运行这串代码也是非常简单，打开记事本，复制粘贴，将后缀名改为.html。

[70]: /images/20220516/7ac2e7a05b3b42eb98e2f7c1090662ae.png
[70 1]: /images/20220516/a4eff36906df4329a13935bc32b137bb.png
[70 2]: /images/20220516/feab12a3f07844e1894b69416478d6c2.png