3d爱心代码
<!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爱心代码的更多相关文章
- HTML5 3D爱心动画及其制作过程
之前有看到过很多基于HTML5或者CSS3制作的爱心动画,不过基本上都是2D平面的,今天在国外的网站上看到一个基于HTML5 3D的爱心动画,对于HTML5爱好者来说,不免兴奋了一把.下面将分享一下这 ...
- C语言控制台打印3D爱心图案
非常多程序猿都认为自己的编程工作十分的鼓噪乏味.一整天面对的都是一些写不完的代码和改不完的Bug.今天我们要给大家分享一些有趣的C语言代码,也许能够为你无聊的工作带来一丝乐趣. 这些代码能够完毕几个不 ...
- 纯css爱心代码-最近超级火的打火机与公主裙中的爱心代码（简易版）
theme: cyanosis 最近打火机与公主裙中的爱心代码超级火,看着特别心动,让俺用css来写个简易版!!! 先看效果: 代码拆解: 主要是分为3大部分 分子颗粒 爱心 动画 代码实现: 分子颗 ...
- HTML5 3D爱心动画 晚来的七夕礼物
在线演示源码下载 这么好看的HTML5爱心动画,我们当然要把源代码分享给大家,下面是小编整理的源代码,主要是HTML代码和CSS代码. HTML代码: <div class=’heart3d’& ...
- Python之——爱心代码参与情人节
一行代码实现输出爱心图,参考https://zhuanlan.zhihu.com/p/23321351 原理: 1.借助数学函数——((x * 0.05) ** 2 + (y * 0.1) ** 2 ...
- Cocos2dx lua 3D实例代码
用cocoside 创建一个项目 cocos2dx lua 项目即可 ,然后替换掉gamescene 就可以,具体效果还有函数的参数,相信大家一看就明白.简单说下ide 创建的 cocos lua 项 ...
- [应用][js+css3]3D盒子导航[PC端]
CSS3构建的3D盒子之导航应用 1.在用css3构建的盒子表面,放上iframe,来加载导航页面. 2.鼠标左键按下移动可旋转盒子,寻找想要的网址. 3.左键单机盒子表面,将全屏现实所点盒子表面的网 ...
- 一款基于HTML5的Web 3D开发工具
在我们协助客户进行3D应用的开发过程中,客户遇到的最头疼的问题是如何在短时间内学会使用TWaver 3D引擎,以及使用TWaver 3D来创建和导入项目所需的各种3D业务模型.由于项目涵盖的行业繁多. ...
- 3D动画
先上一道菜 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
随机推荐
- LUGOU P3907 圈的异或
传送门 解题思路 其实就是找出所有的环判断,因为数据范围很小直接暴力做,注意要判断自环. 代码 #include<iostream> #include<cstdio> #inc ...
- maven本地仓库有jar包，maven install还是报错识别不到
去本地仓库对应jar的目录下看下,有一个 _remote.repositories 的文件打开 ***.pom>xxx=***.jar>xxx= 这个 xxx 就是你maven的setti ...
- UML时序图(Sequence Diagram)学习笔记
什么是时序图时序图(Sequence Diagram),又名序列图.循序图,是一种UML交互图.它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作. 让我们来看一看visio2016对时序 ...
- JSP Web第七章整理复习 Servlet基础知识
P206-208 Servlet项目的创建,web.xml的配置及标签含义,相关程序 创建:new 一个Servlet类,继承自javax.servlet.http.HttpServlet; 写doG ...
- sas教程
http://web5.pku.edu.cn/pucssr/SASbiancheng.pdf 本教程中的主题将向您介绍 SAS Enterprise Guide.您最好依次浏览这些主题. 概述 启动项 ...
- 【JZOJ4763】【NOIP2016提高A组模拟9.7】旷野大计算
题目描述 输入 输出 样例输入 5 5 9 8 7 8 9 1 2 3 4 4 4 1 4 2 4 样例输出 9 8 8 16 16 数据范围 解法 离线莫队做法 考虑使用莫队,但由于在删数的时候难以 ...
- vue 保存数组和对象, 避免双向绑定影响
很多时候需要保存数据然后复用该数据,因vue的双向绑定总是不能保存原始数据 随笔记录解决方式 1. 不要把变量放置在data中 2. 保存至新的变量 object : let obj= Objec ...
- 公司mysql问题二
这个问题解决:
- Directx教程(29) 简单的光照模型(8)
原文:Directx教程(29) 简单的光照模型(8) 现在我们新建一个工程myTutorialD3D_23,在这个工程中,对前面一章的代码进行一些整理: 1.我们在顶点属性中增加材质的的漫 ...
- 微服务开源生态报告 No.5
「微服务开源生态报告」,汇集各个开源项目近期的社区动态,帮助开发者们更高效的了解到各开源项目的最新进展. 社区动态包括,但不限于:版本发布.人员动态.项目动态和规划.培训和活动. 非常欢迎国内其他微服 ...