个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
26
4
我有 3 只带有 css 动画的鸟。目前所有三只鸟都直线进入 Canvas ，但鸟不会像这样飞。图片中清楚地描述了我想要实现的目标。我想控制鸟在 Canvas 上旅行的每个阶段的飞行方向。任何人都可以帮助我实现它吗？
我的代码
HTML
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="canvas">
<img class="people" src="https://i.imgsafe.org/9967e45cc8.png" alt="">
<img class="bird-1" src="https://i.imgsafe.org/996ac926a0.png" alt="">
<img class="bird-2" src="https://i.imgsafe.org/996bc03236.png" alt="">
<img class="bird-3" src="https://i.imgsafe.org/996cfb24a4.png" alt="">
</div>
</body>
</html>
CSS
body{
margin: 0;
}
.canvas{
background-color: lightgrey;
width: 300px;
height: 250px;
position: relative;
left: 30%;
top: 20%;
overflow: hidden;
}
.logo,
.people{
position: absolute;
}
.bird-1{
position: absolute;
width: 50px;
-webkit-animation: first 2s linear forwards;
animation: first 2s linear forwards;
top: -70px;
left: 55px;
}
.bird-2{
position: absolute;
width: 50px;
-webkit-animation: second 2s linear forwards;
animation: second 2s linear forwards;
top: 165px;
left: -50px;
}
.bird-3{
position: absolute;
width: 50px;
-webkit-animation: third 2s linear forwards;
animation: third 2s linear forwards;
top: 163px;
right: -50px;
transform: rotateY(180deg);
}
@-webkit-keyframes first{
0%{top: -70px;}
100%{top:65px;}
}
@-webkit-keyframes second{
0%{left: -50px;}
100%{left:15px;}
}
@-webkit-keyframes third{
0%{right: -50px;}
100%{right:135px;}
}
最佳答案
您必须以特定速度(使用曲线)在 X 轴上创建运动，并以另一种速度创建 Y 轴运动。您可以查看本教程，它应该为您提供在 CSS 中执行此操作所需的一切: http://tobiasahlin.com/blog/curved-path-animations-in-css/
您还可以为每只鸟创建一个 SVG 路径并使用此技术，但它需要 JavaScript:http://icanbecreative.com/article/animate-element-along-svg-path/
关于html - 带有CSS动画的元素方向控制，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42583918/
26
4
0
我正在使用 MapBox 绘制兴趣点，这些兴趣点是通过基于 Rails 构建的用户生成表单提交的。当前，用户输入一个地址，然后该地址通过 gem(地理编码器)计算出 Lat 和 Lng。从那里我通过
我正在纵向平板电脑上开发应用程序。 但是，当平板电脑转到横向模式时，应用程序也会转动，并且所有对齐方式都将被取消。那么有什么方法可以将我的 WPF 应用程序锁定到一个方向？ 谢谢! 最佳答案 我必须同
我在我的应用程序中的 mkmapview 上显示了两点之间的路线，但我想显示这两点的方向。点的纬度和经度存储在 NSArray 中。 最佳答案 这可能为时已晚，您可能已经解决了它，但这是我已经测试过并
我正在处理一个小型 Unity3D 项目，我需要从另一个工具导入一些数据。该工具通过两个向量为我提供了对象方向，我需要将其移植到 Unity。 例如，我有这两个向量； x = Vector( 0.70
有没有办法以编程方式设置 UIActionSheet 的方向？我的 iPhone 方向是纵向，但 UIActionSheet 需要是横向。这可以吗？ 编辑: 所以我的问题是我不想将 rootviewc
如何在 Python 中根据 2 个 GPS 坐标计算速度、距离和方向(度)？每个点都有纬度、经度和时间。 我在这篇文章中找到了半正矢距离计算: Calculate distance between
需要一个代码来更改 div 的属性，具体取决于 iPhone 设备的位置。在这段代码工作之前现在停止这样做了吗？ @media all and (orientation:portrait) { .
在“View Did Load”中，我试图确定 View 的大小，以便我可以适本地调整 subview 的大小。我希望它始终围绕屏幕的长度和宽度拉伸(stretch)，而不管方向如何。 quest *
如何根据对象的方向移动对象？我的意思是，我有一个处于某个位置的立方体，我想绕 Y 轴旋转并根据它们的方向移动。然后再次移动和旋转以改变方向。像这样的事情: 最佳答案 在 JS 中你可以尝试这样的事情:
我目前有一个处于横向模式的 SurfaceView。 目前我正在尝试使用添加操作栏/菜单栏 /*Action Bar */ //this.setRequestedOrientation(Activit
我正在使用 cocos2d，我想播放电影。为此，我创建了 MPMoviePlayerViewController 并将其作为 [[CCDirector sharedDirector] openGLVi
我在 cocos2d 中创建了一个游戏，因为我想使用我找到的一些 UIKit 元素 kobold2d。 我移植了游戏，但问题是我的 iPhone 刺激器旋转了， 但不是显示的节点。 必须使用: bac
我可以在 iOS 中的 UITabBarController 中更改方向吗？我有这样的东西: UITableViewController-> Team Tab -> UINavigationContr
我有 UINavigationController 和几个 View Controller 。这是他们的名单:主->相册->图片 现在，在第一个和第二个(主要和专辑)中，我希望 UINavigatio
人们普遍认为，在过去几年中，标准显示器的最佳网站宽度已从 800 像素增加到 1024+ 像素(网站通常为 960 像素宽)，但随着移动设备的兴起，哪些分辨率被认为是“关键”迎合？ 例如，this
我正在做一个 GTK+ 项目，我需要一个像这样的垂直 GtkLevelBar: 但我不知道如何从默认的水平 GtkLevelBar 翻转它: 这是我的 GtkLevelBar 代码。 GtkWidge
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
我的 collectionView 以横向模式显示 20 个项目。在纵向模式下，我只想展示 8 个可重复使用的项目。我怎样才能做到这一点？ collectionView 何时在数据源上调用 colle
可以在 list 文件中设置 Activity 的方向。 但是否也可以通过代码来实现？如果是，怎么办？ 谢谢! 最佳答案 setRequestedOrientation(ActivityInfo.SC
我希望在纬度、经度和用户当前位置之间集成方向。我希望通过点击按钮将用户定向到已安装的 Google map /其他应用程序并显示方向。 我搜索了 SO 和谷歌，但找不到好的来源，因此我发布了这个问题。
我是一名优秀的程序员,十分优秀！