精靈圖片

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

應用場景

小圖標

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}

如下列love定位

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}

效果圖：

?

?

過渡（動態效果實現）

transition：；過渡

功能：實現元素不同狀態之間的平滑過渡。

transition

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

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

??數值型的屬性才可以設置過渡。

??width,height,color,font-size

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

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

運動曲線：

?linear?勻速

ease?減速

ease-in?加速

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

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

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

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

??格式：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轉換（平面轉換）

transform轉換（none）

縮放

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

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

css:

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

位移

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

參數：正值：向右和向下??負值：反方向。

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

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);}

旋轉

讓盒子進行旋轉

????格式：

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

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

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

????當rotate和translate在一起的時候，注意書寫順序。

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

????translate在前，先進行位移，再旋轉自身。

?圓角

?border-radius:?50%;?

過渡

?transition:?all?3s;

?設置旋轉的中心點

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;/* 設置旋轉的中心點*/transform-origin: 10%;}.rotate:hover {transform: rotate(45deg);}

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。