七夕情人节表白-纯JS实现3D心形+图片旋转

七夕情人节就快到了，这里献上纯js表白神器-心里都是你，预览：

 

技术点：css-3d、js-随机色、js-transform

1.html：

 1     <div class="heart">
 2         <div class="cube">
 3             <div>
 4                 <img src="images/1.jpg" width="100" height="100" alt="">
 5             div>
 6             <div>
 7                 <img src="images/2.jpg" width="100" height="100" alt="">
 8             div>
 9             <div>
10                 <img src="images/3.jpg" width="100" height="100" alt="">
11             div>
12             <div>
13                 <img src="images/4.jpg" width="100" height="100" alt="">
14             div>
15             <div>
16                 <img src="images/5.jpg" width="100" height="100" alt="">
17             div>
18             <div>
19                 <img src="images/6.jpg" width="100" height="100" alt="">
20             div>
21         div>
22     div>

2.css：

 1 *{
 2     margin:0;
 3     padding:0;
 4 }
 5 body{
 6     background:#000;
 7     overflow:hidden;
 8 }
 9 .heart{
10     position:absolute;
11     left:0;
12     right:0;
13     top:0;
14     bottom:0;
15     width:200px;
16     height:260px;
17     margin: auto;
18     transform-style:preserve-3d;
19     perspective:800px;
20     animation:rot 15s linear infinite;
21 }
22 @keyframes rot{
23     from{transform:rotateY(0deg) rotateX(0deg)}
24     to{
      transform:rotateY(360deg) rotateX(360deg)}
25 }
26 .rib{
27     position:absolute;
28     width:200px;
29     height:260px;
30     border:solid red;
31     border-width:1px 1px 0 0;
32     border-radius:100% 100% 0/40% 100% 0;
33     transition: all 1s;
34 }
35 .cube{
36     position:absolute;
37     left:0;
38     right:0;
39     top:0;
40     bottom:0;
41     margin:auto;
42     width:100px;
43     height:100px;
44     color:red;
45     transform-style:preserve-3d;
46     transform:translateZ(50px);
47 }
48 .cube div{
49     position:absolute;
50     width:100px;
51     height:100px;
52 }
53 .cube div:nth-child(1){
54     left:0;
55     top:-100px;
56     transform-origin:bottom;
57     transform:rotateX(90deg);
58 }
59 .cube div:nth-child(2){
60     left:0;
61     top:100px;
62     transform-origin:top;
63     transform:rotateX(-90deg);
64 }
65 .cube div:nth-child(3){
66     left:-100px;
67     top:0px;
68     transform-origin:right;
69     transform:rotateY(-90deg);
70 }
71 .cube div:nth-child(4){
72     left:100px;
73     top:0px;
74     transform-origin:left;
75     transform:rotateY(90deg);
76 }
77 .cube div:nth-child(5){
78     left:0;
79     top:0px;
80 }
81 .cube div:nth-child(6){
82     left:0;
83     top:0px;
84     transform:translateZ(-100px);
85 }

View Code

3.js：

 1 var heart = document.getElementsByClassName("heart")[0];
 2 for (var i = 0; i < 36; i++) {
 3     var oDiv = document.createElement("div");
 4     oDiv.className = "rib";
 5     // 画36条心形曲线
 6     oDiv.style.transform = "rotateY(" + 10 * i + "deg) rotateZ(45deg) translateX(30px)";
 7     var n = 0;
 8     setInterval(function() {
 9         if (n < 36) {
10             document.getElementsByClassName('rib')[n].style.borderColor = getRandomColor();
11             n = n + 1;
12         } else {
13             n = 0;
14         }
15     },1000)
16     console.log(n)
17     heart.appendChild(oDiv);
18 }
19 
20 // 随机色
21 var getRandomColor = function(){    
22   return  '#' +    
23     (function(color){    
24     return (color +=  '0123456789abcdef'[Math.floor(Math.random()*16)])    
25       && (color.length == 6) ?  color : arguments.callee(color);    
26   })('');    
27 } 

图片资源自行填充。

下图效果只是添加了一个hover改变div的transform属性，大家可以扩展制作。

 

转载于:https://www.cnblogs.com/e-cat/p/9467039.html