方法一:使用HTML+CSS里面的transition过渡动画结合2d的位移translate设置
<div class="box1"></div>
<div class="box2"></div>
<style>
*{margin:0;padding:0}
div{
float: left;
}
.box1{
width: 200px;
height:200px;
background-color: red;
}
.box2{
width: 100px;
height:100px;
background-color: green;
transition: all linear 1s;
}
.box1:hover+.box2{
transform: translateX(-100px);
}
</style>
方法二:使用HTML5+CSS3中的animation动画属性结合2d里面的位移translate进行实现
<div class="box1"></div>
<div class="box2"></div>
<style>
*{margin:0;padding:0}
div{
float: left;
}
.box1{
width: 200px;
height:200px;
background-color: red;
}
.box2{
width: 100px;
height:100px;
background-color: green;
animation: mover linear 1s;
}
@keyframes mover{
0%{
transform: translateX(0px);
}
100%{
transform: translateX(-100px);
}
}
</style>
方法三:复杂方法,可以使用js封装一个动画函数,直接使用鼠标移动移入事件或者点击事件触发移动
<script>
</script>
<style>
*{margin:0;padding:0}
div{float:left}
.box1{width:300px;height:300px;background-color:red}
.box2{width:100px;height:100px;background-color:green}
</style>
<div class="box1"></div>
<div class="box2"></div>
*陆荣涛前端学习交流Q群858752519
加群备注:CSDN推荐
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)