表白爱心
程序员文章站
2022-03-07 17:05:00
...
大致效果
（1）首先看到两个效果，我们就知道我们有两大块需要解决首先是里面的正方体其次是外面的心
（2）我们先从里面的正方体开始。我们知道正方体是有6个面（先写出大致的效果然后再一次的添加图片）：
<div id="cube">
<div>上</div>
<div>下</div>
<div>左</div>
<div>右</div>
<div>前</div>
<div>后</div>
</div>（3）给每个div添加样式我们好看：
#cube div {
width: 200px;
height: 200px;
border: 2px solid red;
}
（4）我们都知道6个正方体如何拼成正方体于是我们做成这样：
（5）然后我们想象他们要如何折叠成一个正方体于是用CSS3的旋转（注意：要设置3D环境其次要用3D的视角看）：
body{
perspective:1000px;//视口
}
//设置3D的环境
transform-style:preserve-3d;
（6）我们现在做外面心的曲线。border-radius其实是可以有8个值当我们设置如下的时候会出现半个心：
margin:200px auto;
width: 300px;
height: 600px;
border: 2px solid red;
border-left: 0;
border-bottom: 0;
border-radius: 50% 50% 0 /40% 50% 0;
（7）心是36个这样的曲线构成的于是我们用JS做36条：
var heard= document.getElementById("heard");
for(var i = 0; i < 36; i++) {
var cdiv = document.createElement("div");
cdiv.className = "heard";
cdiv.style.position="absolute";
cdiv.style.transform = "rotateY(" + i * 10 + "deg) rotateZ(45deg) translateX(55px)";
heard.appendChild(cdiv);
}
（8）然后调节参数即可（发挥自己的想象去调节吧）：
（9）最后合在一起~我相信你可以的
最后代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
perspective: 1000px;
}
#cube {
position: relative;
left: 0;
top: 0;
width: 200px;
height: 200px;
transform-origin: 50% 50% -100px;
/*设置3D的环境*/
transform-style: preserve-3d;
transition: 2s;
transform: translateX(60px) translateY(300px) translateZ(60px);
}
#cube div {
position: absolute;
width: 200px;
height: 200px;
}
#cube div:nth-child(1) {
top: -200px;
transform-origin: bottom;
transform: rotateX(90deg);
}
#cube div:nth-child(2) {
top: 200px;
transform-origin: top;
transform: rotateX(-90deg);
}
#cube div:nth-child(3) {
left: -200px;
transform-origin: right;
transform: rotateY(-90deg);
}
#cube div:nth-child(4) {
left: 200px;
transform-origin: left;
transform: rotateY(90deg);
}
#cube div:nth-child(5) {
transform: translateZ(-200deg)
}
#cube div:nth-child(6) {}
body {
background-color: black;
}
#heard {
position: relative;
width: 300px;
height: 600px;
margin: 100px auto;
transform-style: preserve-3d;
animation: rot 10s linear infinite;
}
@keyframes rot {
from {
transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg)
}
to {
transform: rotateY(360deg) rotateX(360deg) rotate(270deg)
}
}
#heard div.heard {
position: absolute;
left: 0;
top: 0;
width: 300px;
height: 600px;
/*border: 2px solid red;*/
border-left: 0;
border-bottom: 0;
border-radius: 50% 50% 0 /40% 50% 0;
}
#cube img {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id=heard>
<div id="cube">
<div><img src="img/b_1.jpg" /></div>
<div><img src="img/b_2.jpg" /></div>
<div><img src="img/b_3.jpg" /></div>
<div><img src="img/b_4.jpg" /></div>
<div><img src="img/b_5.jpg" /></div>
<div><img src="img/b_6.jpg" /></div>
</div>
</div>
</body>
<script type="text/javascript">
var colors = ["#FFB6C1", "#DB7093", "#FF69B4", "#483D8B","# 4169E1", "#87CEFA","#00BFFF", "#5F9EA0","#00FA9A", "#00FF7F","#7FFF00", "#FFFFE0", "#F5DEB3", "#BC8F8F", "#800000"];
var heard= document.getElementById("heard");
for(var i = 0; i < 36; i++) {
var cdiv = document.createElement("div");
cdiv.className = "heard";
cdiv.style.border="2px solid "+colors[i%15];
cdiv.style.borderLeft="0";
cdiv.style.borderBottom="0";
cdiv.style.transform = "rotateY(" + i * 10 + "deg) rotateZ(45deg) translateX(150px)";
heard.appendChild(cdiv);
}
</script>
</html>上一篇： 网页表白爱心树源码--改编