我用css让一个图片从左到右移动，有没有啥办法当鼠标移动到图片上时，图片停止移动，鼠标放开后继续

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我用css让一个图片从左到右移动，有没有啥办法当鼠标移动到图片上时，图片停止移动，鼠标放开后继续相关的知识，希望对你有一定的参考价值。

我用css让一个图片从左到右移动，有没有什么办法当鼠标移动到图片上时，图片停止移动，鼠标放开后继续移动，求大神指导（我用的css写的，不是js)

有动画效果的是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>

 参考技术A 这里有认识CSS是什么的人就不错了
你还要指望有精通的？
真是醉了

在屏幕向下移动时从左到右移动 UIView

【中文标题】在屏幕向下移动时从左到右移动 UIView【英文标题】：Move UIView left to right while they move down the screen 【发布时间】：2013-04-14 16:29:49 【问题描述】：

我正在尝试创建一个带有块在屏幕上浮动的 iOS 应用程序（UIViews）。我让它们漂浮在屏幕上，但我也希望用户能够在它们下落时在 x 轴上移动它们。我试图用下面的代码来做，但它们只是掉下来，不会从左向右移动。我的问题是我试图用手指从左到右移动它，因为它已经在屏幕上移动了。我怎样才能调整下面的代码来工作？

注意：我可以将视图从左向右移动，而不会在屏幕上向下移动，我也可以在屏幕上向下移动，而无需从左向右移动。当我将两者结合起来时就会出现问题。

Y 轴动画

[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:letView.speed];
[UIView setAnimationDelay:0.0];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];

letView.layer.frame = CGRectMake(letView.layer.frame.origin.x, [[UIScreen mainScreen] bounds].size.height, letView.layer.frame.size.width, letView.layer.frame.size.height);

[UIView commitAnimations];

触摸动画

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 
    UITouch *touch = [[event allTouches] anyObject];
    CGPoint touchLocation = [touch locationInView:self.view];
    //Goes through an array of views to see which one to move
    for (LetterView * view in _viewArray) 
        if (CGRectContainsPoint(view.frame, touchLocation)) 
            dragging = YES;
            currentDragView = view;
            [currentDragView.layer removeAllAnimations];
        
    

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event 
    UITouch *touch = [[event allTouches] anyObject];
    CGPoint touchLocation = [touch locationInView:self.view];
    if (dragging) 
        CGPoint location = touchLocation;
        currentDragView.center = CGPointMake(location.x, currentDragView.center.y);
    

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event 
    dragging = NO;
    [self checkForCorrectWord];
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:currentDragView.speed];
    [UIView setAnimationDelay:0.0];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
    currentDragView
    .layer.frame = CGRectMake(currentDragView.layer.frame.origin.x, [[UIScreen mainScreen] bounds].size.height, currentDragView.layer.frame.size.width, currentDragView.layer.frame.size.height);

    [UIView commitAnimations];

【问题讨论】：

您是否进行了调试以检查您的“CGRectContainsPoint”是否匹配？ _viewArray 中的视图都是 self.view 的直接子类吗？ 我能够将视图从左向右移动，而不会在屏幕上向下移动，并且我能够在不移动它们的情况下将它们向下移动。当我将两者结合起来时就会出现问题。 屏幕下方的动画效果如何？您的触摸处理代码正在从触摸视图层中删除所有动画。您的问题只提供了一半信息的详细信息。 如果可能的话，我不想停止动画在屏幕上向下移动。 接下来，您尝试将它们结合起来做什么？停止并盯着一个新的动画？离开现有的动画？还有什么？ 【参考方案1】：

我有一个演示项目，它向您展示如何在屏幕上以 s 曲线制作“船”动画，如下所示：

我使用的解决方案是制作一个关键帧动画（实际上它是一个关键帧动画，它构成了分组动画的一部分，但您可能不需要其余的分组动画：它是关键帧使弯曲路径形状的动画）。也许你可以调整我正在做的事情，根据你自己的目的进行修改？

代码可在此处下载：

https://github.com/mattneub/Programming-iOS-Book-Examples/tree/master/ch17p501groupedAnimation

我的书中对此进行了详细讨论。关键帧动画一般：

http://www.apeth.com/iOSBook/ch17.html#_keyframe_animation

这个特殊的例子：

http://www.apeth.com/iOSBook/ch17.html#_grouped_animations

【讨论】：

我的问题是在屏幕向下移动时用手指移动它。 抱歉，如果你用手指移动它，你根本不会使用动画。您只需让视图跟随手指（使用 UIPanGestureRecognizer 很简单）。 或者你是说你想让视图在动画时是可触摸的？？？这是一个非常困难的问题，因为在动画过程中，视图实际上并不位于您看到它的位置。 此外，在动画位置时视图位置的任何变化都会终止动画。 这就是为什么我停止动画并重新开始但它没有工作。

以上是关于我用css让一个图片从左到右移动，有没有啥办法当鼠标移动到图片上时，图片停止移动，鼠标放开后继续的主要内容，如果未能解决你的问题，请参考以下文章

精灵动画从左到右，我应该选择啥？动态的还是运动的？

核心动画从左到右

在屏幕向下移动时从左到右移动 UIView

Bootstrap 3折叠（从左到右）[重复]

Swift - 从左到右的 Segue 转换而不嵌入导航控制器

如何使我的文本从左到右突出显示？