精灵图
- 精灵图
下边的QQ。。微信就是一个精灵图。
代码格式如下:
`<style>
body{
background-color: #000000;
}
.box{
width: 40px;
height: 40px;
margin: 100px auto;
border: 1px solid;
/* background-color: red; */
background-image: url("../img/wb.png");
background-position: -392px -81px;
}
</style>`
background-position: -392px -81px;
这个位置就是这个精灵图的坐标位置。
过渡
功能:实现元素不同状态之间的平滑过渡。
之前:元素->hover状态 直接切换,从开始状态到结束状态,瞬间完成,中间过程几乎无法查看。
格式:
transition:过渡的属性 完成时间(s) 运动曲线 延迟时间
数值型的属性才可以设置过渡。( width,height,color,font-size)
transition-property 过渡属性:发生变化时,想要有过渡效果的属性。all,全属性。
transition-duration 完成时间:单位是s/ms。
transition-timing-function 运动曲线:
linear 匀速
ease 减速
ease-in 加速
ease-in-out 先加速后减速
transition-delay 延迟时间:单位是s 默认为0 过渡多久后生效。 从结束状态返回到开始状态时,也会生效。
代码样式如下:
<style>
.box{
width: 200px;
height: 200px;
background-color: rosybrown;
/* transition: all 2s ease-in 1s; */
transition-property: all;
transition-duration: 2s;
transition-timing-function: ease-in;
transition-delay: 1s;
}
.box:hover{
width: 800px;
background-color: royalblue;
}
</style>
3.2D转换缩放
格式:
transform:scale(水平方向的缩放倍数,垂直方向的缩放倍数)
取值:大于1表示放大,小于1缩小。
4.2D位移
格式:
transform:translate(水平偏移量,垂直偏移量)
参数:
正值:向右和向下 负值:反方向。
百分比。盒子本身的宽高*百分比
5.绝对定位居中
<style>
.father{
width: 600px;
height: 600px;
position: relative;
background-color: seagreen;
margin: 100px auto;
}
.son{
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
background-color: steelblue;
/* margin-left: -100px;
margin-top: -100px; */
transform: translate(-50%,-50%);
}
</style>
先设置绝对定位,然后transform:translate后跟数值或者百分比来进行定位。
6.倾斜
transform:skew(水平倾斜角度,垂直倾斜角度)
单位:deg 角度
正值:是往顺时针走,负值:是往逆时针走。
<style>
.box{
width: 484px;
height: 300px;
margin: 100px auto;
background: url("../img/zwz.jpg");
}
.box:hover{
transform: skew(0,10deg);
}
</style>
这个代码块,就是水平0度,垂直向下10度。
7.旋转
设置旋转的中心点
属性值:px 英文(left center right top bottom) 百分比
百分比是按照自身宽高*百分比计算的。
只写一个值,第二值默认为center。
<style>
.box{
width: 350px;
height: 350px;
margin: 100px auto;
background-image: url("../img/hb.png");
/* border-radius: 50%; */
transition: all 3s;
/*
*/
transform-origin: 10%;
}
.box:hover{
transform: rotate(45deg);
}
/* 让盒子进行旋转
格式:
transform: rotate(角度);
单位:deg 正值为顺时针,负值为逆时针。
transform 可以书写多个2D转换,中间用空格隔开。
当rotate和translate在一起的时候,注意书写顺序。
rotate在前,先旋转自身,再按照旋转的角度,进行位移。
translate在前,先进行位移,再旋转自身。
*/
8.3D转换/旋转
perspective: 110px;
透视:加给变换盒子的父盒子
设置的用户的眼睛与平面的距离。
透视只是视觉上的呈现,不是真正的3D。
```css
<style>
.box{
width: 500px;
height: 500px;
margin: 100px auto;
perspective: 110px;
}
img{
width: 500px;
transition: all 2s;
}
.box:hover img{
transform: rotate3d(0.5,0,0,130deg);
/* transform: rotateZ(45deg); */
}
</style>
transform: rotateX(45deg);绕X轴旋转45°
transform: rotateY(45deg);绕Y轴旋转45°
transform: rotateZ(45deg);绕Z轴旋转45°