制作在线简历(一)——Loading与底部菜单

  1. 云栖社区>
  2. 博客>
  3. 正文

制作在线简历(一)——Loading与底部菜单

技术小胖子 2018-03-24 21:36:24 浏览2369
展开阅读全文

想装逼下搞个在线简历,然后顺便用些CSS3与HTML5的一些技术,再顺带把响应式也加上去去,在移动端也能看到。

不过我的配色low了点,还望见谅......

一、首页Loading效果

这次就打算把几个功能全部写在一起展示啦,这样就得有个Loading页面,先把该载入的都载入进来。不然的话,代码没载入进来,这效果都看不到的,体验会很差。

前面写过一篇制作Loading效果的文章《多种方法实现Loading(加载)动画效果》,这次挑Sonic.js来实现下。

 

1、选了个我感觉比较酷的Loading样式:

 

2、然后想来个背景色,全屏的那种,我用了个position绝对定位来做。

.loading{
    background:#00BFF3;
    height:100%;
    text-align:center;
    position: absolute;
    top: 0;
    width: 100%;
}

 

 

3、在屏幕中间加个框,里面再加点阴影进来,暂时先把底色去掉

这里涉及到了多层阴影,box-shadow中有多个阴影设置,可以在线调试阴影效果第一个可以做多层调试。

也可以在这里调试,不过就是第二个那里调试的话不能做出多层的效果。

.loading .shadow{
    margin: 100px auto 0;
    background: #fff;
    width: 70%;
    padding: 20px 0;
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
          -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            -o-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 40px rgba(0, 0, 0, 0.1) inset;
           -ms-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 40px rgba(0, 0, 0, 0.1) inset;
}

接下来我想在底部与两边做点阴影加深操作,这里会使用到伪类:after,:before。z-index是让两个伪类的效果被盖在下面,而top、bottom等是为了控制阴影的位置,如果将z-index的值加大点就会看到两个伪类的效果是一个长方形。这里为了能将阴影显示出来,我得修改下.loading的样式,添加z-index属性,修改背景颜色其他属性不变。

.loading .shadow:before, .loading .shadow:after{
    content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -o-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -ms-box-shadow::0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10%;
    bottom:0;
    left:10px;
    right:10px;
}
.loading{
    background:#F6FFD1;
    z-index:-2;
}

 

4、添加一个隐藏loading页面的脚本,loading页面在DOM绑定,图片载入后就不需要显示了。

window.onload = function() {
    //隐藏loading页面
    $('#loading_container').animate({translateY:'-100%'}, 1000,'linear');
};

我以前也做过一些CSS3动画的记录,可以在《CSS3中的动画效果记录》查看到。

二、底部菜单栏

1、以往的菜单栏布局不是用float就是用display:inline,这次我想试试用flex布局,可以快速的布局在一列,下图是部分菜单

.nav_container .flex{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
}

 

2、接着我想在选中的那栏加一个三角形,以前写小三角非常复杂,有的方法是多写一个div然后绝对定位,或者是用图片等。现在有了after伪类,可以很方便的做三角形效果,注意下面的border,然后只要修改border-bottom-color就可以改变三角形的方向。

.nav_container .flex > a.cur:after{
    bottom: 100%;
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #821134;
    border-width: 1.2em;
    left: 50%;
    margin-left: -1.2rem;
}

 

3、添加选中特效,本来使用的click,但是在手机上面使用click是有300ms延时的。有多种解决方案,有一种是用插件fastclick,来解决那300ms延时,但是我这里都已经引用了zepto中的touch文件,所以就不想再引入额外的脚本。

我就用一串正则来判断是否是手机访问,是的话就用tap事件,不是的话就用click。这串正则的健壮性还不得而知,是在网上看到的,点击可以查看

var event = 'click';
// device detection
if(/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase())) {
        event = 'tap';
}
$('#nav').delegate('a', event, function() {
        $(this).addClass('cur').siblings().removeClass('cur');
        var row = $(this).index();
        $('#menu').children().hide().eq(row).show().css('opacity', 0).animate({opacity:'1'}, 1000, 'ease-in-out', function() {
            if(row != 3) return;
            
            $.each(pieids, function(index, item) {
                if(pies.length <= index) {
                    var pie = draw_pie(piedatas[index], item);
                    pies.push(pie);
                }
            });
        });
        return false;
});

 

源码下载:

http://download.csdn.net/detail/loneleaf1/8849069


    本文转自 咖啡机(K.F.J)   博客园博客,原文链接:http://www.cnblogs.com/strick/p/4578893.html,如需转载请自行联系原作者


网友评论

登录后评论
0/500
评论
技术小胖子
+ 关注