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

本文介绍了如何使用CSS的转换(transition)属性来创建一个动态效果,使得页面上的两个图片分别从左右两侧开始移动,并在中心点相遇,模拟碰撞的效果。通过设置不同的translateX值和:hover伪类,可以实现当鼠标悬停时图片的平滑移动。此外,还提供了一个版本,使得图片在页面加载时仅移动一次。这个教程对于前端开发者来说,是一个关于CSS交互和动画的实用示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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转换的一个重要考虑因素是您应该明确设置启动状态和结束状态,这样浏览器就可以清楚地了解它之间的转换.

所以…在你在问题中发布的例子中,重要的是在以下情况下说明图像的translateX位置:hover适用时,以及何时:hover不适用.

这样,浏览器可以清楚它正在转换的两个translateX坐标.

例:

#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.

f0dc4a474b2a6a6a5be1b513947c3cea.png

822ea844014cf6f9f582d1987e6c5316.png

版本2(页面加载时只移动一次)

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

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

}

f0dc4a474b2a6a6a5be1b513947c3cea.png

822ea844014cf6f9f582d1987e6c5316.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值