css动画特效与js动画特效（一）------2017-03-24

最新推荐文章于 2022-10-09 12:46:44 发布

weixin_30896763

最新推荐文章于 2022-10-09 12:46:44 发布

阅读量100

点赞数

原文链接：http://www.cnblogs.com/chenguanai/p/6611337.html

版权

1、用css做动画效果： 放鼠标才会发生利用hover

<head>

<style>

#aa{

background-color: red;

width: 100px;

height: 120px;

margin-top: 50px;

}

#aa:hover{ /* 鼠标放在图片上发生的变化,鼠标移开效果停止*/

margin-left: 400px;

transition: 10s; /* 变化时间为5秒*/

background-color: yellow; /* 鼠标放上后颜色会由红色变为黄色*/

transform: rotate(360deg); /* 以360度旋转的方式到指定地方*/

}

</style>

</head>

<body>

2、 js动画效果：不用放鼠标可以自己移动利用时间间隔

<div id="bb" style="background-color: yellow; width: 50px; height: 50px;

margin-left: 50px;" ></div>

var a=window.setInterval("change()",500);

function change(){

var d=document.getElementById("bb");

var c=d.style.marginLeft;

c=parseInt(c);

c+=1;

if(c<=500){

d.style.marginLeft=c+"px";

}

else{

window.clearInterval(a); -----清除间隔

}}

</script>

转载于:https://www.cnblogs.com/chenguanai/p/6611337.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30896763

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css动画特效与js动画特效（一）------2017-03-24

1、用css做动画效果：放鼠标才会发生利用hover<head><style> #aa{ background-color: red; width: 100px;...
复制链接

扫一扫