[原创]webapp/css3实战，制作一个《炉石传说》宣传页
在移动网页，尤其是webapp中
常需要用到大量的css3动画，来获得良好交互体验
我之前帮朋友做了一个，可惜没帮上忙
现在和大家分享一下
目标是要做一个《炉石传说》游戏的介绍宣传页面，文字内容不多，主要是要和用户有互动
脑海中闪过很多见过的css3效果，决定总体采用一个3d翻转效果，每页再堆砌一些小动画
效果/演示
（在支持css3的浏览器中才能显示，ie11目前都不支持3d转换）
div{position:absolute;top:0px;left:0px; overflow:hidden;}
.o1{background:url(http://images.cnblogs.com/cnblogs_com/wingkun/633859/o_hs1.png) 50% 50% no-repeat;background-size:100% 100%;}
.o1_menu{position:absolute;bottom:0px;margin-bottom:20px;width:100%;}
.o1_menu>div{;width:120px;height:32px;margin:0 auto 10px auto;line-height:32px;color:#fff;}
.o1_menu .d1{background:url(http://images.cnblogs.com/cnblogs_com/wingkun/633859/o_icons_01.png) -44px -180px no-repeat;}
.o1_menu .d2{background:url(http://images.cnblogs.com/cnblogs_com/wingkun/633859/o_icons_01.png) -44px -232px no-repeat;color:#000;}
.o1_ct{margin:30px auto;}
.o1_ct span{font-size:25px;color:#E7BD19;font-weight:bold;text-shadow:1px 1px 3px #C8AE5E;}
.o1 .up{opacity:0.5;display:block;width:30px;height:30px;background:url(http://images.cnblogs.com/cnblogs_com/wingkun/633859/o_lc_tip.png) 50% 50% no-repeat;background-size:100% 100%;margin:10px auto;-webkit-animation:kl2 5s linear infinite;animation:kl2 5s linear infinite;}
.o1 .down{opacity:0.5;display:block;width:30px;height:30px;background:url(http://images.cnblogs.com/cnblogs_com/wingkun/633859/o_lc_tip.png) 50% 50% no-repeat;background-size:100% 100%;margin:10px auto;-webkit-animation:kl3 5s linear infinite;-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg);}
.logo{width:210px;height:80px;margin:0 auto;background:url(http://images.cnblogs.com/cnblogs_com/wingkun/633859/o_logo.png) 50% 50% no-repeat;
background-size:100% 100%;margin-top:20px;-webkit-animation:kl 2s linear infinite alternate;animation:kl 2s linear infinite alternate;}
.o2{background:url(http://images.cnblogs.com/cnblogs_com/wingkun/633859/o_hs2.png) 50% 50% no-repeat;background-size:100% 100%;}
.o2_ct{width:137px;height:134px;background:url(http://images.cnblogs.com/cnblogs_com/wingkun/633859/o_hs_m.png);position:absolute;top:0px;right:0px;bottom:0px;left:0px;margin:auto;}
.o2 ul{position:relative;}
.o2 li{position:absolute;list-style:none;top:0;left:0;background:url(http://images.cnblogs.com/cnblogs_com/wingkun/633859/o_icons_01.png) no-repeat;width:30px;height:30px;}
.o2_ct .o2_1{background-position:-3px -5px;top:-30px;left:50px;-webkit-animation:kl4_1 4s linear infinite alternate;animation:kl4_1 4s linear infinite alternate; }
.o2_ct .o2_2{background-position:-3px -43px;top:56px; left:138px;-webkit-animation:kl4_2 4s infinite alternate;animation:kl4_2 4s infinite alternate;}
.o2_ct .o2_3{background-position:-3px -81px;top:56px;left:-30px;-webkit-animation:kl4_3 4s ease-in infinite alternate;animation:kl4_3 4s ease-in infinite alternate;}
.o2_ct .o2_4{background-position:-3px -119px;top:134px;left:53px;-webkit-animation:kl4_4 4s ease-out infinite alternate;animation:kl4_4 4s ease-out infinite alternate; }
.o3{background:url(http://images.cnblogs.com/cnblogs_com/wingkun/633859/o_hs3.png) 50% 50% no-repeat;background-size:100% 100%;}
.o3_tx{border-width: 7px;border-style:solid; border-image: url(http://images.cnblogs.com/cnblogs_com/wingkun/633859/o_border_01.png) 7 repeat;margin: 20px auto;width: 200px;
height: 300px;box-shadow: inset 0px 0px 65px -16px #000;padding: 10px;line-height: 20px;color: rgb(103, 79, 1);background:linear-gradient(45deg,rgb(253, 239, 194),rgb(234, 220, 185));
}
.o3_tx h1{font-height:20px; padding:10px 0px 10px 0px; }
.o4{background:url(http://images.cnblogs.com/cnblogs_com/wingkun/633859/o_hs4.png) 50% 50% no-repeat;background-size:100% 100%;text-align:center;}
.o4_r{width:200px;height:250px;background:url(http://images.cnblogs.com/cnblogs_com/wingkun/633859/o_robot.png) no-repeat;background-size:100% 100%;-webkit-transform:translate(0,-250px);-webkit-animation:kl5 20s infinite;transform:translate(0,-250px);animation:kl5 20s infinite;display:inline-block; }
.o4_ct{display:inline-block; margin-top:50px;}
.o4_p{width:100px;height:150px;background:url(http://images.cnblogs.com/cnblogs_com/wingkun/633859/o_cardback.png) no-repeat;background-size:100% 100%;float:left;}
.o4_ct>div:nth-child(1){-webkit-transform: rotateZ(-30deg) translate(20px,0px);opacity:0;-webkit-animation:kl5_1 20s infinite;
transform: rotateZ(-30deg) translate(20px,0px);opacity:0;animation:kl5_1 20s infinite;}
.o4_ct>div:nth-child(2){-webkit-transform: rotateZ(30deg) translate(20px,0px);opacity:0;-webkit-animation:kl5_2 20s infinite;
transform: rotateZ(30deg) translate(20px,0px);opacity:0;animation:kl5_2 20s infinite; }
.o4_ct>div:nth-child(3){-webkit-transform: rotateZ(-18deg);opacity:0;-webkit-animation:kl5_3 20s infinite;
transform: rotateZ(-18deg);opacity:0;animation:kl5_3 20s infinite;}
/*-webkit-animation*/
@-webkit-keyframes kout
{
0%,20%{-webkit-transform:translateZ(-240px) rotateX(0deg) ;}
25%,45%{-webkit-transform:translateZ(-240px) rotateX(90deg) ;}
50%,70%{-webkit-transform:translateZ(-240px) rotateX(180deg) ;}
75%,95%{-webkit-transform:translateZ(-240px) rotateX(270deg) ;}
100%{-webkit-transform:translateZ(-240px) rotateX(360deg) ;}
}
@-webkit-keyframes kl
{
from{-webkit-transform:scale(1.0) translate(0px,0px);}
to{-webkit-transform:scale(1.1) translate(2px,4px);}
}
@-webkit-keyframes kl2
{
from{-webkit-transform:translate(0px,20px);}
to{-webkit-transform:translate(0px,0px);}
}
@-webkit-keyframes kl3
{
from{-webkit-transform:translate(0px,0px) rotateZ(180deg);}
to{-webkit-transform:translate(0px,20px) rotateZ(180deg);}
}
@-webkit-keyframes kl4_1
{
from{-webkit-transform:translate(0px,-10px) ;}
to{-webkit-transform:translate(-15px,-20px);}
}
@-webkit-keyframes kl4_2
{
from{-webkit-transform:translate(0px,-5px) ;}
to{-webkit-transform:translate(20px,-20px);}
}
@-webkit-keyframes kl4_3
{
from{-webkit-transform:translate(-10px,10px) ;}
to{-webkit-transform:translate(-20px,20px);}
}
@-webkit-keyframes kl4_4
{
from{-webkit-transform:translate(0px,0px) ;}
to{-webkit-transform:translate(20px,20px);}
}
@-webkit-keyframes kl5
{
0%,75%{-webkit-transform:translate(0px,-250px) ;}
85%,100%{-webkit-transform:translate(0px,50px);}
}
@-webkit-keyframes kl5_1
{
0%,85%{-webkit-transform:rotateZ(-50deg) translate(-200px,0px);opacity:0;}
100%{-webkit-transform:rotateZ(-30deg) translate(20px,0px);opacity:1;}
}
@-webkit-keyframes kl5_2
{
0%,85%{-webkit-transform:rotateZ(0deg) translate(0px,200px);opacity:0;}
100%{-webkit-transform:rotateZ(30deg) translate(20px,0px);opacity:1;}
}
@-webkit-keyframes kl5_3
{
0%,85%{-webkit-transform:rotateZ(-18deg) translate(200px,0px) ;opacity:0;}
100%{-webkit-transform:rotateZ(-18deg) translate(0px,0px) ;opacity:1;}
}
/*animation*/
@keyframes kout
{
0%,20%{transform:translateZ(-240px) rotateX(0deg) ;}
25%,45%{transform:translateZ(-240px) rotateX(90deg) ;}
50%,70%{transform:translateZ(-240px) rotateX(180deg) ;}
75%,95%{transform:translateZ(-240px) rotateX(270deg) ;}
100%{transform:translateZ(-240px) rotateX(360deg) ;}
}
@keyframes kl
{
from{transform:scale(1.0) translate(0px,0px);}
to{transform:scale(1.1) translate(2px,4px);}
}
@keyframes kl2
{
from{transform:translate(0px,20px);}
to{transform:translate(0px,0px);}
}
@keyframes kl3
{
from{transform:translate(0px,0px) rotateZ(180deg);}
to{transform:translate(0px,20px) rotateZ(180deg);}
}
@keyframes kl4_1
{
from{transform:translate(0px,-10px) ;}
to{transform:translate(-15px,-20px);}
}
@keyframes kl4_2
{
from{transform:translate(0px,-5px) ;}
to{transform:translate(20px,-20px);}
}
@keyframes kl4_3
{
from{transform:translate(-10px,10px) ;}
to{transform:translate(-20px,20px);}
}
@keyframes kl4_4
{
from{transform:translate(0px,0px) ;}
to{transform:translate(20px,20px);}
}
@keyframes kl5
{
0%,75%{transform:translate(0px,-250px) ;}
85%,100%{transform:translate(0px,50px);}
}
@keyframes kl5_1
{
0%,85%{transform:rotateZ(-50deg) translate(-200px,0px);opacity:0;}
100%{transform:rotateZ(-30deg) translate(20px,0px);opacity:1;}
}
@keyframes kl5_2
{
0%,85%{transform:rotateZ(0deg) translate(0px,200px);opacity:0;}
100%{transform:rotateZ(30deg) translate(20px,0px);opacity:1;}
}
@keyframes kl5_3
{
0%,85%{transform:rotateZ(-18deg) translate(200px,0px) ;opacity:0;}
100%{transform:rotateZ(-18deg) translate(0px,0px) ;opacity:1;}
}
-->
文字文字文字文字
www.cnblogs.com/wingkun
title
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
素材
首先去网易炉石官网找到了这些素材：
HTML/JS
那么开始编码第一步，先建好上下前后左右六个面，这里左右两面不需要展示，可以不写
<div id="divOuter" class="ts">
<!-- 前 -->
<div class="o1">
<div class="logo"></div>
<div class="up"></div>
<div class="o1_ct">
<span>标题标题标题标题标题</span><br/>
<span>文字文字文字文字</span><br/>
<span style="font-size:20px;">www.cnblogs.com/wingkun</span>
</div>
<div class="up down"></div>
<div class="o1_menu">
<div class="d1">文字111</div>
<div class="d2">文字222</div>
</div>
</div>
<!-- 下 -->
<div class="o2">
<div class="o2_ct">
<ul>
<li class="o2_1"></li>
<li class="o2_2"></li>
<li class="o2_3"></li>
<li class="o2_4"></li>
</ul>
</div>
</div>
<!-- 后 -->
<div class="o3">
<div class="o3_tx">
<h1>title</h1>
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</div>
<!-- 上 -->
<div class="o4">
<div class="o4_r"></div>
<br/>
<div class="o4_ct">
<div class="o4_p"></div>
<div class="o4_p"></div>
<div class="o4_p"></div>
</div>
</div> <!-- 左 -->
<div class="o5">左</div>
<!-- 右 -->
<div class="o6">右</div> </div>
由于没有js权限，上面的例子是纯css的效果，固定的大小和翻转透视，
实际应用中应该用js根据设备分辨率来初始化大小，并且控制手指滑动来翻转，
使用了zepto，只是习惯了，这里不用也可以，改成原生js一样
如下：
$(function(){
var m={m:$("#divOuter"),startY:0,rx:0,width:$("body").width(),height:$("body").height() ,init:function(){
this.m.parent().css("-webkit-perspective",this.height/2);
this.m.css("-webkit-transform","translateZ(-"+ this.height/2+"px)");
this.m.children().eq(0).css({"-webkit-transform":"translateZ("+this.height/2+"px)",width:this.width,height:this.height })
this.m.children().eq(1).css({"-webkit-transform":"rotateX(-90deg) translateZ("+this.height/2+"px)",width:this.width,height:this.height })
this.m.children().eq(2).css({"-webkit-transform":"rotateX(180deg) translateZ("+this.height/2+"px)",width:this.width,height:this.height })
this.m.children().eq(3).css({"-webkit-transform":"rotateX(90deg) translateZ("+this.height/2+"px)",width:this.width,height:this.height })
this.m.children().eq(4).css({"-webkit-transform":"rotateY(-90deg) translateZ("+this.width/2+"px)",width:this.width,height:this.height })
this.m.children().eq(5).css({"-webkit-transform":"rotateY(90deg) translateZ("+this.width/2+"px)",width:this.width,height:this.height })
var _this = this;
$("body").on("touchstart",function(e){
var et = e.touches[0];
_this.startY = et.pageY;
}).on("touchmove",function(e){
}).on("touchend",function(e){
var et = e.changedTouches[0];
if(Math.abs(et.pageY-_this.startY)<10) return;
var t = et.pageY-_this.startY >0?1:-1;
_this.m.css( { "-webkit-transform":"translateZ(-"+_this.height/2+"px) rotateX("+ -( _this.rx += t*90)+"deg)"});
});
}};
m.init();
});
CSS/动画
然后，开始分别写每一页的动画效果，这里我只是堆了一些简单的动画，
效果有点拙计。。。具体的动画按需都可以再修改
动画比较多，请展开，这里只加了-webkit前缀，下面源代码下载里面写了两个前缀
如下：
body{text-align:center;margin:0px;padding:0px;font-size:12px;}
.ts{-webkit-transition:1s ease-in-out;}
#divOuter{width:100%;height:100%;position:relative;-webkit-transform-style:preserve-3d;}
#divOuter>div{position:absolute;top:0px;left:0px; overflow:hidden;}
.o1{background:url(images/hs1.png) 50% 50% no-repeat;background-size:100% 100%;}
.o1_menu{position:absolute;bottom:0px;margin-bottom:20px;width:100%;}
.o1_menu>div{;width:120px;height:32px;margin:0 auto 10px auto;line-height:32px;color:#fff;}
.o1_menu .d1{background:url(images/icons_01.png) -44px -180px no-repeat;}
.o1_menu .d2{background:url(images/icons_01.png) -44px -232px no-repeat;color:#000;}
.o1_ct{margin:30px auto;}
.o1_ct span{font-size:25px;/*background-image:-webkit-gradient(linear,0 0,0 bottom,from(#FFE20D),to(#EE9800));
-webkit-background-clip: text;-webkit-text-fill-color: transparent;*/color:#E7BD19;font-weight:bold;text-shadow:1px 1px 3px #C8AE5E;}
.o1 .up{opacity:0.5;display:block;width:30px;height:30px;background:url(images/lc_tip.png) 50% 50% no-repeat;background-size:100% 100%;margin:10px auto;-webkit-animation:kl2 5s linear infinite;}
.o1 .down{opacity:0.5;display:block;width:30px;height:30px;background:url(images/lc_tip.png) 50% 50% no-repeat;background-size:100% 100%;margin:10px auto;-webkit-animation:kl3 5s linear infinite;-webkit-transform:rotateZ(180deg);}
.logo{width:210px;height:80px;margin:0 auto;background:url(images/logo.png) 50% 50% no-repeat;
background-size:100% 100%;margin-top:20px;-webkit-animation:kl 2s linear infinite alternate;}
.o2{background:url(images/hs2.png) 50% 50% no-repeat;background-size:100% 100%;position:relative;}
.o2_ct{width:137px;height:134px;background:url(images/hs_m.png);position:absolute;left:0px;top:0px;right:0px;bottom:0px;margin:auto;}
.o2 ul{position:relative;}
.o2 li{position:absolute;list-style:none;top:;left:;background:url(images/icons_01.png) no-repeat;width:30px;height:30px;}
.o2_ct .o2_1{background-position:-3px -5px;top:-30px;left:50px;-webkit-animation:kl4_1 4s linear infinite alternate; }
.o2_ct .o2_2{background-position:-3px -43px;top:56px; left:138px;-webkit-animation:kl4_2 4s infinite alternate;}
.o2_ct .o2_3{background-position:-3px -81px;top:56px;left:-30px;-webkit-animation:kl4_3 4s ease-in infinite alternate;}
.o2_ct .o2_4{background-position:-3px -119px;top:134px;left:53px;-webkit-animation:kl4_4 4s ease-out infinite alternate; }
.o3{background:url(images/hs3.png) 50% 50% no-repeat;background-size:100% 100%;}
.o3_tx{border-width: 7px;-webkit-border-image: url(images/border_01.png) 7 repeat;margin: 20 auto;width: 200px;
height: 300px;background-image: -webkit-gradient(radial,10% 20%,0,50% 20%,200,from(rgb(253, 239, 194)),to(rgb(234, 220, 185)));
box-shadow: inset 0px 0px 65px -16px #000;padding: 10px;line-height: 20px;color: rgb(103, 79, 1);
}
.o3_tx h1{font-height:20px; padding:10px 0px 10px 0px; }
.o4{background:url(images/hs4.png) 50% 50% no-repeat;background-size:100% 100%;text-align:center;}
.o4_r{width:200px;height:250px;background:url(images/robot.png) no-repeat;background-size:100% 100%;-webkit-transform:translate(0,-250px);-webkit-animation:kl5 4s infinite;display:inline-block; }
.o4_ct{display:inline-block; margin-top:50px;}
.o4_p{width:100px;height:150px;background:url(images/cardback.png) no-repeat;background-size:100% 100%;float:left;}
.o4_ct>div:nth-child(1){-webkit-transform: rotateZ(-30deg) translate(20px,0px);opacity:;-webkit-animation:kl5_1 4s infinite;}
.o4_ct>div:nth-child(2){-webkit-transform: rotateZ(30deg) translate(20px,0px);opacity:;-webkit-animation:kl5_2 4s infinite;}
.o4_ct>div:nth-child(3){-webkit-transform: rotateZ(-18deg);opacity:;-webkit-animation:kl5_3 4s infinite;}
/*animation*/
@-webkit-keyframes kout
{
0%,20%{-webkit-transform:translateZ(-240px) rotateX(0deg) ;}
25%,45%{-webkit-transform:translateZ(-240px) rotateX(90deg) ;}
50%,70%{-webkit-transform:translateZ(-240px) rotateX(180deg) ;}
75%,95%{-webkit-transform:translateZ(-240px) rotateX(270deg) ;}
100%{-webkit-transform:translateZ(-240px) rotateX(360deg) ;}
}
@-webkit-keyframes kl
{
from{-webkit-transform:scale(1.0) translate(0px,0px);}
to{-webkit-transform:scale(1.1) translate(2px,4px);}
}
@-webkit-keyframes kl2
{
from{-webkit-transform:translate(0px,20px);}
to{-webkit-transform:translate(0px,0px);}
}
@-webkit-keyframes kl3
{
from{-webkit-transform:translate(0px,0px) rotateZ(180deg);}
to{-webkit-transform:translate(0px,20px) rotateZ(180deg);}
}
@-webkit-keyframes kl4_1
{
from{-webkit-transform:translate(0px,-10px) ;}
to{-webkit-transform:translate(-15px,-20px);}
}
@-webkit-keyframes kl4_2
{
from{-webkit-transform:translate(0px,-5px) ;}
to{-webkit-transform:translate(20px,-20px);}
}
@-webkit-keyframes kl4_3
{
from{-webkit-transform:translate(-10px,10px) ;}
to{-webkit-transform:translate(-20px,20px);}
}
@-webkit-keyframes kl4_4
{
from{-webkit-transform:translate(0px,0px) ;}
to{-webkit-transform:translate(20px,20px);}
}
@-webkit-keyframes kl5
{
0%{-webkit-transform:translate(0px,-250px) ;}
50%,99%{-webkit-transform:translate(0px,50px);}
}
@-webkit-keyframes kl5_1
{
0%,50%{-webkit-transform:rotateZ(-50deg) translate(-200px,0px);opacity:;}
100%{-webkit-transform:rotateZ(-30deg) translate(20px,0px);opacity:;}
}
@-webkit-keyframes kl5_2
{
0%,50%{-webkit-transform:rotateZ(0deg) translate(0px,200px);opacity:;}
100%{-webkit-transform:rotateZ(30deg) translate(20px,0px);opacity:;}
}
@-webkit-keyframes kl5_3
{
0%,50%{-webkit-transform:rotateZ(-18deg) translate(200px,0px) ;opacity:;}
100%{-webkit-transform:rotateZ(-18deg) translate(0px,0px) ;opacity:;}
}
结语/下载
最终没有帮上朋友的忙，所以代码也没有继续完善了
但还是希望能给大家一个思路吧。
如有纰漏还请见谅哟~
有问题也可以在下面讨论，感谢大家[推荐]一下！
纯css版和js的都在压缩文件里面，js的里面只带了-webkit前缀，注意啦。
源代码下载在 这里
[原创]webapp/css3实战，制作一个《炉石传说》宣传页的更多相关文章
- Android学习笔记（十二）——实战：制作一个聊天界面
//此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! 运用简单的布局知识,我们可以来尝试制作一个聊天界面. 一.制作 Nine-Patch 图片 : Nine-Pa ...
- 炉石传说 C# 开发笔记
最近在大连的同事强力推荐我玩 炉石传说,一个卡牌游戏.加上五一放一个很长很长的假期,为了磨练自己,决定尝试开发一个C#的炉石传说. 这件事情有人已经干过了,开发了一个网页版的炉石,但是貌似不能玩... ...
- 《炉石传说》建筑设计欣赏(6)：卡&在执行数据时，组织能力
上一篇文章我们看到了<炉石传说>核心存储卡的数据,今天,我们不断探索卡&身手. 基本的类 通过之前的分析,卡牌&技能涉及到几个类体系:Entity.Actor.Card.S ...
- CCF CSP 201609-3 炉石传说
CCF计算机职业资格认证考试题解系列文章为meelo原创,请务必以链接形式注明本文地址 CCF CSP 201609-3 炉石传说 问题描述 <炉石传说:魔兽英雄传>(Hearthston ...
- 炉石传说 C# 开发笔记(6月底小结)
炉石传说的开发,已经有30个工作日了. 关于法术的定义方法,有过一次重大的变更:法术效果是整个炉石的核心,正是因为丰富的法术效果,才造就了炉石的可玩性. 原来构思的时候,对于法术效果没有充分的理解,所 ...
- 炉石传说 C# 开发笔记 （源代码整理公开）
源代码已经整理过了,去除了不需要的项目. 注意:以前文章中出现过的Git已经变更过了,请以前关注过,Fork过的朋友,重新Fork一下. GitHub地址 卡牌XML文件的做成:(Git上面是没有XM ...
- 炉石传说 C# 开发笔记 （续）
炉石传说山寨的工作一直在进行着,在开发过程中深深体会到,对于业务的理解和整个程序的架构的整理远比开发难得多. 在开发过程中,如果你的模型不合理,不准确,很有可能造成代码的混乱,冗余,难以维护和扩展性比 ...
- 太可爱了！CSS3 & SVG 制作的米老鼠钟表
米老鼠是大家非常熟悉的迪斯尼动画形象.这是一个可爱的效果,结合 CSS & SVG 图形实现的米老鼠钟表效果.Web 技术让很多生活中的事物都能搬到网上去,后面的推荐阅读也有很多的效果,感兴趣 ...
- 《css3实战》读书笔记 第一章 基于CSS需求而编写的HTML.
笔记说明 <CSS3实战手册第3版(影印版)>可以消除Web设计工作的痛苦,并且带给你:HTML--重新入门.如果你是HTML新手,你会学到如何以CSS友好的方式进行基本页面构造.若你是H ...
随机推荐
- 杂项之使用qq邮箱发送邮件
杂项之使用qq邮箱发送邮件 本节内容 特殊设置 测试代码 1. 特殊设置 之前QQ邮箱直接可以通过smtp协议发送邮件,不需要进行一些特殊的设置,但是最近使用QQ邮箱测试的时候发现以前使用的办法无法奏 ...
- [LeetCode] Decode String 解码字符串
Given an encoded string, return it's decoded string. The encoding rule is: k[encoded_string], where ...
- [LeetCode] Palindrome Number 验证回文数字
Determine whether an integer is a palindrome. Do this without extra space. click to show spoilers. S ...
- How to remove null value in json string
Hi I'm using the below class Public List<string> name; Public List<string> midname; Once ...
- Python学习--Python简介
Python 简介 Python是一种解释型.编译性.面向对象.动态数据类型的高级程序设计语言.Python由Guido van Rossum于1989年底发明,第一个公开发行版发行于1991年. P ...
- canvas钟表
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- from表单提交数组
页面代码: function submitForm(){ var categoryArray = new Array(); var $ss = $("select[name=industry ...
- jQuery 邮箱下拉列表自动补全
综述 我想大家一定见到过,在某个网站填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮你自动补全邮箱的功能.现在我们就用jQuery来实现一下. 博主原创代码,如有代码写的不完善的地方还望大家多 ...
- Theano conv2d的border_mode
文档是这么写的: border_mode: str, int or tuple of two int Either of the following: ``'valid'``: apply filte ...
- matlab中pcolorh函数作用
就是说X,Y是用来定位的,C是用来填充颜色的.参数C要求至少是一个矩阵,而参数X,Y可以是向量,也可以是矩阵.当X,Y是向量时,X与C的行对应,Y与C的列对应,因此向量X与Y的维数必须要求与C的行与列 ...