精灵图
1.什么是CSS精灵图
CSS精灵图是一种图像合成技术
2.CSS精灵图作用
可以减少请求的次数, 以及可以降低服务器处理压力
3.如何使用CSS精灵图
CSS的精灵图需要配合背景图片和背景定位来使用
4.案例展示代码:`
<style>
body {
background-color: #000000;
}
div {
float: left;
}
.box {
width: 128px;
height: 167px;
background-image: url("../img/timg.jpg");
background-color: red;
border: 1px solid;
background-position: -335px -83px;
}
.box1 {
width: 128px;
height: 167px;
background-image: url("../img/timg.jpg");
background-color: red;
border: 1px solid;
background-position: -1068px -82px;
}
.box3 {
width: 128px;
height: 167px;
background-image: url("../img/timg.jpg");
background-color: red;
border: 1px solid;
background-position: -1409px -259px;
}
.box4 {
width: 128px;
height: 167px;
background-image: url("../img/timg.jpg");
background-color: red;
border: 1px solid;
background-position: -1587px -81px;
}
</style>
效果图:
过渡( transition )
1.功能:实现元素不同状态之间的平滑过渡。
之前:元素->hover状态 直接切换,从开始状态到结束状态,瞬间完成,中间过程几乎无法查看。
2. 格式:
transition:过渡的属性 完成时间(s) 运动曲线 延迟时间
注: 数值型的属性才可以设置过渡: width,height,color,font-size
3. transition-property 过渡属性:发生变化时,想要有过渡效果的属性。all,全属性。
transition-duration 完成时间:单位是s/ms。
4. transition-timing-function 运动曲线:
a: linear 匀速
b: ease 减速
c:ease-in 加速
d: ease-in-out 先加速后减
5. transition-delay 延迟时间:单位是s 默认为0 过渡多久后生效。 从结束状态返回到开始状态时,也会生效。
6. 代码:
`style>
.box{
width: 200px;
height: 200px;
background-color: rosybrown;
transition-property: all;
transition-duration: 2s;
transition-timing-function: ease-in;
transition-delay: 1s;
}
.box:hover{
width: 800px;
background-color: royalblue;
}
</style>
</head>
<body>`
2D转换缩放
1.格式:
transform:scale(水平方向的缩放倍数,垂直方向的缩放倍数)
取值:大于1表示放大,小于1缩小。
2.代码:
`<style>
.box{
width: 100px;
height: 100px;
margin: 100px auto;
background-color: saddlebrown;
transition: all 1s;
}
.box:hover{
transform: scale(0.5);
}
</style>`
2D位移
1.格式:
transform:translate(水平偏移量,垂直偏移量)
参数:
正值:向右和向下 负值:反方向。
百分比;盒子本身的宽高*百分比
2.代码:
`<style>
.box{
width: 370px;
height: 452px;
margin: 100px auto;
background: url("../img/hb.jpg") no-repeat;
transition: all 1s;
}
.box:hover{
transform: translate(100%,100%);`
绝对定位居中
1.代码
:`<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>`
效果图:
小火箭的制作
1.代码:
<style>
body {
background-color:steelblue;
}
.box {
height: 1000px;
position: relative;
}
.huojian {
width: 100px;
height: 190px;
background-image: url("第12天/img/rocket.png");
position: absolute;
bottom: 1px;
left: 500px;
transition:all 2s ease-in;
background-color:steelblue;
}
.huojian:hover{
transform: translate(0,-800px);
}
</style>
</head>
<body>
<div class="box">
<div class="huojian"></div>
</div>
</body>
倾斜
- transform:skew(水平倾斜角度,垂直倾斜角度)
单位:deg 角度
正值:顺时针,负值:逆时针。
2.代码:
<style>
.box{
width: 484px;
height: 300px;
margin: 100px auto;
background: url("../img/zwz.jpg");
}
.box:hover{
transform: skew(0,10deg);
}
旋转
1.设置旋转的中心点
属性值:px 英文(left center right top bottom) 百分比
百分比是按照自身宽高*百分比计算的。
只写一个值,第二值默认为center。
2.盒子进行旋转
格式:
transform: rotate(角度);
单位:deg 正值为顺时针,负值为逆时针。transform 可以书写多个2D转换,中间用空格隔开。
当rotate和translate在一起的时候,注意书写顺序。 rotate在前,先旋转自身,再按照旋转的角度,进行位移。translate在前,先进行位移,再旋转自身。
3.代码:
.box{
width: 350px;
height: 350px;
margin: 100px auto;
background-image: url("../img/hb.png");
transition: all 3s;transform-origin: 10%;
}
扑克牌
1.代码:
<style>
.box{
width: 900px;
height: 500px;
position: relative;
margin: 100px auto;
}
.box img{
width: 250px;
position: absolute;
left: 50%;
top: 0;
margin-left: -125px;
transition: all 1s;
transform-origin: center bottom;
}
.box:hover img:nth-child(7){
transform: rotate(0);
}
.box:hover img:nth-child(1){
transform: rotate(-60deg);
}
.box:hover img:nth-child(13){
transform: rotate(60deg);
}
.box:hover img:nth-child(2){
transform: rotate(-50deg);
}
.box:hover img:nth-child(12){
transform: rotate(50deg);
}
.box:hover img:nth-child(3){
transform: rotate(-40deg);
}
.box:hover img:nth-child(11){
transform: rotate(40deg);
}
.box:hover img:nth-child(4){
transform: rotate(-30deg);
}
.box:hover img:nth-child(10){
transform: rotate(30deg);
}
.box:hover img:nth-child(5){
transform: rotate(-20deg);
}
.box:hover img:nth-child(9){
transform: rotate(20deg);
}
.box:hover img:nth-child(6){
transform: rotate(-10deg);
}
.box:hover img:nth-child(8){
transform: rotate(10deg);
}
</style>
</head>
<body>
<div class="box">
<img src="../img/red.jpg" alt="">
<img src="../img/red.jpg" alt="">
<img src="../img/red.jpg" alt="">
<img src="../img/red.jpg" alt="">
<img src="../img/red.jpg" alt="">
<img src="../img/red.jpg" alt="">
<img src="../img/red.jpg" alt="">
<img src="../img/red.jpg" alt="">
<img src="../img/red.jpg" alt="">
<img src="../img/red.jpg" alt="">
<img src="../img/red.jpg" alt="">
<img src="../img/red.jpg" alt="">
<img src="../img/red.jpg" alt="">
</div>
效果:设置效果前
设置效果后:
3D转换
1.透视:加给变换盒子的父盒子
设置的用户的眼睛与平面的距离。
透视只是视觉上的呈现,不是真正的3D。
2.代码:
`<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);
}`
百度钱包旋转
1.代码:
<style>
body{
background-color: cornflowerblue;
}
.box{
width: 300px;
height: 300px;
border: 1px solid;
margin: 100px auto;
position: relative;
}
.box>div{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
transition: all 2s;
/* 当盒子旋转过背面时,隐藏 */
backface-visibility: hidden;
}
.box1{
background: url("../img/bdqb.png") left 0 no-repeat;
}
.box2{
background: url("../img/bdqb.png") right 0 no-repeat;
transform: rotateY(180deg);
}
.box:hover .box1{
transform: rotateY(180deg);
}
.box:hover .box2{
transform: rotateY(0);
}
效果图: