当前位置： 移动技术网 > IT编程>网页制作>CSS > 3d爱心代码

3d爱心代码

2019年05月16日  | 移动技术网IT编程  | 我要评论 

<!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>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网