利用css3与html5来制作3d爱心

最新推荐文章于 2024-07-18 08:41:17 发布

d lt's me

最新推荐文章于 2024-07-18 08:41:17 发布

阅读量2.5k

点赞数 1

分类专栏： js 文章标签： css3 html5 js

本文链接：https://blog.csdn.net/d649237053/article/details/80629371

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

首先：爱心的制作

爱心的制作利用了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>

appendChild（）;方法将该div标签添加到contain中；

}
</script>

形成了立体的爱心；可能会遇到遇到一些问题像遇到所成画面为2d；只需加一个属性transfrom-style：

preserve-3d ;

即可。补充一点再加一个景深属性，值都在1000px-1200px；

perspective : 1000px ;

第一次写感觉语无伦次