常见方法:
- transition:1s(过渡的动画效果):从一个人具体的值到另一个过渡的值
- transform:rotate(300deg) xy 旋转 transform:rotageX(300deg) transform:rotageY(300deg)
- transform:scale(0.5,2) 缩放x轴,y轴 >1放大 <1缩小
- transform:translateX(100px) transform:translateY(100px)
- transform:translate(100px 100px)
- transition:rotate(300deg) scale(0.5,2) 一边缩放,一边旋转
- transition:transform 1s 指定对transform 起效果
- transition:margin 1s 指定对margin 起效果
- transition: 1s linear 匀速
- transition: 1s esae-in 匀加速
- transition: 1s ease-out 匀减速
定位
固定定位 fixed 参照物永远是浏览器
绝对定位 absolute 一定要有参照物
辅助属性:left right top bottom z-index
显示隐藏:
display:none;
display:block;
居中:
上下左右居中 left:0; right:0; top:0; bottom:0; margin:auto;
左右居中 left:0; right:0; margin:auto;
上下居中 top:0; bottom:0; margin:auto;
过渡动画
display:none ; diaplay:block; 无动画效果
height:0; overflow:hidden; height:200px; 存在动画效果
过渡动画 transition:1s
display:none display:block 无动画
height:0;overflow:hidden;transition:1s height:300px;
position:static/relative/absolute/fixed
static 不定位 === none
relative 相对定位 一般作为绝对定位的参照物 在网页当中占据位置
absolute 绝对定位 会飘出文档流 不占位置
fixed 固定定位 会飘出文档流 永远参照浏览器
参照物:给绝对定位提供一个坐标
参照物必须是祖先元素
参照物既可以是相对定位,也可以是其他任何定位
锚点:页面内的跳转
a href="#id值"
透明度
transparent
rgba()
opacity:0-1 filter:alpha(opacity=0-100)
display:none/block 无动画 不占位
opacity:0/1 可以支持动画 占位 可以摸到
visibility:hidden/visible 无动画 占位 但是摸不到