[原创]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

文字111

文字222

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:0;left:0;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:0;-webkit-animation:kl5_1 4s infinite;}
    .o4_ct>div:nth-child(2){-webkit-transform: rotateZ(30deg) translate(20px,0px);opacity:0;-webkit-animation:kl5_2 4s infinite;}
    .o4_ct>div:nth-child(3){-webkit-transform: rotateZ(-18deg);opacity:0;-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:0;}
        100%{-webkit-transform:rotateZ(-30deg) translate(20px,0px);opacity:1;}
    }

    @-webkit-keyframes kl5_2
    {
        0%,50%{-webkit-transform:rotateZ(0deg) translate(0px,200px);opacity:0;}
        100%{-webkit-transform:rotateZ(30deg) translate(20px,0px);opacity:1;}
    }

    @-webkit-keyframes kl5_3
    {
        0%,50%{-webkit-transform:rotateZ(-18deg) translate(200px,0px) ;opacity:0;}
        100%{-webkit-transform:rotateZ(-18deg) translate(0px,0px) ;opacity:1;}
    }

结语/下载

最终没有帮上朋友的忙，所以代码也没有继续完善了

但还是希望能给大家一个思路吧。

如有纰漏还请见谅哟~

有问题也可以在下面讨论，感谢大家[推荐]一下！

纯css版和js的都在压缩文件里面，js的里面只带了-webkit前缀，注意啦。

源代码下载在 这里

时间： 2024-10-03 19:12:59

[原创]webapp/css3实战，制作一个《炉石传说》宣传页的相关文章

关于炉石传说AI

一直想做一个炉石传说自动出牌AI,感谢yangyuan在GITHUB上分享的hearthrock(https://github.com/yangyuan/hearthrock),让我不至于毫无头绪.目前,hearthrock(近两年前的项目,作者已不更新)的ai部分代码已经基本读完,该AI智能程度较低,基本就是有什么牌出什么牌,基本达不到要求.苦思冥想之余下载了德国人制作的Hearthbuddy,意外发现程序文件夹中带有AI功能源码且是C#的!量很大,得慢慢吃.

使用CSS3 制作一个material-design 风格登录界面

使用CSS3 制作一个material-design 风格登录界面 心血来潮,想学学 material design 的设计风格,就尝试完成了一个登录页面制作. 这是整体效果. 感觉还不错吧,结尾会附上代码 在编写的过程中,没有使用任何图片或者字体图标,全部使用css3完成,还是遇到一些难点和bug,所以想笔记下来,以后方便查阅. 响应式设计 在这个页面中,使用下面3点来完成响应式设计 最大宽度 .设定了一个 max-width 的最大宽度,以便在大屏幕时兼容. margin : 20px au

web前端入门到实战：制作一个百度首页

一. 我们制作一个百度首页作为练习,可直接复制该代码保存后缀名为.html来查看 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>d93_baidu_home_exercise</title> <style> .header{ height: 250px; /*background-color

Android学习笔记（十二）——实战：制作一个聊天界面

//此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! 运用简单的布局知识,我们可以来尝试制作一个聊天界面. 一.制作 Nine-Patch 图片 : Nine-Patch图片是一种被特殊处理过的 png 图片,能够指定哪些区域可以被拉伸而哪些区域不可以.一般用来作为聊天信息的背景.在此我们先准备一张png图片.然后在 Android sdk 目录下有一个 tools 文件夹,在这个文件夹中找到 draw9patch.bat文件. 双击打开之后, 在导航栏点击 File→

CSS3实战开发: 弹性盒模型之响应式WEB界面设计

各位网友大家好,如果你已经阅读过我先前写的关于CSS3弹性盒模型的实例演示,相信你对CSS3弹性盒模型属性知识点应该已经有了一个非常深刻的映像. 从本篇文章开始,我将带领大家,手把手地教大家如何来开发一个适合移动端浏览器的弹性盒模型的响应式页面.同时实战开发中的案例代码可以作为你项目中的精简框架了. 当你学习完成<CSS3实战开发: 弹性盒模型之响应式WEB界面设计>这个系列教程之后,相信你对目前比较流行的前端轻量级框架 Bootstrap等会有一个深刻的认识. Bootstrap(弹性流体布

CSS3实战开发:手把手教你鼠标滑动特效开发

各位网友,如果你已经看过我的CSS3实战开发系列教程,我相信你对CSS3已经有了非常全面深刻的了解.有些人可能CSS3语法掌握了不少,但是真正实际用起来还有点生疏,甚至无从下手.请别担心,我会不断更新一系列实战开发案例,我会为大家分步骤剖析特效开发过程. 今天我将手把手带领大家开发一个鼠标滑动的特效案例,废话不多说,直接上效果动画: 你有没有觉得上面的这个特效很棒呢! 好,现在咱们就开始分步骤实战开发这个动画特效吧: 首先,我们先准备好html页面代码: <!DOCTYPE html> <

CSS3实战开发：百度新闻热搜词特效实战开发

各位网友,今天这篇文章,我将手把手带领大家开发百度新闻首页的"新闻热搜词"特效.在这个特效中应用的知识点都很基础,如果你对这些还不清楚,可以关注我以前写的详细教程.今天讲这个案例,也是希望告诉大家,在开发一个特效的时候,请不要将问题复杂化.可能有些人一开始真的不知道从哪下手,当你看完本次教程,你定会觉得,原来一切都这么简单. 可能有些人还不知道这个特效,啥也不说了,直接上效果图: 从上面的特效中,大家不难发现,当鼠标划过热搜词时,会有一个半透明的黑色背景滑上来,而且这个黑色区域中也是有

CSS3实战开发：手把手教大家搜索表单发光特效实战开发

各位网友,大家好,我是陌上花会开,今天这个案例,我将带领大家,手把手教大家开发一个会发光的表单组,还是先秀运行效果图吧: 从这个效果图,大家可以发现,当光标在某个组件上时,它就会发光,今天我将带领大家实战开发这个特效. PS: 大家可以直接将博客中的代码复制到本地便可得到同样的运行效果. 首先,我们先准备好html代码: <!doctype html> <html> <head> <meta charset="utf-8"><met

《炉石传说》建筑设计欣赏(6)：卡&amp;amp;在执行数据时，组织能力

上一篇文章我们看到了<炉石传说>核心存储卡的数据,今天,我们不断探索卡&身手. 基本的类 通过之前的分析,卡牌&技能涉及到几个类体系:Entity.Actor.Card.Spell,令人十分困惑,特别是前两者.在这里先略带武断的说一下这几个类的基本定位: Entity主要用来做网络数据同步用的: Actor主要处理client的渲染对象的控制,作为Component挂载在资源对象上: Spell是技能Prefab挂载的脚本. Card是卡牌Prefab挂载的脚本.在执行时处于中