當(dāng)前位置：首頁 > 前端技术 > CSS >内容正文

CSS

html css移动位置,html – 如何使用CSS移动对象？

發(fā)布時(shí)間：2025/3/20 CSS 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 html css移动位置,html – 如何使用CSS移动对象？小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

I have two images […] what I want is that one of the objects start moving from left side and the other start moving from the right and meet at the center as if they want to collide.

Is it possible to do it by transition?

是的 – 如果我正確理解你的問題.

CSS轉(zhuǎn)換的一個(gè)重要考慮因素是您應(yīng)該明確設(shè)置啟動狀態(tài)和結(jié)束狀態(tài),這樣瀏覽器就可以清楚地了解它之間的轉(zhuǎn)換.

所以…在你在問題中發(fā)布的例子中,重要的是在以下情況下說明圖像的translateX位置：hover適用時(shí),以及何時(shí)：hover不適用.

這樣,瀏覽器可以清楚它正在轉(zhuǎn)換的兩個(gè)translateX坐標(biāo).

例：

#axis {

border: 3px solid #73AD21;

position: absolute;

top: 45%;

left: 44%;

}

#axis img {

float: left;

transition: all 1s ease-in;

-webkit-transition: all 1s ease-in;

-moz-transition: all 1s ease-in;

-o-transition: all 1s ease-in;

}

#axis .move-left {

transform: translateX(200px);

-webkit-transform: translateX(200px);

-o-transform: translateX(200px);

-moz-transform: translateX(200px);

}

#axis .move-right {

transform: translateX(-200px);

-webkit-transform: translateX(-200px);

-o-transform: translateX(-200px);

-moz-transform: translateX(-200px);

}

#axis:hover .move-left,#axis:hover .move-right {

transform: translateX(0px);

-webkit-transform: translateX(0);

-o-transform: translateX(0);

-moz-transform: translateX(0);

}

p {

font-weight:bold;

}

Hover over the green border box.

版本2(頁面加載時(shí)只移動一次)

function initialiseAxisImages() {

var axis = document.getElementById('axis');

var axisImages = axis.getElementsByTagName('img');

axisImages[0].classList.remove('move-right');

axisImages[1].classList.remove('move-left');

}

window.addEventListener('load',initialiseAxisImages,false);