html5妇女节游戏,html5开发三八女王节表白神器
效果图如下所示:
开发三八女王节表白神器运用到的知识点:css33D场景、3D变换、爱心制作技巧、3D立方体制作技巧、自定义动画,原生js DOM节点操作、循环等。
:point_down:html代码:
:point_down:css代码:
*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/
body{background:#000;}
.heart3d {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100px;
height: 160px;
transform-origin:center center center;
transform-style: preserve-3d;
animation: spin 15s infinite linear;
}
#display{width:200px;color:white;font-size:24px;white-space:normal;text-indent:55px;position:absolute;left:100px;top:100px;}
.heart3d [class^="rib"] {
position: absolute;
width: 100px;
height: 160px;
border: solid #f22613;
border-width: 1px 1px 0 0;
border-radius: 50% 50% 0 / 40% 50% 0;
}
.heart3d [class$="1"] {
transform: rotateY(10deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="2"] {
transform: rotateY(20deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="3"] {
transform: rotateY(30deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="4"] {
transform: rotateY(40deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="5"] {
transform: rotateY(50deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="6"] {
transform: rotateY(60deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="7"] {
transform: rotateY(70deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="8"] {
transform: rotateY(80deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="9"] {
transform: rotateY(90deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="10"] {
transform: rotateY(100deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="11"] {
transform: rotateY(110deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="12"] {
transform: rotateY(120deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="13"] {
transform: rotateY(130deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="14"] {
transform: rotateY(140deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="15"] {
transform: rotateY(150deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="16"] {
transform: rotateY(160deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="17"] {
transform: rotateY(170deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="18"] {
transform: rotateY(180deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="19"] {
transform: rotateY(190deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="20"] {
transform: rotateY(200deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="21"] {
transform: rotateY(210deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="22"] {
transform: rotateY(220deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="23"] {
-webkit-transform: rotateY(230deg) rotateZ(45deg) translateX(30px);
transform: rotateY(230deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="24"] {
transform: rotateY(240deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="25"] {
transform: rotateY(250deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="26"] {
transform: rotateY(260deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="27"] {
transform: rotateY(270deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="28"] {
transform: rotateY(280deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="29"] {
transform: rotateY(290deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="30"] {
transform: rotateY(300deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="31"] {
transform: rotateY(310deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="32"] {
transform: rotateY(320deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="33"] {
transform: rotateY(330deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="34"] {
transform: rotateY(340deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="35"] {
transform: rotateY(350deg) rotateZ(45deg) translateX(30px);
}
.heart3d [class$="36"] {
transform: rotateY(360deg) rotateZ(45deg) translateX(30px);
}
@keyframes spin {
to {
transform: rotateY(360deg) rotateX(360deg);
}
}
.per{
width:50px;height:50px;position:absolute;top:0;left:0;right:0;bottom:0;
margin:auto;transform-style: preserve-3d;perspective:800px;
}
.img{width:50px;height:50px;position:absolute;backface-visibility:hidden;
}
.img:nth-child(1){top:-50px;left:0;transform-origin:bottom;
transform:translateZ(30px) rotateX(90deg);}
.img:nth-child(2){top:50px;left:0;transform-origin:top;
transform:translateZ(30px) rotateX(-90deg);}
.img:nth-child(3){top:0px;left:-50px;transform-origin:right;
transform:translateZ(30px) rotateY(-90deg);}
.img:nth-child(4){top:0px;left:50px;transform-origin:left;
transform:translateZ(30px) rotateY(90deg);}
.img:nth-child(6){top:0px;left:0;transform:translateZ(30px);}
.img:nth-child(5){top:0px;left:0;transform:translateZ(0px);}
:point_down:javascript代码:
var i = 0;
var str1 = "对于一个网页制作者来说,对HTML语言一定不会感到陌生,因为HTML语言是所有网页制作的基础。但是如果页面能够方便网友们的使用,友好而大方,甚至像桌面应用程序一样,那么仅仅依靠HTML语言是不够的,JavaScript在这其中扮演着重要的角色。";
var str ="如果,爱一个人,守一份爱情,可以在早春一起去踏青,可以在盛夏一起去赏荷,可以在浅秋一起去观月,可以在深冬一起去寻梅,不厌倦,却欢乐,不平凡,却平淡。那么,此生便无憾了。";
window.onload = function typing(){
var mydiv = document.getElementById("display");
mydiv.innerHTML += str.charAt(i);
var oBtn = document.getElementById('btn');
i++;
var id = setTimeout(typing,100);
if(i==str.length){
clearTimeout(id);
mydiv.value ="";
mydiv.innerHTML +=""
//alert("程序执行完毕!");
}
}
总结
以上所述是小编给大家介绍的html5开发三八女王节表白神器,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
html5妇女节游戏,html5开发三八女王节表白神器相关推荐
- html5 移动游戏,HTML5移动游戏时代到来了!
11月19日,白鹭引擎主办的首届HTML5移动游戏大会,在国际会议中心隆重召开.巨头云集纵论行业发展,精英汇聚揭开HTML5移动游戏的神秘面纱,白鹭引擎重磅发布Egret引擎.工具和运行时,助推 ...
- 25 个超棒的 HTML5 JavaScript 游戏引擎开发库
就像在汽车中,引擎完成主要的工作,使汽车看起来不可思议.游戏引擎同理,游戏开发者完成细节的工作,使游戏看起来真实.吸引人眼球.游戏引擎负责其余的事情.早期,游戏开发者通常从草图做起,花费高昂,且不容易 ...
- python html5游戏_25 个超棒的 HTML5 JavaScript 游戏引擎开发库
就像在汽车中,引擎完成主要的工作,使汽车看起来不可思议.游戏引擎同理,游戏开发者完成细节的工作,使游戏看起来真实.吸引人眼球.游戏引擎负责其余的事情.早期,游戏开发者通常从草图做起,花费高昂,且不容易 ...
- html5 像素游戏,HTML5混搭像素风 也许是HTML5崛起的第一步
在手游时代,像素游戏一直处于微妙的位置.虽然市面上的像素游戏并不少见,<我的世界>.<泰瑞利亚>,国内的<冒险与挖矿>都表现出色.但是在手机游戏上像素游戏依然比较少 ...
- html5倒车游戏,html5制作转盘游戏
html5制作转盘游戏 h1{ width: 100%; height: 3rem; line-height: 3rem; font-size: 1.8rem; color:#c60; text-al ...
- html5抢红包游戏,HTML5手机微信抢红包福利袋游戏代码
HTML5手机微信抢红包福利袋游戏代码 HTML5手机微信抢红包福利袋游戏代码是一款手机移动端红包雨效果源码. js代码 $(function(){ var countdown=$(".co ...
- html5黄游戏,HTML5游戏-看你有多色
需引入easeljs-0.7.1.min.js html: 倒计时:60s 分数:0Rect.js,在html中需要引入: function Rect(n,color){//个数 createjs.S ...
- HTML5 Canvas游戏开发实战 PDF扫描版
HTML5 Canvas游戏开发实战主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧,在介绍HTML5 Canvas相关特性的同时,还通过游戏开发实例深入剖析了其内在原理,让读 ...
- 《HTML5 Canvas游戏开发实战》——2.1 绘制基本图形
本节书摘来自华章计算机<HTML5 Canvas游戏开发实战>一书中的第2章,第2.1节,作者:张路斌著, 更多章节内容可以访问云栖社区"华章计算机"公众号查看. 2. ...
最新文章
- PyTorch or TensorFlow?强力推荐PyTorch不是没有理由的!一文学透pytorch!
- Freescale 车身控制模块(BCM) 解决方案
- word2vec python实现_教程 | 在Python和TensorFlow上构建Word2Vec词嵌入模型
- 像素级动态模糊(Pixel Motion Blur)
- QT5生成可执行文件总结
- android recovery模式及ROM制作
- 生活随笔:大学需要确立自己的方向
- 16岁应该遵循什么_成人学习一般遵循的规律
- PyTorch学习(8)-问答系统、文本摘要和大规模预训练语言模型
- oracle关闭数据库容器,Oracle12cr1新特性之容器数据库(CDB)和可插拔数据库(PDB) 的启动和关闭...
- 自己的工作计划-备忘
- titanium开发教程-04-05从rows打开window
- MySQL 常用的查询命令
- java并发编程源码_Java并发编程实战 PDF+源码
- 大一计算机word排版试题,武汉大学大一计算机作业word排版
- Excel VBA(Visual Basic)编程入门
- a4如何打印双面小册子_a4如何排版打印双面小册子?
- virtualxposed使用教程_VirtualXposed框架
- 怎么登陆小程序服务器端,微信小程序如何登录
- LabWindows/CVI与Matlab混合编程的一种实现方法
热门文章
- linux lseek 指定 文件大小,linux下通过lseek()实现文件大小设置
- S2ANet(Align Deep Features for Oriented Object Detection)解读
- 春节了,上张祝福图片,顺祝大家新年好运,工作顺利!
- 万能险生存金什么意思,一文告诉你!
- 摊牌了,做为前端,我经常在用的15个国外网站
- 编译原理实验:代码生成作业(1)
- Python编程语言好学吗 怎么能学好Python开发
- python基础之实现len函数
- 全国各地迎来降雪,我们准备了五件发热好物,让你暖暖度过这个寒冬 | 钛空实测
- 测试大会能给我们带来什么?