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

3d爱心代码的更多相关文章

  1. HTML5 3D爱心动画及其制作过程

    之前有看到过很多基于HTML5或者CSS3制作的爱心动画,不过基本上都是2D平面的,今天在国外的网站上看到一个基于HTML5 3D的爱心动画,对于HTML5爱好者来说,不免兴奋了一把.下面将分享一下这 ...

  2. C语言控制台打印3D爱心图案

    非常多程序猿都认为自己的编程工作十分的鼓噪乏味.一整天面对的都是一些写不完的代码和改不完的Bug.今天我们要给大家分享一些有趣的C语言代码,也许能够为你无聊的工作带来一丝乐趣. 这些代码能够完毕几个不 ...

  3. 纯css爱心代码-最近超级火的打火机与公主裙中的爱心代码（简易版）

    theme: cyanosis 最近打火机与公主裙中的爱心代码超级火,看着特别心动,让俺用css来写个简易版!!! 先看效果: 代码拆解: 主要是分为3大部分 分子颗粒 爱心 动画 代码实现: 分子颗 ...

  4. HTML5 3D爱心动画 晚来的七夕礼物

    在线演示源码下载 这么好看的HTML5爱心动画,我们当然要把源代码分享给大家,下面是小编整理的源代码,主要是HTML代码和CSS代码. HTML代码: <div class=’heart3d’& ...

  5. Python之——爱心代码参与情人节

    一行代码实现输出爱心图,参考https://zhuanlan.zhihu.com/p/23321351 原理: 1.借助数学函数——((x * 0.05) ** 2 + (y * 0.1) ** 2 ...

  6. Cocos2dx lua 3D实例代码

    用cocoside 创建一个项目 cocos2dx lua 项目即可 ,然后替换掉gamescene 就可以,具体效果还有函数的参数,相信大家一看就明白.简单说下ide 创建的 cocos lua 项 ...

  7. [应用][js+css3]3D盒子导航[PC端]

    CSS3构建的3D盒子之导航应用 1.在用css3构建的盒子表面,放上iframe,来加载导航页面. 2.鼠标左键按下移动可旋转盒子,寻找想要的网址. 3.左键单机盒子表面,将全屏现实所点盒子表面的网 ...

  8. 一款基于HTML5的Web 3D开发工具

    在我们协助客户进行3D应用的开发过程中,客户遇到的最头疼的问题是如何在短时间内学会使用TWaver 3D引擎,以及使用TWaver 3D来创建和导入项目所需的各种3D业务模型.由于项目涵盖的行业繁多. ...

  9. 3D动画

    先上一道菜 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

随机推荐

  1. SPFA(Bellman-Ford队列优化)

    原理:队列+松弛操作 将源点加入队尾,每一步读取队头顶点u,并将队头顶点u出队(记得消除标记):将与点u相连的所有点v进行松弛操作,如果能更新距离(即令d[v]变小),那么就更新,另外,如果点v没有在 ...

  2. HttpClient实现远程调用

           在项目中,我们常常遇到远程调用的问题,一个模块总是无法单独存在,总需要调用第三方或者其他模块的接口.这里我们就涉及到了远程调用. 原来在 ITOO中,我们是通过使用EJB来实现远程调用的 ...

  3. Docker.[1].环境准备.

    Docker.[1].环境准备. 环境描述: 在笔记本中安装了虚拟机,虚拟机中又安装了RedHat 7.x操作系统,然后在这个RedHat7.x的操作系统上,进行安装Docker. 虚拟机中的操作系统 ...

  4. Directx11教程(47) alpha blend(4)-雾的实现

    原文:Directx11教程(47) alpha blend(4)-雾的实现      除了用来实现透明效果之外,我们还可以用alpha blend来实现雾(fog)的效果.通过逐渐清晰的雾气效果,可 ...

  5. oralce Sysdba和sysoper的区别

    Sysdba是一个允许读者执行任何数据库任务的全能特权.Sysoper是一个威力次之的特权,它赋予了启动和关闭能力,但限制其他管理性任务

  6. PHPCMS快速建站系列

    模板标签   {pc:content action="position" posid="2" order="id DESC" num=&qu ...

  7. 为数据计算提供强力引擎，阿里云文件存储HDFS v1.0公测发布

    在2019年3月的北京云栖峰会上,阿里云正式推出全球首个云原生HDFS存储服务—文件存储HDFS,为数据分析业务在云上提供可线性扩展的吞吐能力和免运维的快速弹性伸缩能力,降低用户TCO.阿里云文件存储 ...

  8. 2015全球商业地产商影响力排行TOP10：中国占据5个

    2015全球商业地产商影响力排行TOP10:中国占据5个 1.西蒙丨依然最有影响力 发展概况:西蒙公司是北美商业地产(专题阅读)的王者,美最大商业地产REITS,1960年最初只以开发为主,1993年 ...

  9. hdu4325 线段树 成段更新

    #include<stdio.h> #include<string.h> #include<algorithm> using namespace std; #def ...

  10. KiCad EDA 过孔是否可以开窗？

    KiCad EDA 过孔是否可以开窗? 和传统的商业 EDA 不同,KiCad EDA 的过孔默认就是盖绿油. 在 KiCad 的过孔界面没有任何可以设置的地方,这也有一个好处,不过考虑过孔是否盖油. ...