精靈圖片

含義：一張圖通過background position：水平方向 垂直方向；定位來確定小圖標(biāo)位置

應(yīng)用場景

小圖標(biāo)

body {margin: 0;background-color: rgb(79, 83, 92);}.contont {width: 100%;/* width: 1000px; *//* margin: 0 auto; */}.photo {width: 200px;height: 200px;background-image: url(./../圖片/timg.jpg);/* border: 1px solid rgb(60, 155, 233); */float: left;/* margin: 100px 20px; */}.elf1 {width: 58px;height: 170px;background-position: -558PX -258PX;}.elf2 {width: 129px;height: 170px;background-position: -145PX -444PX;}.elf3 {width: 129px;height: 170px;background-position: -254PX -660PX;}.elf4 {width: 129px;height: 170px;background-position: -601PX -56PX}

如下列l(wèi)ove定位

HTML：

<div class="contont"><div class="photo elf1"></div><div class="photo elf2"></div><div class="photo elf3"></div><div class="photo elf4"></div> </div>

CSS：

body {margin: 0;background-color: rgb(79, 83, 92);}.contont {width: 100%;/* width: 1000px; *//* margin: 0 auto; */}.photo {width: 200px;height: 200px;background-image: url(./../圖片/timg.jpg);/* border: 1px solid rgb(60, 155, 233); */float: left;/* margin: 100px 20px; */}.elf1 {width: 58px;height: 170px;background-position: -558PX -258PX;}.elf2 {width: 129px;height: 170px;background-position: -145PX -444PX;}.elf3 {width: 129px;height: 170px;background-position: -254PX -660PX;}.elf4 {width: 129px;height: 170px;background-position: -601PX -56PX}

效果圖：

?

?

過渡（動態(tài)效果實現(xiàn)）

transition：；過渡

功能：實現(xiàn)元素不同狀態(tài)之間的平滑過渡。

transition

transition-property ：檢索或設(shè)置對象中的參與過渡的屬性

過渡屬性：發(fā)生變化時，想要有過渡效果的屬性。all，全屬性

??數(shù)值型的屬性才可以設(shè)置過渡。

??width,height,color,font-size

transition-duration ：檢索或設(shè)置對象過渡的持續(xù)時間 完成時間：單位是s/ms。

transition-timing-function ：檢索或設(shè)置對象中過渡的動畫類型

運動曲線：

?linear?勻速

ease?減速

ease-in?加速

ease-in-out?先加速后減速

transition-delay ：檢索或設(shè)置對象延遲過渡的時間

??延遲時間：單位是s?默認為0?過渡多久后生效。??從結(jié)束狀態(tài)返回到開始狀態(tài)時，也會生效

??之前：元素->hover狀態(tài)?直接切換，從開始狀態(tài)到結(jié)束狀態(tài)，瞬間完成，中間過程幾乎無法查看。

??格式：transition：過渡的屬性?完成時間（s）?運動曲線?延遲時間

HTML：

<div class="transition"></div>

CSS:

.transition {width: 200px;height: 200px;background-color: rgb(132, 178, 248);/* transition: width 2s ease-in-out; */transition-property: width;transition-duration: 1s;transition-timing-function: linear;transition-delay: 1s;float: left;}.transition:hover {width: 600px;background-color: rgb(123, 233, 101);}

?

2D轉(zhuǎn)換（平面轉(zhuǎn)換）

transform轉(zhuǎn)換（none）

縮放

transform:scale(水平方向的縮放倍數(shù),垂直方向的縮放倍數(shù))

???取值：大于1表示放大，小于1縮小。

css:

.zoom {width: 200px;height: 200px;background-color: rgb(200, 230, 130);}.zoom:hover {transform: scale(2, 2);}

位移

transform:translate(水平偏移量，垂直偏移量)

參數(shù)：正值：向右和向下??負值：反方向。

百分比：盒子本身的寬高*百分比。

css:

.rocket {width: 101px;height: 190px;position: absolute;bottom: 0;left: 80%;background-image: url(./../圖片/rocket.png);transition: all 1s ease-in;}.button:hover .rocket {transform: translate(-100px, -700px);}

傾斜

transform:skew(水平傾斜角度，垂直傾斜角度)

單位：deg?角度

正值：順時針，負值：逆時針。

css:

.slope {width: 484px;height: 300px;margin: 100px auto;background: url("./../圖片/狼.jpg");}.slope:hover {transform: skew(0, 10deg);}

旋轉(zhuǎn)

讓盒子進行旋轉(zhuǎn)

????格式：

????transform:?rotate(角度);

????單位：deg?正值為順時針，負值為逆時針。

????transform?可以書寫多個2D轉(zhuǎn)換，中間用空格隔開。

????當(dāng)rotate和translate在一起的時候，注意書寫順序。

????rotate在前，先旋轉(zhuǎn)自身，再按照旋轉(zhuǎn)的角度，進行位移。

????translate在前，先進行位移，再旋轉(zhuǎn)自身。

?圓角

?border-radius:?50%;?

過渡

?transition:?all?3s;

?設(shè)置旋轉(zhuǎn)的中心點

transform-origin:?10%;

屬性值：px?英文（left?center?right?top?bottom）?百分比

百分比是按照自身寬高*百分比計算的。

只寫一個值，第二值默認為center。

css:

.rotate {width: 350px;height: 350px;margin: 100px auto;background-image: url("../img/hb.png");/*圓角border-radius: 50%; *//* 過渡 */transition: all 3s;/* 設(shè)置旋轉(zhuǎn)的中心點*/transform-origin: 10%;}.rotate:hover {transform: rotate(45deg);}

?

總結(jié)

以上是生活随笔為你收集整理的2020/11/17css精灵图片的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。