Mate60手機殼曝光 致敬自己的經典設計
8月3日消息，今天下午博主數碼閑聊站帶來了華為Mate60的第三方手機殼圖，可以讓我們在真機發布之前看看這款華為全新旗艦的大致輪廓。從曝光的圖片看，Mate 60背后攝像頭面積依然
介紹一些看似簡單又不是那么容易的過渡小技巧。
很多 CSS 屬性其實是不支持過渡變化的，例如flex中的對齊。
justify-content: start | center | end或者是文本對齊。
text-align: left | center | right這樣屬性在變化時是沒有過渡動畫的，但有時又需要這樣的動效，比如下面這個效果：
有人會覺得這不就是一個普通的位移動畫嗎，給個固定位移不就可以了？但這個位移的距離其實是不固定的，是跟隨外部容器變化的，這應該如何實現呢？下面介紹一些思路。
首先簡單布局示意一下：
<div class="con"> <div class="item"></div></div>加點修飾。
.con{ width: 300px; border: 8px solid transparent; background-color: #FFE8A3; border-radius: 8px;}.item{ width: 60px; height: 60px; border-radius: 4px; background-color: #9747FF;}現在效果如下，那么如何從左平滑的向右移動呢？
既然常規的對齊方式無法實現，是不是可以換種方式實現對齊呢？
說到對齊，很容易想到定位，比如默認是left:0，居右就是left:100%。
.item{ position: relative; left: 0; transition: .2s;}/* 變化后 */.item{ left: 100%;}動態演示如下：
可以看到left:100%后元素已經出去了，這樣因為這里的100%偏移量是相對父級的，為了不出去，所以需要修正一下，讓元素向左平移自身的寬度，這里可以用translate，剛好是相對于自身的。
.item{ position: relative; left: 0; transition: .2s;}/* 變化后 */.item{ left: 100%; transform: translateX(-100%);}也就是需要通過兩個屬性的變化完成了從左到右的平滑過渡，示意如下：
這樣就比較完美了。
你也可以訪問以下鏈接查看效果：
當然除了相對定位，margin-left也是可以的。
除了以上定位偏移的方式外，還可以用彈性布局的方式實現，這里以flex為例。
大家可能都用過flex:1這樣的屬性，表示填充剩余空間。如果是flex:0呢？表示填充比例是0，也就相當于不占空間，這樣通過彈性布局的擠壓，是不是也相當于居左變到了居右。
而flex的變化是支持過渡的，所以也能輕松實現左右的過渡效果。
還是前面的布局，我們可以用偽元素::before來充當擠壓元素。
.con{ display: flex;}.con::before{ content: ''; flex: 0; transition: 1s;}/* 變化后 */.con::before{ flex: 1;}實際效果如下：
是不是也很容易呢？你也可以訪問以下鏈接查看效果。
對了，如果你想實現居左到居中的效果，可以用兩個偽元素，原理也是類似的。
這個場景可能適用性沒那么強，如果你剛好是操作背景的位置變化，那就可以關注一下。
關于background-position的百分比，可能很多小伙伴都忽視了，官方是這么描述的。
給定背景圖像位置的百分比偏移量是相對于容器的。值 0% 表示背景圖像的左（或上）邊界與容器的相應左（或上）邊界對齊，或者說圖像的 0% 標記將位于容器的 0% 標記上。值為 100% 表示背景圖像的 右（或 下）邊界與容器的 右（或 下）邊界對齊，或者說圖像的 100% 標記將位于容器的 100% 標記上。因此 50% 的值表示水平或垂直居中背景圖像，因為圖像的 50% 將位于容器的 50% 標記處。類似的，background-position: 25% 75% 表示圖像上的左側 25% 和頂部 75% 的位置將放置在距容器左側 25% 和距容器頂部 75% 的容器位置。
它還有個計算公式。
(container width - image width) * (position x%) = (x offset value)(container height - image height) * (position y%) = (y offset value)看似復雜，其實只需要記住一點就夠了，0%就是最左（上）,100%就是最右（下）,而不必關注背景的尺寸。
剛好就是我們前面需要的效果，也不必考慮偏移量。
可以看下面的演示：
有時候，一種布局行不通，換種布局思路也是不錯的。本文介紹的一些位移過渡的小技巧，你學到了嗎？下面總結一下
[1]CSS align transition(position) (juejin.cn)： https://code.juejin.cn/pen/7347208433046650880。
[2]CSS align transition(flex) (juejin.cn)： https://code.juejin.cn/pen/7347212824911085579。
本文鏈接：http://www.www897cc.com/showinfo-26-77524-0.htmlCSS 實現居左到居右過渡變化的一些思路
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號