利用css3與html5來製作3d愛心
阿新 • • 發佈：2019-02-17
首先：愛心的製作
愛心的製作利用了css3的新增屬性border-radius，border-radius的屬性最多有8個值，
例如：border-radius：10px 20px 30px 40px/10px 20px 30px 40px;
斜槓之前代表上下左右的水平方向變化的圓角，之後代表上下左右的豎直方向變化的圓角，下面是例子
css：
* { padding:0;
margin:0;}
.heart3d{ position:absolute; top:0; left:0; margin-top:-80px; margin-left:-50px;//適應瀏覽器居中 width:100px; height:160px; } .heart{ position: absolute; top: 0; left: 0; width:100px; height: 160px; border-radius: 50% 40% 0/50% 40% 0; border-top:2px solid red; border-right:2px solid red; }html:
<html> <head><title>...</title> <style> </style> </head> <body> <div name="heart3d"></div> </body> </html>
上面形成了心得一般然後利用js生成其餘的
js：
<script type="text/javascript">
var contain = document.getElementsByClassName("heart3d")[0];
for (i=0;i<36;i++)//形成36個半心
{
var odiv =document.createElement("div");//建立一個元素節點div
odiv.className="heart";//賦予div的name屬性值
odiv.style.transform="rotateY("+i*10+"deg) rotateZ(45deg) translateX(30px)";
contain.appendChild(odiv);//利用appendChild 第一次寫感覺語無倫次