1.加载进度条
1.当在<div></div>
中嵌套使用<P></p>
或者<div></div>
等元素时,设定的嵌套的元素的高度即为外层元素高度;
2.学会对@-webkit-keyframes的使用:
a.-webkit-animation: html-css 2s ease-out;
b.
@-webkit-keyframes html-css {
0% {
width: 0px;
}
100% {
width: 90%;
}
}
2.文字覆盖图像
1.opacity的使用,用于覆盖的对象opacity: 0;
,覆盖时opacity: 1;
2.覆盖对象位置的固定position: absolute;
,同时top: 0; bottom: 0;left: 0; right: 0;
3.文字滑动覆盖图像(对文字所在对象),注意transition和几个位置的使用:
a.从上到下
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
overflow: hidden;
width: 100%;
height:0;
transition: .5s ease;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}
b.从下到上
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
c.从左至右
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.container:hover .overlay {
width: 100%;
}
d.从右至左
.overlay {
position: absolute;
bottom: 0;
left: 100%;
right: 0;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.container:hover .overlay {
width: 100%;
left: 0;
}
3.分页样式
1.设置边框半径使边框棱角变为椭圆border-radius:4px<!--(左上角)--> 10px<!--(右上角)--> 20px<!--(右下角)--> 30px<!--(左下角)-->;
,若只设置一个值,则表明四个角一个设置,同时还可以调整四个角的半径,使之变为圆形或者椭圆形;
2.阴影与阴影颜色box-shadow: 10px 8px 16px 16px rgba(0,0,0,9);
4.加载(动画效果)
5.开关样式
6.水平滚动菜单栏
1.规定需要滚动文本不进行换行:white-space: nowrap;
2.设置滚动:overflow: auto;
3.若设置垂直滚动,则只需在设定好文本大小后添加overflow-y: auto
;即可。
7.响应式登陆表单