截图
思路:
1、导航利用input radio来判断点击的元素
通过input:checked+a{}来为当前的元素添加样式
2、顶部的三角,利用正方形div,旋转45度,再隐藏部分
3、顶部的icon,下载表现形式为图行的字体,利用@font-face{}导入字体,相比图片减少网页加载
4、载入时的平滑移动效果,利用移改变包含5个section的div的Y轴坐标实现滑动
5、载入时字体内容的动画效果,利用animation实现
知识点
1、
font-smoothing:antialiased;(代码21)
功能:用于设置字体的光滑程度
参数:none(用于小像素的文本)
subpixel-antialiased(默认)
antialiased(反锯齿)
2、
@font-face{}(代码204)
功能:用于将自己定义的web字体嵌入到网页中
属性: youWebFontName 引入字体的名字;
source 相对(绝对)路径
format 字体格式,用来帮助浏览器识别
具体值 truetype (.ttf 格式)
opentype (.otf 格式)
truetype-aat (.woff 格式)
embedded-opentype( .eot 格式)
svg (.svg 格式)
兼容性:ie6不支持
字体下载:www.dafont.com,或www.google.com/webfonts
3、
backface-visibility:hidden;(代码119)
定义元素不面向屏幕时是否可见
参数: visible(可见)
hidden(不可见)
4、
transition的动画需要事件去触发(如鼠标经过、点击)(代码344)
animation的动画不需要触发事件就可发生
语法:
》定义动画名称
@keyframes animationName(为创建的动画名称){
规定某项css样式,就能创建由当前样式逐渐改为新的样式的动画效果
}
兼容性 ie10+,firefox,opera支持animation
safari ,chorme 支持 -webkit-animation
IE9-不支持
》执行动画
xx {animation: animationName duration timing-function delay iteration-count(播放次数)direction(方向);
}
name//自定义的动画名
duration//规定过渡需要的时间(单位s/ms)
timing-function//规定速度效果
1、ease:(逐渐变慢)默认值
2、linear:(匀速)
3、ease-in:(加速)
4、ease-out:(减速)
iteration-count//播放次数,默认一次, infinite表无限循环
Html代码