<!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. idea使用docker插件

    idea使用docker插件 接着上一篇docker开启远程访问后,我们就可以通过idea使用docker插件把项目部署到docker了. 首先我们先在idea安装docker插件: 在setting ...

  2. JSP-http和tomcat

    一 Http 1.1 javaweb概述 1.2 http协议的概述 1．什么是Http协议 HTTP,超文本传输协议(HyperText Transfer Protocol)是互联网上应用最为广泛的 ...

  3. 2019-9-2-win10-uwp-存放网络图片到本地

    title author date CreateTime categories win10 uwp 存放网络图片到本地 lindexi 2019-09-02 12:57:38 +0800 2018-2 ...

  4. 洛谷P2196 挖地雷 [2017年4月计划 动态规划13]

    P2196 挖地雷 题目背景 NOIp1996提高组第三题 题目描述 在一个地图上有N个地窖(N<=20),每个地窖中埋有一定数量的地雷.同时,给出地窖之间的连接路径.当地窖及其连接的数据给出之 ...

  5. Django独有报错的原因和解决

    RuntimeError at /login You called this URL via POST, but the URL doesn't end in a slash and you have ...

  6. ecshop二次开发之电子票

    前台效果展示: 2. 3. 后台展示效果: 代码实现: 一.             添加菜单项:路径admin\includes\inc_menu.PHP $modules['18_ticket_m ...

  7. windows 下 解决 go get 或 dep init 更新不了问题

    首先你安装了Shadowsocks 并设置相应的代理,能够访问google等境外网站. 打开dos命令行窗口执行 如下图 这样你就能执行go get 或dep等命令,下载被墙的包了.以上方法为临时方法 ...

  8. 【JZOJ3216】【SDOI2013】淘金

    ╰(￣▽￣)╭ 小 Z在玩一个 叫做<淘金者>的游戏.游戏的世界是一个 二维坐标 .X轴.Y轴坐标范围均为1..N.初始的时候,所有的整数坐标点上均有一块金子,共 N*N 块. 一阵风吹过 ...

  9. Duplicate a whole line in Vim

    yy or Y to copy the line or dd to delete (cutting) the line then p to paste the copied or deleted te ...

  10. POJ1190 洛谷P1731 NOI1999 生日蛋糕

    生日蛋糕(蛋糕是谁?) Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 20272   Accepted: 7219 Desc ...