利用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 ();方法將該div標籤新增到contain中;
}
</script>
形成了立體的愛心;可能會遇到遇到一些問題像遇到所成畫面為2d;只需加一個屬性transfrom-style:preserve-3d;即可。補充一點再加一個景深屬性,值都在1000px-1200px;perspective:1000px;第一次寫感覺語無倫次