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 ...
随机推荐
- Robbin负载均衡
Robbin是在Spring Cloud中的一个组件,是由Netfix发布的负载均衡器,有助于控制HTTP和TCP客户端的行为.它给我们提供了默认的轮询.随机等负载均衡算法.同时也可以由我们定义自己的 ...
- 凸优化 & 1概念
---恢复内容开始--- 放射集合 系数之和为1 相加仍然能在集合内,就是 纺射集合 子空间加一个常熟 就是纺射集合 , 例题2.1 一类特殊的线性方程组的解可以看作纺射 集合 纺射包 aff C 是 ...
- 快速乘O(1)和O(log)
O(1)快速乘来自骆可强:<论程序底层优化的一些方法与技巧> //O(1)快速乘 inline LL quick_mul(LL x,LL y,LL MOD){ x=x%MOD,y=y%MO ...
- CSS实现火焰效果
代码如下 //主要就是用css动画实现的 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- MySQL常见数据库引擎及对比
一:MySQL存储引擎简介 MySQL有多种存储引擎,每种存储引擎有各自的优缺点,大家可以择优选择使用:MyISAM.InnoDB.MERGE.MEMORY(HEAP).BDB(BerkeleyDB) ...
- screen 基础用法（转）
####################### 屏幕分割 ######################## 1. screen2. Ctrl-a c # create a new screen3 ...
- Python判断文件和文件夹是否存在的方法
Python判断文件和文件夹是否存在的方法 这篇文章主要介绍了Python判断文件和文件夹是否存在的方法,本文还讲解了判断是否为文件或者目录的方法.os.path.lexist的作用.FTP中判断文件 ...
- 【JZOJ5088】【GDOI2017第四轮模拟day2】最小边权和 排序+动态规划
题面 有一张n个点m条边的有向图,每条边有一个互不相同的边权w,有q个询问,要求你从点a经过不超过c条边到点b,要求经过的边权递增并和尽量小,求出最小的边权和,如果没有合法方案则输出-1. 对于100 ...
- django1.11启动错误
错误信息: 复制代码 Unhandled exception in thread started by <function check_errors..wrapper at 0x10f03b8c ...
- [Vue CLI 3] 配置解析之 parallel
官方文档中介绍过在 vue.config.js 文件中可以配置 parallel,作用如下: 是否为 Babel 或 TypeScript 使用 thread-loader. 该选项在系统的 CPU ...