首页 > > 网页制作 > css >

3d爱心代码

2019-05-16 23:55:42来源：博客园阅读 ()


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>3daixin</title>
    <style type="text/css">
        body{
            background:black;
        }
        .heart3d{
            position:relative;
            width: 100px;
            height: 160px;
            /*border: 2px solid red;
            border-left:0;
            border-bottom: 0;*/
            margin:50px auto;
            /*border-radius:50% 50% 0/40% 50% 0;/*斜杠前面是水平方向 斜杠后面是竖直方向 顺序是顺时针*/
            /*transform: rotate(45deg);*/
            animation: rot 20s linear infinite;/*自定义旋转旋转名称 20s 匀速旋转 无限重复*/
            transform-style:preserve-3d;
        }
        /*关键帧：定义改变的值*/
        @keyframes rot{
            form{transform: rotateY(0deg)}
            to{transform:rotateY(360deg)}
        }
        .heart3d div{
            position: absolute;
            left:0;
            top:0;
            width: 100px;
            height: 160px;
            border: 2px solid red;
            border-left:0;
            border-bottom: 0;
            /*margin:50px auto;*/
            border-radius:50% 50% 0/40% 50% 0;/*斜杠前面是水平方向 斜杠后面是竖直方向 顺序是顺时针*/
            transform: rotate(45deg);
        }
    </style>
</head>

<body>
    <div class="heart3d">
        <script type="text/javascript">
        
            var heart3d=//定义一个变量来保存
                //获取元素
                //在文档里面get获取元素
                document.getElementsByClassName("heart3d")[0];
                //在控制台里面的输出  console.log(heart3d)
            for (var i=0;i<36;i++) //for循环 循环变量 定义一个i变量 初始值0 循环36次 自己循环一次
                {
              var oDiv =document.createElement("div");//在文档里面创建元素
              oDiv.style.transform = "rotateY("+i*10+"deg) rotateZ(45deg) translateX(30px)";
                    heart3d.appendChild(oDiv);//往它里面添加子元素
                }
        </script>
</body>
</html>