1,transition是过度效果,一般是和hover一起用,transition的属性有height,width常用属性,在hover里面就是会覆盖原来的属性,属性由逗号间隔,各个属性之间没有先后关系,-webkit-transition: width 2s ease-in,height 2s, -webkit-transition: 2s width ease-in,height 2s, 都是正确的,有一点需要注意的是,延迟发生,width 1s 20s 延迟的20s会在过度时间的后面。
- example1 {
- position: absolute;
- bottom: 10px;
- margin:auto;
- background-color: #00B83F;
- height: 200px;
- width: 200px;
- overflow: hidden;
- -webkit-transition: width 2s ease-in,height 2s,-webkit-transform 2s; }
- example1:hover {
- width: 300px;
- height: 300px;
- -webkit-transform: rotate(180deg);
- }```
2,tranform:translate(X,Y), 让元素偏离原来位置。单位默认是像素。
transform:scale(X,Y) 让元素变为原来的多少倍。
p:hover {animation: 1s rainbow 3;} 要用@keyframe 定义一个动画名称,就是一个函数。
这些都是CSS3的属性,transform还可以当作一个函数用在transition里面。
定义动画的函数里面可以有位置的改变。
- 0% {background: red; left:0px; top:0px;}
- 25% {background: yellow; left:200px; top:0px;}
动画和transiton交叉使用,在动画的大背景之下,在动画的各个时间点设置transform ,在基元素上面设置transition,只要动画变化过程中有属性和基元素不一致,都会触发到transition。
- p
- {
- width:100px;
- height:100px;
- background:red;
- position:relative;
- animation:myfirst 5s;
- -webkit-animation:myfirst 5s; /* Safari and Chrome */
- -webkit-transition : width 2s ,-webkit-transform 2s
- }
- @keyframes myfirst
- {
- 0% {background:red; left:0px; top:0px;}
- 25% {background:yellow; left:200px; top:0px; -webkit-transform :rotate(192deg);width : 200px}
- 50% {background:blue; left:200px; top:200px;}
- 75% {background:green; left:0px; top:200px;}
- 100% {background:red; left:0px; top:0px;}
- }
动画属性里面,alternate infinite alternate 要在infinite使用的前提下才生效。
3,column-count 是指定元素被分割的列数,带有rule的,是指两列之间边框的样式,可以用一个column-rule :px(多宽) solid(之间的样式) #FFFF(颜色) 。column-gap是两列之间的距离。-span 指出元素可以跨多列,不够位置就换行显示。
4,响应式布局 @media only screen and (max-width :800px) 在屏幕小于800px的时候启动另外一种布局。(这里的screen可以是print等其他设备,only | not)
固定盒子的大小,无论怎么改变边距都不影响 box-sizing: border-box; 宽度还是50%而不是50% *px 会并行显示。
5 对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}
6,
使用于移动端,不适用的话,默认移动端的
浏览器的宽度会大于浏览器的宽度。
来源: http://www.2cto.com/kf/201708/671469.html