我的名字:“周元俊” 程序猿/80后/轻生活/轻日记/轻梦想 ======QQ:772892349======
© 优特良品&优特建站出品 | Powered by YOUTIY
苏ICP备13018047号
html个人网页制作源代码
TAGS: 网页设计

一、概要

网页主题名称:【周末·君的简历】
版本: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

周元俊
2018-02-27 08:48:38
留下你的脚印吧
标签云
网页设计 精致慢生活 感悟思语 我的旧年华
我的微信