一、概要

网页主题名称：【周末·君的简历】
版本：v1.0
作者：周末
发布日期：2018/01/03

二、网页截图

三、模板介绍

       该模板为纯html5模板，主题为周末·君的简历，此模板采用蓝色为主色，不包含任何服务器端code，只包含index.html一个页面，PC端和手持端自适应，即响应式布局，网页的目录结构为：css、images、fonts和js，网页采用div+css布局， h5标签开发和扁平化设计。

四、目录结构

五、浏览器兼容

六、关键代码解析

1、引入外部字体
@font-face {
font-family:'zhouyj';src:url("../fonts/zhouyj.TTF")
}
* {
margin: 0;
padding: 0;
font-family: 'zhouyj';
font-weight: normal
}


2、导航栏鼠标悬浮显示下横线
.nav_bar ul li a:after {
width: 0;
height: 3px;
content: "";
position: absolute;
left: 0;
bottom: 10px;
background: #80d6f2;
transition: width .5s ease-in;
-moz-transition: width .5s ease-in;
-webkit-transition: width .5s ease-in;
-o-transition: width .5s ease-in
}

.nav_bar ul li a:hover:after {
width: 100%
}

3、实现div居中
.cen_con {
width: 50%;
height: 60%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
text-align: center;
overflow: hidden
}


4、相关解释
$、animation
animation: 1s to_width ease-in 0s 1;
在1s时间内到关键帧指定的宽度（to_width是关键帧），动画是以低速开始，延迟0s执行动画，重复执行1次

注意：1s和to_width谁先谁后是没有关系的，即animation: to_width 1s ease-in 0s 1;也是可以的

$、（zhishi1是关键帧）
animation: zhishi1 0.4s linear 0s infinite alternate;
规定需要绑定到选择器的 keyframe 名称。
规定完成动画所花费的时间，以秒或毫秒计。
规定动画的速度曲线。
规定在动画开始之前的延迟。
规定动画应该播放的次数。(注：infinite 无限次重复)
规定是否应该轮流反向播放动画。（注：alternate 动画应该轮流反向播放）

$、当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
animation-fill-mode: forwards;

$、缩放
scale(1.6)

$、nth-child(n) 
选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

七、写在最后

本文由周元俊博客原创出品，如需转载请注明出处

本文出处：http://www.youtiy.com/detail_361.html

获取下载地址请关注 youtiyblog 微信公众号，点击【网页设计】菜单即可