如何使用css和js慢慢移動藍色twitter小鳥？

如何讓小鳥從樹上飛回飛？它現在向前發展，我希望它轉身回來......怎麼做？如何使用css和js慢慢移動藍色twitter小鳥？

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

.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;} 
 
}

<html> 
 
<head> 
 
\t <title>preloader</title> 
 
\t <meta charset="utf-8"> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
\t <link rel="stylesheet" type="text/css" href="preloader.css"> 
 
\t <script type="text/javascript" src="preloader.js"></script> 
 
</head> 
 
<body> 
 
\t 
 
\t 
 

 
\t <div class ="container"> 
 
\t \t <div class = "row"> 
 
\t \t \t <div class="col-sm-8"> 
 
\t \t \t \t <div class="bird"> 
 
\t \t \t \t \t <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" > 
 
\t \t \t \t \t 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
    \t \t \t <div class="col-sm-4"> 
 
    \t \t \t \t <div class="static-bird"> 
 
    \t \t \t \t \t <img src="https://clipartion.com/wp-content/uploads/2015/11/love-birds-in-tree-clipart.jpeg"> 
 
\t   \t </div> 
 
    \t \t \t </div> 
 
    \t \t </div> 
 
    \t </div> 
 
\t \t \t 
 
</body>

？而分支中的另一隻鳥將是靜態的！如何使用CSS和JavaScript對其進行動畫處理？

在此先感謝！

來源

2016-10-17 prathana dan

你可以使用CSS3和JS – MatejMecka

可以使用CSS3 動畫和轉型做只有和小jQuery噸o如果您不想使其變得非常複雜，請添加課程並開始翻譯。

我已經使用了兩次鳥的飛行動作：1次在X方向，另外一次在Y方向。兩幅圖像都是絕對定位的。

以下是完整的代碼。您可以相應地改變它：

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

.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;} 
 
}

<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>

來源

2016-10-17 06:41:44

如何修改代碼，如果我想的鳥，只要我進入的HTML頁面飛？不是當我點擊鳥.. –

你需要JavaScript的。沒有任何事件你不能使用轉換。 – 2016-10-17 08:02:19

好的，非常感謝:)我有一個疑問，現在它向前飛行，如果我想要它嘮叨方向並回到起始位置，我該怎麼辦？ –

您可以將CSS animation添加到.bird選擇指定鳥如何飛行。爲了確保動畫流暢，請確保您使用硬件加速transform財產，像這樣：

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

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

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

這將使鳥垂直懸停。

來源

2016-10-17 06:22:52 Peter

看看下面的例子：

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); 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 

 
    <div></div> 
 

 
</body> 
 

 
</html>

來源

2016-10-17 06:24:32 Farhad

使用GSAP驚人的動畫在您的網頁

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> 

TweenMax.to("bird1",3,{ 
    left:400, 
    scale:1.4 
})

來源

2016-10-17 06:37:13

如何使用css和js慢慢移動藍色twitter小鳥？

回答

相關問題