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 ...
随机推荐
- 解决WSL上运行plantUML中文乱码问题
生成UML图命令: java -jar plantuml.jar -charset UTF-8 my.txt 1. 保证my.txt 使用uft-8编码 2. wsl中安装中文字体: 如: sudo ...
- 【python之路16】作业
#!usr/bin/env python # -*- coding:utf-8 -*- # 数据库中原有 old_dict = { "#1": {'hostname': 'c1', ...
- 安装 cx_Oracle
1.下载 oracle client instant 和 sdk, 全部解压到 /opt/instantclient_11_2/ http://www.oracle.com/technetwor ...
- Docker.[1].环境准备.
Docker.[1].环境准备. 环境描述: 在笔记本中安装了虚拟机,虚拟机中又安装了RedHat 7.x操作系统,然后在这个RedHat7.x的操作系统上,进行安装Docker. 虚拟机中的操作系统 ...
- vue组件通信全面总结
写在前面 组件间的通信是是实际开发中非常常用的一环,如何使用对项目整体设计.开发.规范都有很实际的的作用,我在项目开发中对此深有体会,总结下vue组件间通信的几种方式,讨论下各自的使用场景 文章对相关 ...
- FJWC2018
晚上水到8:40,感觉药丸. 把电脑带回寝室,大半夜敲键盘…… bzoj5254红绿灯 泰迪每天都要通过一条路从家到学校,这条路的起点是泰迪家,终点则是学校. 这条路中间还有n个路口,从第i-1个路口 ...
- JQuery-- 获取元素的宽高、获取浏览器的宽高和垂直滚动距离
* 能够使用jQuery设置尺寸 * .width() width * .innerWidth() width + padding * .outerWidth() width + padding + ...
- URL编程
package com.tanlei.URL; import java.io.File; import java.io.FileOutputStream; import java.io.IOExcep ...
- 转载 初探Promise
初探Promise https://segmentfault.com/a/1190000007032448 javascript es6 promise 33.5k 次阅读 · 读完需要 65 分 ...
- 【JZOJ4925】【GDOI2017模拟12.18】稻草人
题目描述 YLOI村有一片荒地,上面竖着N个稻草人,村民们每年多次在稻草人们的周围举行祭典. 有一次,YLOI村的村长听到了稻草人们的启示,计划在荒地中开垦一片田地.和启示中的一样,田地需要满足以下条 ...