一. 2d
1.过渡效果transition!!!
1.过渡是属性值的变化,是从默认状态到结束状态之间一个变化的过程,过渡需要触发条件,(通常过渡都是添加默认状态,谁做过渡给谁加)
2.transiton:
要过渡得属性 花费时间S 运动曲线ease linear 何时开始
3.transition:width 1s,height 1s 1s;
这个让高度等1S,
如果用Hover 给定位,那么会一直抖动,因为 是honver得话,只是经过 你过了就没了.
简写:transition: all 1s;
如何让消失渐渐消失?
用display:none; 不能渐渐消失,因为是英文单词得变化.
如果是background-color:rgba(0,0,0,0) 只是让盒子透明,但是里面得内容不会消失
这个时候可以给opacity:0
取值0-1之间得小数,0是内容和盒子完全透明,1 不透明.
改了透明 这个盒子还在,还占位置,还要通过js判断.
1.2. transform2d平移(位移)
1.只写一个值,代表x轴,水平方向,正值向右,负值向左
2.写2个值,第一个水平方向,第二个值是垂直方向,正值向下,负值向上
3.百分比:唯一参考的是自身的百分比距离
transform:translate(-200px)
transform:translate(100px,100px)
transform:translate(10%,10%)
1.3. transform:translate(-50%,-50%)居中
1.需要配合定位
2.transform:translate(-50%,-50%),
两个方向都是走自身的5-%,参考的是自己的宽高
3.好处就是不需要计算了,之前的定位margin需要计算父元素的一半很麻烦
.son,
.sunzi {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
1.4. transform:rotate(60deg)旋转rotate
.box:hover {
transform: rotate(90deg);
}
1.5. transform-origin:(x y)旋转基准点
数值用空格 ,隔开.
1.可以给方位值:left,right,center,top ,bottom
随意混合使用(left center),(right center)
2.可以写具体的值:50px 100px;
transform-origin:20px 20px;
第一个值是x轴距离,第二个是y轴距离
如果是负值,那就是反方向,旋转基准点会出了盒子的范围
1.6. transform:scale(2)缩放
transform:scale(2),
大于1就是放大,0-1就是缩小
只写一个值,宽高等比例缩放
写两个值,第一个是宽度缩放的倍数,第二个是高度缩放倍数
1.7. 进度条案例
.box {
width: 300px;
height: 20px;
border: 1px solid #333;
}
.box1 {
width: 0;
height: 100%;
transition: all 1s;
}
.box:hover .box1 {
width: 70%;
background-color: red;
}
1.8 scale解决移动端1px细线问题
w:200px;
h:200px;
border:1px solid #ccc;
transform:scale(0.5)
transform:scale(0.5):
让边框变细,这个时候2倍图的这个盒子大小不要除以2了,
不然你先2倍图除以2 ,然后又缩放0.5倍.这样不行
1.9 scale解决谷歌浏览器12px字体大小问题
1.我们都知道最小字体是12px,那我们想让字体缩小可以用scale
2.transform:sclae(0.5)
但是这样会让整个盒子缩小,因此我们需要把文字单独用span包起来,注意所有的transform属性对行内元素无效!所以需要转换inline-block.
1.91 转换连写
注意:顺序不能更换,因为浏览器是按照前后排列顺序来解析的
ransform: translate(700px, 0) rotate(900deg) scale(1.2);
皮球滚动案例:
.father {
width: 1000px;
height: 1000px;
background-color: gray;
}
.son {
width: 0;
height: 0;
border-width: 40px;
border-style: solid;
border-color: skyblue pink yellowgreen royalblue;
border-radius: 50%;
transition: all 2s;
transform-origin: bottom right;
}
.father:hover .son {
transform: translate(700px, 0) rotate(900deg) scale(1.2);
}
2. 3d
2.1 3d位移
1.一定要下先给透视,才能生效
body {
perspective: 800px;
}
.box {
width: 200px;
height: 200px;
background-color: pink;
margin-left: 300px;
margin-top: 100px;
transition: all 1s;
}
.box:hover {
transform: translate3d(100px, 100px, 200px);
}
2.1 3d旋转
.father {
overflow: hidden;
perspective: 600px;
width: 1000px;
height: 1000px;
background-color: gray;
}
.box {
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: pink yellowgreen skyblue yellow;
margin-top: 100px;
margin-left: 100px;
transition: all 3s;
}
.father:hover .box {
transform: rotateX(60deg);
transform: rotateY(60deg);
transform: rotateZ(60deg);
}
3.动画
3.1过渡动画和动画的区别
1.transition
过渡动画:需要触发条件,只能播放一次
2.animation
动画,不需要触发条件,页面打开就能播放,可以循环播放
3.2.动画
@keyframes name{
from
}