html5开发三八女王节表白神器_HTML5_青云站长教程网
欢迎来到站长教程网!
  • 秒到短信接口 免费试用
  • 微信支付宝接口 秒结算
  • 中文网站排名|申请加入
  • 搜索引擎全站查询
  • 查询移动网站权重数据
  • 海外主机 台湾公司直销
  • HTML5

    当前位置:主页 > 网页制作 > HTML5 >

    html5开发三八女王节表白神器

    时间:2019-07-21|栏目:HTML5|点击:
  • 一年一度的三八女王节来临,今天小编基于html5给大家开发一个表白神器,做一个浪漫的程序猿,具体代码大家参考下本文。

    html5开发三八女王节表白神器

    html5开发三八女王节表白神器

    开发三八女王节表白神器运用到的知识点:css33D场景、3D变换、爱心制作技巧、3D立方体制作技巧、自定义动画,原生js DOM节点操作、循环等。

    :point_down:html代码:

    <div id="display"> </div>

    <div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div class="per">

    <div class="img"><img width="50" height="50" src=http://down.admin5.com/info/2018/0308/"images/1.jpg" /></div>

    <div class="img"><img width="50" height="50" src=http://down.admin5.com/info/2018/0308/"images/2.jpg" /></div>

    <div class="img"><img width="50" height="50" src=http://down.admin5.com/info/2018/0308/"images/3.jpg" /></div>

    <div class="img"><img width="50" height="50" src=http://down.admin5.com/info/2018/0308/"images/4.jpg" /></div>

    <div class="img"><img width="50" height="50" src=http://down.admin5.com/info/2018/0308/"images/5.jpg" /></div>

    <div class="img"><img width="50" height="50" src=http://down.admin5.com/info/2018/0308/"images/6.jpg"</div>

    </div>

    </div>

    :point_down:css代码:

    <style>

    /*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);

    }

    </style>

    :point_down:javascript代码:

    <script>

    var i = 0;

    上一篇:css3编写浏览器背景渐变背景色的方法

    栏    目:HTML5

    下一篇:HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码

    本文标题:html5开发三八女王节表白神器

    本文地址:http://www.jh-floor.com/wangyezhizuo/HTML5/8273.html

    广告投放 | 联系我们 | 版权申明

    重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

    如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

    联系QQ:888888 | 邮箱:888888#qq.com(#换成@)

    Copyright © 2002-2017 青云站长教程网 版权所有 琼ICP备xxxxxxxx号