在網(wǎng)頁(yè)設(shè)計(jì)中常常使用的HTML語(yǔ)言，是由一些偉大的程序員們?cè)O(shè)計(jì)出來的。當(dāng)然，其中一些特殊的小工具或代碼，也是由這些程序員們?cè)O(shè)計(jì)出來的。比如，我們現(xiàn)在在網(wǎng)頁(yè)上經(jīng)常可以看到一個(gè)愛心樹，許多人都曾經(jīng)嘗試過自己編寫這段愛心樹代碼。但是，你知道這段代碼的原作者是誰(shuí)嗎？
<html>
<head>
<meta charset="utf-8">
<title>Love Tree</title>
<style>
*{
margin:0;
padding:0;
}
body{
background-color:#FFCCCC;
}
.tree{
width: 40px;
height: 70px;
position: relative;
overflow: hidden;
}
.heart{
position: absolute;
top: 30px;
width: 20px;
height: 20px;
transform: rotate(45deg);
background-color: #fff;
border-radius: 50%;
border:3px solid #F08080;
box-shadow: 0 0 10px #F08080;
animation: heart-move 2s infinite ease-in-out;
}
@keyframes heart-move {
0%{
left: 0;
top: 0;
}
50%{
left: 17px;
top: 15px;
}
100%{
left: 0;
top: 0;
}
}
.leaf{
position: absolute;
width: 20px;
height: 30px;
border-radius: 0 0 50% 50%;
background-color: #7CFC00;
transform-origin: bottom center;
}
.leaf-left{
transform: rotate(45deg);
left: -7px;
bottom: 0;
}
.leaf-right{
transform: rotate(-45deg);
right: -7px;
bottom: 0;
}
.tree-body{
position: absolute;
width: 0;
height: 0;
left: 50%;
bottom: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 40px solid brown;
transform: translateX(-50%);
}
.tree-container{
position: absolute;
top: 0;
width: 0;
height: 0;
z-index:1;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 40px solid brown;
transform: translateX(-50%);
}
</style>
</head>
<body>
<div class="tree">
<div class="tree-container"></div>
<div class="tree-body"></div>
<div class="heart"></div>
<div class="leaf leaf-left"></div>
<div class="leaf leaf-right"></div>
</div>
</body>
</html>這段愛心樹代碼的創(chuàng)始人是一位自由職業(yè)者，他的名字是陳旭東。這位程序員在2013年的時(shí)候，就在IT之家論壇發(fā)布了這段愛心樹代碼，成為了當(dāng)時(shí)最熱門的話題之一。之后，這段代碼在網(wǎng)絡(luò)世界中流傳開來，成為了經(jīng)典中的經(jīng)典，無數(shù)的網(wǎng)頁(yè)設(shè)計(jì)師都曾經(jīng)使用過這段代碼。