<!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. UnicodeEncodeError：'latin-1' codec can't encode characters in position 0-1: ordinal not in range(256) Scrapy

    1.使用scrapy对数据进行入库时,出现如下错误: UnicodeEncodeError:'latin-1' codec can't encode characters in position 0- ...

  2. CSS制作的32种图形效果[梯形|三角|椭圆|平行四边形|菱形|四分之一圆|旗帜]

    转载链接:http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet 前面在<纯CSS制作的图形效果>一文中介绍了十六种CSS画各种不 ...

  3. golang之switch

  4. 强强联合 阿里云 RDS for SQL Server 与 金蝶 K/3 WISE 产品实现兼容适配

    强强联合 阿里云 RDS for SQL Server 与 金蝶 K/3 WISE 产品实现兼容适配,原K/3 WISE用户通过简单配置就可以无缝搭配RDS SQL Server使用,不需再费时费力自 ...

  5. 错觉-Info：视错觉与UI元素间的可能

    ylbtech-错觉-Info:视错觉与UI元素间的可能 1.返回顶部 1. 视觉原理在当下红火的机械视觉中是必不可少的,那在我们日常工作的UI产品设计中又有什么可能性的呢?今天,我从“视错觉”这个角 ...

  6. 如何成功安装旧版本火狐，成功安装firebug

    1.下载一个老版本火狐浏览器: 历史版本下载 2.下载安装完成后,立即在火狐浏览器的选项设置里面把自动更新关闭 3.手动安装firebug:最后搜到可以下载成功的地址:http://www.onlin ...

  7. Microsoft: Get started with Dynamic Data Masking in SQL Server 2016 and Azure SQL

    Dynamic Data Masking (DDM) is a new security feature in Microsoft SQL Server 2016 and Azure SQL DB. ...

  8. 【转载】【技巧总结】PyCharm怎么克隆github上开源的项目

    PyCharm怎么clone github上开源的项目 一.先要确保PyCharm正确的配置了Git   如果你已经在PyCharm中配置好了Git,可以跳过此步骤,直接看下一步.   那么怎么在Py ...

  9. iOS 检测耳机插入/拔出

    http://www.verydemo.com/demo_c134_i28481.html 开发过程中录音和播放这块碰到了一些问题,麻烦的主要有三个: 检测是否有声音输入设备 当有多个声音输出设备时, ...

  10. Android实战：手把手实现“捧腹网”APP（一）-----捧腹网网页分析、数据获取

    Android实战:手把手实现"捧腹网"APP(一)-–捧腹网网页分析.数据获取 Android实战:手把手实现"捧腹网"APP(二)-–捧腹APP原型设计.实 ...