DOM的CSS与JS动画效果

dom动画效果可以用CSS也可以用JS来实现,如果我们设置一个div让它从左往右动起来,就可以实现一个简单的动画效果。

1、CSS动画效果如下:

<style>
#dongqilai {
width: 100px;
height: 100px;
background-color: cadetblue;
margin-left:100px;*/
}
#dongqilai:hover{
margin-left: 100px;
transform: rotate(360deg);(旋转)
background-color: red;
transition: 0.5s;(过渡)
}
</style>

<body>
<div id="dongqilai" style="margin-left: 30px;"></div>

</body>

2、JS动画效果如下:

<script>

var x = document.getElementById("dongqilai");
alert(x.offsetLeft);(相对于父对象的左边距)
x.style.marginLeft = "100px";
alert(parseInt(x.style.marginLeft));

alert(window.screen.availWidth);
var a = window.setInterval("change()",15);
function change()
{
var x = document.getElementById("dongqilai");
var left = x.style.marginLeft;
left = parseInt(left);
left += 1;
if(left <= 500)
{
x.style.marginLeft = left + "px";
}
else
{
window.clearInterval(a);
}

}
</script>

 

转载于:https://www.cnblogs.com/mengshenshenchu/p/6605227.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值