<!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. pstree进程管理

    功能:pstree命令列出当前的进程,以及它们的树状结构. 格式:pstree [选项] [pid|user] 主要选项如下: -a:显示执行程序的命令与完整参数. -c:取消同名程序,合并显示. - ...

  2. POJ1991 NOI1999棋盘分割

    棋盘分割 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 15581   Accepted: 5534 Description ...

  3. ubuntu16安装python3.7

    ####################################################源码安装python,注意shell脚本第一行开头的要求#################### ...

  4. c++中merge的操作

    merge:将两个有序序列合并成一个新的序列,并对新的序列排序 所在库:<algorithm> 注意:排序规则必须和原序列规则相同.存储时下标从0开始. 函数参数:merge(first1 ...

  5. redis的安装，以及主从实现同步

    Redis的主从复制功能非常强大,一个master可以拥有多个slave,而一个slave又可以拥有多个slave,如此下去,形成了强大的多级服务器集群架构.下面我演示下怎样在多台服务器上进行Redi ...

  6. 洛谷3953 (NOIp2017) 逛公园——记忆化搜索+用栈判0环

    题目:https://www.luogu.org/problemnew/show/P3953 因为K只有50,所以想到用dp[ cr ][ j ]表示在点cr.比最短路多走了 j 的方案数.(看了TJ ...

  7. 百度DMLC分布式深度机器学习开源项目（简称“深盟”）上线了如xgboost（速度快效果好的Boosting模型）、CXXNET（极致的C++深度学习库）、Minerva（高效灵活的并行深度学习引擎）以及Parameter Server（一小时训练600T数据）等产品，在语音识别、OCR识别、人脸识别以及计算效率提升上发布了多个成熟产品。

    百度为何开源深度机器学习平台?   有一系列领先优势的百度却选择开源其深度机器学习平台,为何交底自己的核心技术?深思之下,却是在面对业界无奈时的远见之举.   5月20日,百度在github上开源了其 ...

  8. JS---案例：图片跟着鼠标飞的最终版本

    案例:图片跟着鼠标飞的最终版本 换了个好看的糖果照片,想给博客首页加上,但是加上后,应该是overwrite原来的html,所以光有鼠标跟着飞的效果,原来的功能都不能用了 放入common.js &l ...

  9. GDSOI2017第三轮模拟4.21 总结

    1 第一题看着就觉得猎奇,于是就想着打暴力就跑. 但是很严重的问题就是... \(D\)和\(B\)打反了,都不知道当时在干什么??? 原本可以拿35. 2 第二题看着就觉得套路,于是想着今天就攻这题 ...

  10. nginx配置静态资源压缩

    sendfile on; #让nginx在传输文件时直接在磁盘和tcp socket之间传输数据 location ~ .*\.(txt|xml)$ { gzip on; #开启压缩 gzip_htt ...