Java学习笔记---css动画

1.伪元素：
：hover，鼠标悬浮
：link
：active
：visited

2.对齐：
水平居中：text-align：left，center，right
垂直居中：line-height，height值相同。
行内元素：vertical-align：middle，top，bottom

3.盒子模型：
A：边缘线：
border：线粗 线样式 颜色；
1px
线样式：solide：实线，double：双实线，dashed：虚线，dotted：点状线

外边距：margin
元素和元素之间的距离，或者元素和父容器之间的距离
margin-top，margin-right，margin-bottom，margin-left

内边距：padding
从容器的角度，描述内容物距离边框的距离。
padding-top，padding-right，padding-bottom，padding-left

10px：上下左右
10px 20px：上下10，左右20
10px 20px 30px：上10，左右20，下30
10px 20px 30px 40px：

元素的宽度：
元素本身的宽度+margin-left+padding-left+border-left+margin-right+padding-right+border-right

元素的高度：

外边距的合并：
上：margin-bottom
下：margin-top

容器里，内容物
容器：margin-top，如果没有内容，也没有边框
内容物：margin-top

4.浮动：float：left，right
让元素脱离当前的文档流，在页面上不占位置。

清除浮动：clear：left，right，both

5.溢出：overflow
容器里内容物较多
overflow：hidden，多余的不显示，相当于隐藏
overflow：auto，自动添加滚动条。

6.定位：position
设置元素的位置。定位到哪里
static：默认的属性值。块级，垂直排列，行内，水平排列。
relative：相对定位。元素偏移某些距离。保存原来的位置。相对于自己的原始位置。
left：在原来的基础上，向右侧偏移一定的距离。
负数
top：在原来的基础上，向下偏移一定的距离。
负数
bottom，right

absolute：绝对定位。对于父容器(position-->body)。脱离文档流。在页面上不占空间。
left，top，bottom，right

fixed：固定位置。用法同Absolute，相对于浏览器。

本堂课内容：

html+CSS

JavaScript：
Java：
标识符，运算符，分支，循环。。
数组，日期，字符串。。。

背景图片：
background-image：url(图片路径)
background-repeat：no-repeat，repeatX，repeatY
background-position：center，top，bottom，left，right
background-size：背景图片大小

阴影效果：
box-shadow：[inset] x-offset y-offset blur-radius spread-radius color；
x-offset：正数：右侧，负数：左侧
y-offset：正数：下边，负数：上边
blur-radius：模糊的半径，数值越大，边缘越模糊
spread-radius：扩展半径
color：模糊的颜色

左，右，上，下

转换效果：
transform
3D：
perspective 规定 3D 元素的透视效果 。

rotate：旋转，角度degree
translate：平移
x：正数右移，负数左移
y：正数下移，负数上移

scale：缩放
1代表原始大小。小于1就是缩小，大于1就是放大

skew：倾斜，扭曲
角度

过度效果：
transition
关注元素属性：旧的值-->新的值
transition-propertiy：left，background-color；
transition-delay：延迟时间，默认0
transition-duration：持续时间，
transition-timing-function：时间曲线
ease：开始和结束慢，中间快
linear：匀速运动
ease-in：开始慢
ease-out：结束慢
ease-in-out：开始和结束慢

动画：
animation
animation-name：动画名称
animation-duration：动画持续时间
animation-timing-function：
animation-iteration-count：播放次数：1次，无限次infinite

@keyframes 动画名称{
from{}--->to{}

}

或者按照百分比：0%，20%，40%，60%，80%，100%