开发者社区> 技术小胖子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

制作在线简历(三)——技能介绍

简介:
+关注继续查看

一、结构

 

结构还是很朴素的,星星是在font-awsome选的一符号,整个结构又是用一张table表格来搭的,选了两种底色作为顶部和左边的底色。

这里由于使用了自定义字体,就碰到了个问题,就是当点到这张星星页面的时候,字体还没加载进来,这个时候星星的位置要么是乱码要么是没有的,后面就去找了个解决方法,使用webfont loader,在字体加载成功的回调函数中再应用相应的font-family的CSS样式。

        <script src="js/webfontloader.js"></script>
        <script>
          WebFont.load({
            custom: {
              families: ['FontAwesome']
            }
          });
        </script>

 

对table的操作也做过记录,可以在《关于table的一些记录》查看到。

最左边的一栏还用了一些伪类选择符:first-child。

<table class="user_skill">
                    <thead>
                        <tr>
                            <th></th>
                            <th><h6>初学</h6></th>
                            <th><h6>熟悉</h6></th>
                            <th><h6>掌握</h6></th>
                            <th><h6>擅长</h6></th>
                            <th><h6>精通</h6></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><h5>HTML</h5></td>
                            <td><i class="fa-star"></i></td>
                            <td><i class="fa-star"></i></td>
                            <td><i class="fa-star"></i></td>
                            <td><i class="fa-star"></i></td>
                            <td><i class="fa-star"></i></td>
                        </tr>
                        <tr>
                            <td><h5>CSS</h5></td>
                            <td><i class="fa-star"></i></td>
                            <td><i class="fa-star"></i></td>
                            <td><i class="fa-star"></i></td>
                            <td></td>
                            <td></td>
                        </tr>
    </tbody>
</table>
.user_skill tbody tr td:first-child{
    text-align:right;
    margin-right:5px;
}
.user_skill tbody tr td:first-child h5{
    background:#f26d7d;
    display:inline-block;
    padding:5px;
}

 

二、星星的动画

当刚进入画面的时候,这些星星是有个效果的。这个动画我是从animate.css中选了一个,叫做lightSpeedIn。直接将CSS复制过来的时候死活动不了,后面发现我少写了一个参数animation-duration。而CSS中的transition属性是当划过某行的时候,设置的过渡效果。

.user_skill tbody tr td i{
    font-size:2rem;
    
    -webkit-animation-name: lightSpeedIn;
    -webkit-animation-duration:1s;
    -webkit-animation-timing-function: ease-out;

    animation-name: lightSpeedIn;
    animation-duration:1s;
    animation-timing-function: ease-out;
    
    -moz-transition:all .4s ease;
      -o-transition:all .4s ease;
 -webkit-transition:all .4s ease;
         transition:all .4s ease;
}
@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

 

三、划过某行的效果

当让鼠标划过某行的时候,我会让星星旋转180°,并放大1.5倍,颜色变红。transform可以将多个属性写在一起。

.user_skill tbody tr:hover i{
    -webkit-transform: rotate(180deg) scale(1.5);
    -moz-transform: rotate(180deg) scale(1.5);
    -o-transform: rotate(180deg) scale(1.5);
    -ms-transform: rotate(180deg) scale(1.5);
    transform: rotate(180deg) scale(1.5);
    color:#f26d7d;
}

 

 

源码下载:

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



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



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
零编码制作报表真地可能吗?
很多报表工具都把零编码作为宣传口号,这是真的吗,真的能减少到零吗,真有那么神吗?
27 0
linux自动清理Docker标准输出日志
使用docker logs 查看容器日志太多,非常不方便,每次手动清理很麻烦,写了一个批量清理的shell脚本
40 0
C#编程-139:制作自己的浏览器
C#编程-139:制作自己的浏览器
32 0
Docker 镜像制作
Docker 镜像制作主要有两种方式 Dockerfile 和 快速制作方式。本文将为大家介绍如何通过这两种方式制作镜像。
2784 0
Docker 1.7.0 更新日志
本文讲的是Docker 1.7.0 更新日志,【编者的话】Docker发布了1.7.0版本,此次版本添加了诸多flags,也为新的特性重构了网络栈、Volumes代码以及内部引擎,本文介绍了此次版本中具体的变更。
903 0
在线制作h5——上帝的礼物
在线制作h5 网址:http://www.godgiftgame.com 网站名称:上帝的礼物 推荐指数:5颗星   功能概要 可以设置背景、元素图片、元素文字、元素图形、声音、加载、链接、分享,生成h5,有二维码和链接两种形式,可以分享到新浪微博、腾讯微博、qq空间、Facebook、Twitter。
1101 0
玩转Linux之- CentOS 7.0,启用iptables防火墙
原文 玩转Linux之- CentOS 7.0,启用iptables防火墙 CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙。1、关闭firewall:systemctl stop firewalld.
950 0
五个问题的简短回复【调试、求职疑虑、编程能力提高、做题】
  今天到实验室的时间较平时要早。先看博客,昨夜今晨,找我的还真不少。一条评论,需要核实并回复。再发现有四封私信,这是个挑战。近日自己安排的事,已经紧张了,找到最简的方式回复吧。 【一条评论】(有读者按《CodeBlocks调试功能快捷教程》走,发现走不下去。核实,意识到可能是Code::Blocks中的一个Bug。)   初学C++,我敲教材上比较复杂的代码,能成功调试,碰到输入,它会等你
1780 0
21114
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载