3D爱心漂亮代码 

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>3daixin</title>
 6     <style type="text/css">
 7         body{
 8             background:black;
 9         }
10         .heart3d{
11             position:relative;
12             width: 100px;
13             height: 160px;
14             /*border: 2px solid red;
15             border-left:0;
16             border-bottom: 0;*/
17             margin:50px auto;
18             /*border-radius:50% 50% 0/40% 50% 0;/*斜杠前面是水平方向 斜杠后面是竖直方向 顺序是顺时针*/
19             /*transform: rotate(45deg);*/
20             animation: rot 20s linear infinite;/*自定义旋转旋转名称 20s 匀速旋转 无限重复*/
21             transform-style:preserve-3d;
22         }
23         /*关键帧：定义改变的值*/
24         @keyframes rot{
25             form{transform: rotateY(0deg)}
26             to{transform:rotateY(360deg)}
27         }
28         .heart3d div{
29             position: absolute;
30             left:0;
31             top:0;
32             width: 100px;
33             height: 160px;
34             border: 2px solid red;
35             border-left:0;
36             border-bottom: 0;
37             /*margin:50px auto;*/
38             border-radius:50% 50% 0/40% 50% 0;/*斜杠前面是水平方向 斜杠后面是竖直方向 顺序是顺时针*/
39             transform: rotate(45deg);
40         }
41     </style>
42 </head>
43 
44 <body>
45     <div class="heart3d">
46         <script type="text/javascript">
47         
48             var heart3d=//定义一个变量来保存
49                 //获取元素
50                 //在文档里面get获取元素
51                 document.getElementsByClassName("heart3d")[0];
52                 //在控制台里面的输出  console.log(heart3d)
53             for (var i=0;i<36;i++) //for循环 循环变量 定义一个i变量 初始值0 循环36次 自己循环一次
54                 {
55               var oDiv =document.createElement("div");//在文档里面创建元素
56               oDiv.style.transform = "rotateY("+i*10+"deg) rotateZ(45deg) translateX(30px)";
57                     heart3d.appendChild(oDiv);//往它里面添加子元素
58                 }
59         </script>
60 </body>
61 </html>

 

posted on 2019-06-02 22:07  斐常完美  阅读(2344)  评论(0)    收藏  举报

导航