Question

如何让小鸟飞从树上回来？它现在向前推进，我想让它转身回来......怎么做？

＆＃13;

$(document).ready(function(){
  $(".bird").click(function(){
    $(this).addClass("birdmove");
  })
});

＆＃13;

.bird img{
  width: 100px;
  height: auto;
}

.bird{
  position: absolute;
  left: 200px;
  top: 100px;
  z-index: 10;
  transition: transform 5s;
  transition-timing-function: ease;
}

.birdmove{
  transform: translateX(800px);
  animation: oscillate 5s;
  animation-timing-function: ease;
}
@keyframes oscillate {
  10% {top: 50px;}
  30% {top: 150px;}
  60% {top: 100px;}
  80% {top: 120px;}
  100% {top: 100px;}
}

＆＃13;

<html>
<head>
	<title>preloader</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

	  <link rel="stylesheet" type="text/css" href="preloader.css">
	  <script type="text/javascript" src="preloader.js"></script>
</head>
<body>
	
	

	<div class ="container">
		<div class = "row">
			<div class="col-sm-8">
				<div class="bird">
					<img src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Twitter_bird_logo_2012.svg/1259px-Twitter_bird_logo_2012.svg.png" height="300" width="500" >
					
				</div>
			</div>
  			<div class="col-sm-4">
  				<div class="static-bird">
  					<img src="https://clipartion.com/wp-content/uploads/2015/11/love-birds-in-tree-clipart.jpeg">
	        	</div>
  			</div>
  		</div>
  	</div>
			
</body>

＆＃13;

？而分支中的另一只鸟将是静止的！如何使用CSS和JavaScript动画它？

提前致谢！

Answer 1

你可以使用CSS3 动画和转换，只需要一点点jQuery来添加一个类并开始翻译，如果你不想做它非常复杂。

我用了两个动作来飞行：X方向1个，Y方向另1个。两张图片都是绝对的。

这里是完整的代码。您可以相应地更改它：

＆＃13;

$(document).ready(function(){
  $(".bird").click(function(){
    $(this).addClass("birdmove");
  })
});

＆＃13;

.bird img{
  width: 100px;
  height: auto;
}
.static-bird img{
  width: 300px;
  height: auto;
}
.bird{
  position: absolute;
  left: 200px;
  top: 100px;
  z-index: 10;
  transition: transform 5s;
  transition-timing-function: ease;
}
.static-bird{
  position: absolute;
  right: 200px;
  top: 100px;
  z-index: 5;
}
.birdmove{
  transform: translateX(800px);
  animation: oscillate 5s;
  animation-timing-function: ease;
}
@keyframes oscillate {
  10% {top: 50px;}
  30% {top: 150px;}
  60% {top: 100px;}
  80% {top: 120px;}
  100% {top: 100px;}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class ="container">
  <div class = "row">
    <div class="col-sm-8">
      <div class="bird">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Twitter_bird_logo_2012.svg/1259px-Twitter_bird_logo_2012.svg.png" height="300" width="500">
      </div>
    </div>
    <div class="col-sm-4">
      <div class="static-bird">
        <img src="https://clipartion.com/wp-content/uploads/2015/11/love-birds-in-tree-clipart.jpeg">
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

请看下面的例子：

＆＃13;

div {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  border: 1px solid black;
  -webkit-transition: all 750ms ease-in-out;
  -moz-transition: all 750ms ease-in-out;
  -ms-transition: all 750ms ease-in-out;
  -o-transition: all 750ms ease-in-out;
  transition: all 750ms ease-in-out;
}
div:hover {
  -moz-transform: translateX(200px) translateY(40px);
  -webkit-transform: translateX(200px) translateY(40px);
  -o-transform: translateX(200px) translateY(40px);
  -ms-transform: translateX(200px) translateY(40px);
  transform: translateX(200px) translateY(40px);
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <div></div>

</body>

</html>

＆＃13;

Answer 3

您可以向.bird选择器添加CSS animation，指定鸟类应该如何飞行。要确保动画流畅，请确保使用硬件加速的transform属性，如下所示：

@keyframes hover {
  0% {
    transform: translate3d(0, -15px, 0);
  }

  100% {
    transform: translate3d(0, +15px, 0);
  }
}

.bird {
  animation: hover 2s ease-in-out infinite reverse;
}

这会让鸟儿垂直悬停。

如何使用css和js慢慢移动蓝色的推特鸟？

3 个答案: