日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當前位置:首頁 > 科技  > 軟件

CSS 實現居左到居右過渡變化的一些思路

來源: 責編: 時間:2024-03-18 17:42:55 179觀看
導讀介紹一些看似簡單又不是那么容易的過渡小技巧。很多 CSS 屬性其實是不支持過渡變化的,例如flex中的對齊。justify-content: start | center | end或者是文本對齊。text-align: left | center | right這樣屬性在變化時

gBf28資訊網——每日最新資訊28at.com

介紹一些看似簡單又不是那么容易的過渡小技巧。gBf28資訊網——每日最新資訊28at.com

很多 CSS 屬性其實是不支持過渡變化的,例如flex中的對齊。gBf28資訊網——每日最新資訊28at.com

justify-content: start | center | end

或者是文本對齊。gBf28資訊網——每日最新資訊28at.com

text-align: left | center | right

這樣屬性在變化時是沒有過渡動畫的,但有時又需要這樣的動效,比如下面這個效果:gBf28資訊網——每日最新資訊28at.com

gBf28資訊網——每日最新資訊28at.com

有人會覺得這不就是一個普通的位移動畫嗎,給個固定位移不就可以了?但這個位移的距離其實是不固定的,是跟隨外部容器變化的,這應該如何實現呢?下面介紹一些思路。gBf28資訊網——每日最新資訊28at.com

一、定位+偏移

首先簡單布局示意一下:gBf28資訊網——每日最新資訊28at.com

<div class="con">  <div class="item"></div></div>

加點修飾。gBf28資訊網——每日最新資訊28at.com

.con{  width: 300px;  border: 8px solid transparent;  background-color: #FFE8A3;  border-radius: 8px;}.item{  width: 60px;  height: 60px;  border-radius: 4px;  background-color: #9747FF;}

現在效果如下,那么如何從左平滑的向右移動呢?gBf28資訊網——每日最新資訊28at.com

gBf28資訊網——每日最新資訊28at.com

既然常規的對齊方式無法實現,是不是可以換種方式實現對齊呢?gBf28資訊網——每日最新資訊28at.com

說到對齊,很容易想到定位,比如默認是left:0,居右就是left:100%。gBf28資訊網——每日最新資訊28at.com

.item{  position: relative;  left: 0;  transition: .2s;}/* 變化后 */.item{  left: 100%;}

動態演示如下:gBf28資訊網——每日最新資訊28at.com

gBf28資訊網——每日最新資訊28at.com

可以看到left:100%后元素已經出去了,這樣因為這里的100%偏移量是相對父級的,為了不出去,所以需要修正一下,讓元素向左平移自身的寬度,這里可以用translate,剛好是相對于自身的。gBf28資訊網——每日最新資訊28at.com

.item{  position: relative;  left: 0;  transition: .2s;}/* 變化后 */.item{  left: 100%;  transform: translateX(-100%);}

也就是需要通過兩個屬性的變化完成了從左到右的平滑過渡,示意如下:gBf28資訊網——每日最新資訊28at.com

gBf28資訊網——每日最新資訊28at.com

這樣就比較完美了。gBf28資訊網——每日最新資訊28at.com

gBf28資訊網——每日最新資訊28at.com

你也可以訪問以下鏈接查看效果:gBf28資訊網——每日最新資訊28at.com

  • CSS align transition(position) (juejin.cn)[1]

當然除了相對定位,margin-left也是可以的。gBf28資訊網——每日最新資訊28at.com

二、彈性布局擠壓

除了以上定位偏移的方式外,還可以用彈性布局的方式實現,這里以flex為例。gBf28資訊網——每日最新資訊28at.com

大家可能都用過flex:1這樣的屬性,表示填充剩余空間。如果是flex:0呢?表示填充比例是0,也就相當于不占空間,這樣通過彈性布局的擠壓,是不是也相當于居左變到了居右。gBf28資訊網——每日最新資訊28at.com

gBf28資訊網——每日最新資訊28at.com

而flex的變化是支持過渡的,所以也能輕松實現左右的過渡效果。gBf28資訊網——每日最新資訊28at.com

還是前面的布局,我們可以用偽元素::before來充當擠壓元素。gBf28資訊網——每日最新資訊28at.com

.con{  display: flex;}.con::before{  content: '';  flex: 0;  transition: 1s;}/* 變化后 */.con::before{  flex: 1;}

實際效果如下:gBf28資訊網——每日最新資訊28at.com

gBf28資訊網——每日最新資訊28at.com

是不是也很容易呢?你也可以訪問以下鏈接查看效果。gBf28資訊網——每日最新資訊28at.com

  • CSS align transition(flex) (juejin.cn)[2]

對了,如果你想實現居左到居中的效果,可以用兩個偽元素,原理也是類似的。gBf28資訊網——每日最新資訊28at.com

gBf28資訊網——每日最新資訊28at.com

三、背景位置變化

這個場景可能適用性沒那么強,如果你剛好是操作背景的位置變化,那就可以關注一下。gBf28資訊網——每日最新資訊28at.com

關于background-position的百分比,可能很多小伙伴都忽視了,官方是這么描述的。gBf28資訊網——每日最新資訊28at.com

給定背景圖像位置的百分比偏移量是相對于容器的。值 0% 表示背景圖像的左(或上)邊界與容器的相應左(或上)邊界對齊,或者說圖像的 0% 標記將位于容器的 0% 標記上。值為 100% 表示背景圖像的 右(或 下)邊界與容器的 右(或 下)邊界對齊,或者說圖像的 100% 標記將位于容器的 100% 標記上。因此 50% 的值表示水平或垂直居中背景圖像,因為圖像的 50% 將位于容器的 50% 標記處。類似的,background-position: 25% 75% 表示圖像上的左側 25% 和頂部 75% 的位置將放置在距容器左側 25% 和距容器頂部 75% 的容器位置。gBf28資訊網——每日最新資訊28at.com


gBf28資訊網——每日最新資訊28at.com

它還有個計算公式。gBf28資訊網——每日最新資訊28at.com

(container width - image width) * (position x%) = (x offset value)(container height - image height) * (position y%) = (y offset value)

看似復雜,其實只需要記住一點就夠了,0%就是最左(上),100%就是最右(下),而不必關注背景的尺寸。gBf28資訊網——每日最新資訊28at.com

gBf28資訊網——每日最新資訊28at.com

剛好就是我們前面需要的效果,也不必考慮偏移量。gBf28資訊網——每日最新資訊28at.com

可以看下面的演示:gBf28資訊網——每日最新資訊28at.com

gBf28資訊網——每日最新資訊28at.com

四、換種布局思路

有時候,一種布局行不通,換種布局思路也是不錯的。本文介紹的一些位移過渡的小技巧,你學到了嗎?下面總結一下gBf28資訊網——每日最新資訊28at.com

  • 很多 CSS 屬性是不支持過渡變化的,比如方位對齊屬性。
  • 常規的對齊方式無法實現過渡,可以換種方式實現對齊。
  • 相對定位left百分比偏移量是相對父級的,直接使用 100%會導致自身脫離父級范圍。
  • translate百分比偏移量是相對于自身的,使用-100%可以消除相對定位的影響。
  • flex布局可以利用容器填充剩余空間的原理實現居左或者居右
  • 背景位置排除了背景尺寸的影響,100%表示最右(下),而不必關注背景的尺寸。

[1]CSS align transition(position) (juejin.cn): https://code.juejin.cn/pen/7347208433046650880。gBf28資訊網——每日最新資訊28at.com

[2]CSS align transition(flex) (juejin.cn): https://code.juejin.cn/pen/7347212824911085579。gBf28資訊網——每日最新資訊28at.com

本文鏈接:http://www.www897cc.com/showinfo-26-77524-0.htmlCSS 實現居左到居右過渡變化的一些思路

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: Java中的鎖升級機制:偏向鎖、輕量級鎖和重量級鎖

下一篇: 如何在Selenium中查找第一個元素和所有元素

標簽:
  • 熱門焦點
  • 轎車從天而降電動車主被撞身亡 超速搶道所致:現場視頻讓網友吵翻

    近日,上海青浦區法院判決轎車從天而降電動車主被撞身亡案,轎車車主被判有期徒刑一年。案件顯示當時男子駕駛轎車在上海某路段行駛,前車忽然轉彎提速超車,
  • 十個可以手動編寫的 JavaScript 數組 API

    JavaScript 中有很多API,使用得當,會很方便,省力不少。 你知道它的原理嗎? 今天這篇文章,我們將對它們進行一次小總結。現在開始吧。1.forEach()forEach()用于遍歷數組接收一參
  • 谷歌KDD'23工作:如何提升推薦系統Ranking模型訓練穩定性

    谷歌在KDD 2023發表了一篇工作,探索了推薦系統ranking模型的訓練穩定性問題,分析了造成訓練穩定性存在問題的潛在原因,以及現有的一些提升模型穩定性方法的不足,并提出了一種新
  • 2023年,我眼中的字節跳動

    此時此刻(2023年7月),字節跳動從未上市,也從未公布過任何官方的上市計劃;但是這并不妨礙它成為中國最受關注的互聯網公司之一。從2016-17年的抖音強勢崛起,到2018年的&ldquo;頭騰
  • 梁柱接棒兩年,騰訊音樂闖出新路子

    文丨田靜 出品丨牛刀財經(niudaocaijing)7月5日,企鵝FM發布官方公告稱由于業務調整,將于9月6日正式停止運營,這意味著騰訊音樂長音頻業務走向消亡。騰訊在長音頻領域還在摸索。為
  • 騰訊蓋樓,字節拆墻

    來源 | 光子星球撰文 | 吳坤諺編輯 | 吳先之&ldquo;想重溫暴刷深淵、30+技能搭配暴搓到爽的游戲體驗嗎?一起上晶核,即刻暴打!&rdquo;曾憑借直播騰訊旗下代理格斗游戲《DNF》一
  • 自律,給不了Keep自由!

    來源 | 互聯網品牌官作者 | 李大為編排 | 又耳 審核 | 谷曉輝自律能不能給用戶自由暫時不好說,但大概率不能給Keep自由。近日,全球最大的在線健身平臺Keep正式登陸港交所,努力
  • 2299元起!iQOO Pad明晚首銷:性能最強天璣平板

    5月23日,iQOO如期舉行了新品發布會,除了首發安卓最強旗艦處理器的iQOO Neo8系列新機外,還在發布會上推出了旗下首款平板電腦——iQOO Pad,其最大的賣點
  • 親歷馬斯克血洗Twitter,硅谷的苦日子在后頭

    文/劉哲銘  編輯/李薇  馬斯克再次揮下裁員大刀。  美國時間11月14日,Twitter約4400名外包員工遭解雇,此次被解雇的員工的主要工作為內容審核等。此前,T
Top 主站蜘蛛池模板: 白银市| 长丰县| 锦州市| 新疆| 辽宁省| 砀山县| 罗山县| 绥芬河市| 梨树县| 新蔡县| 界首市| 博客| 奇台县| 雷波县| 文昌市| 西宁市| 平乡县| 双柏县| 老河口市| 柳河县| 湘阴县| 南雄市| 永年县| 纳雍县| 呼伦贝尔市| 洛阳市| 德令哈市| 泰安市| 谷城县| 平原县| 黔东| 孝昌县| 左贡县| 大英县| 金沙县| 象山县| 和静县| 西藏| 淮滨县| 蒙城县| 满洲里市|