我用css让一个图片从左到右移动，有没有什么办法当鼠标移动到图片上时，图片停止移动，鼠标放开后继续 20
我用css让一个图片从左到右移动，有没有什么办法当鼠标移动到图片上时，图片停止移动，鼠标放开后继续移动，求大神指导（我用的css写的，不是js)...
我用css让一个图片从左到右移动，有没有什么办法当鼠标移动到图片上时，图片停止移动，鼠标放开后继续移动，求大神指导（我用的css写的，不是js)
展开
2个回答
展开全部
有动画效果的是css3的transition、@keyframes、animation等，css要鼠标移上去后改变状态只能用:hover伪类，暂停动画可以用设置animation-play-state:paused;，继续动画是animation-play-state:running; （可能需要设置添加-webkit-等私有前缀）其实动画还是推荐jq，实现起来还是挺方便的，而且不用担心浏览器兼容性。
给你写个例子：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>动画暂停</title>
<style type="text/css">
@keyframes move
{
from {
transform: rotate(0deg);
left: 0;
}
to {
transform: rotate(360deg);
left: 600px;
}
}
@-webkit-keyframes move
{
from {
-webkit-transform: rotate(0deg);
left: 0;
}
to {
-webkit-transform: rotate(360deg);
left: 600px;
}
}
@-zos-keyframes move
{
from {
-zos-transform: rotate(0deg);
left: 0;
}
to {
-zos-transform: rotate(360deg);
left: 600px;
}
}
@-o-keyframes move
{
from {
-o-transform: rotate(0deg);
left: 0;
}
to {
-o-transform: rotate(360deg);
left: 600px;
}
}
.box {
animation: move 3s alternate infinite;
-webkit-animation: move 3s alternate infinite; /* Safari 和 Chrome */
-moz-animation: move 3s alternate infinite; /* Firefox */
-o-animation: move 3s alternate infinite; /* Opera */
position: absolute;
background-color: yellow;
width: 100px;
height: 100px;
}
.box:hover {
-webkit-animation-play-state: paused;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
已赞过
已踩过<
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
