html 有没办法让文本框获取焦点的时候 另一个元素执行动画?
比如我有一个文本框和一个按钮,当文本框获取焦点的时候,按钮发生了css3位移动画?如果能纯css完成最好,实在不行js也可以...
比如我有一个文本框和一个按钮,当文本框获取焦点的时候,按钮发生了css3位移动画?如果能纯css完成最好,实在不行js也可以
展开
2个回答
展开全部
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<textarea id="ta"></textarea>
<input type="button" id="btn" value="提交">
<style>
.move {
background-color:green;
transition-duration:2s;
}
</style>
<script>
window.onload = function(){
var t = document.getElementById("ta"),
c = document.getElementById("btn");
t.onfocus = function(){
c.className = "move";
};
t.onblur = function(){
c.className = "";
}
}
</script>
要改成其他效果，修改move类即可
使用css3动画，需要浏览器支持
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>555</title>
<style type="text/css">
#flash { width:50px; height:50px; background:#000;}
</style>
</head>
<body>
<div id="flash"></div>
<input type="button" onclick="play()" value="start"/><input type="button" onclick="stop()" value="stop"/>
</body>
<script type="text/JavaScript">
var margin=0;
var timer;
function startMove(){
var speed = 1;
margin += speed;
document.getElementById("flash").style.marginLeft = margin + "px";
}
function play(){
timer = window.setInterval('startMove()',10);
}
function stop(){
window.clearInterval(timer);
}
</script>
</html>
你说的移动动画是无法用css实现的=-=
追问
可以啊,css3的transform:translate就是移动动画
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
