使用CSS動畫僅箭頭

如果您檢查Toshiba's website，則會出現一個帶有移動箭頭的小鼠標圖標。顯然，他們的動畫是這樣的：使用CSS動畫僅箭頭

function iconTop() { 
$(".icon_tween").animate({ 
    opacity: 0, 
    marginTop: "15px" 
}, 1e3, function() { 
    $(".icon_tween").css({ 
     marginTop: 0, 
     opacity: 1 
    }), iconTop() 
}) 
}

..是否可以使用與CSS完全相同的動畫效果？

來源

2014-07-10 3zzy

沒有打擾點擊鏈接，但我仍然會猜測：是的。他們的動畫位置（更好地完成了transform：translate（）比margin-top）和不透明度，都得到了CSS3動畫的很好支持。 – Katana314

您還可以使用translate，而不是利潤率最高，因此，這將是更加獨立的元件佈局

@-webkit-keyframes arrow-jump { 
    0% { opacity: 0;} 
    100% { opacity: 1; 
    -webkit-transform: translateY(10px); 
    -moz-transform: translateY(10px); 
    -o-transform: translateY(10px); 
    transform: translateY(10px); 
    } 
} 
#arrow { 
    -webkit-animation: arrow-jump 1s infinite; 
    -moz-animation: arrow-jump 1s infinite 
    -o-animation:  arrow-jump 1s infinite; 
    animation:   arrow-jump 1s infinite; 
}

demo

來源

2014-07-10 20:07:45 paulitto

當然，爲什麼不呢？

小提琴：http://jsfiddle.net/98W5U/3/

代碼：

@-webkit-keyframes toshiba { 
    from{ 
     margin-top:0; 
     opacity: 1;  
    } 
    to{ 
     margin-top: 30px; 
     opacity: 0; 
    } 
} 
div { 
    -webkit-animation: toshiba 2s linear infinite; 
}

記住所有的瀏覽器前綴和不期望它的工作對舊的瀏覽器（IE，呵呵！）。

編輯這裏的箭頭以及：jsfiddle

來源

2014-07-10 19:57:42 bardzusny

哇，它的完美，謝謝！ – 3zzy

body { 
 
    background: black; 
 
} 
 

 
.arrow { 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 50%; 
 
    margin-left:-20px; 
 
    width: 40px; 
 
    height: 40px; 
 
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=); 
 
    background-size: contain; 
 
    
 
} 
 

 
.bounce { 
 
    -webkit-animation: bounce 2s infinite; 
 
    animation: bounce 2s infinite; 
 
} 
 

 
/* Scroll down indicator (bouncing) */ 
 
@-webkit-keyframes bounce { 
 
    0%, 20%, 50%, 80%, 100% { 
 
    -webkit-transform: translateY(0); } 
 
    40% { 
 
    -webkit-transform: translateY(-30px); } 
 
    60% { 
 
    -webkit-transform: translateY(-15px); } } 
 
@-moz-keyframes bounce { 
 
    0%, 20%, 50%, 80%, 100% { 
 
    -moz-transform: translateY(0); } 
 
    40% { 
 
    -moz-transform: translateY(-30px); } 
 
    60% { 
 
    -moz-transform: translateY(-15px); } } 
 
@keyframes bounce { 
 
    0%, 20%, 50%, 80%, 100% { 
 
    -webkit-transform: translateY(0); 
 
    -moz-transform: translateY(0); 
 
    -ms-transform: translateY(0); 
 
    -o-transform: translateY(0); 
 
    transform: translateY(0); } 
 
    40% { 
 
    -webkit-transform: translateY(-30px); 
 
    -moz-transform: translateY(-30px); 
 
    -ms-transform: translateY(-30px); 
 
    -o-transform: translateY(-30px); 
 
    transform: translateY(-30px); } 
 
    60% { 
 
    -webkit-transform: translateY(-15px); 
 
    -moz-transform: translateY(-15px); 
 
    -ms-transform: translateY(-15px); 
 
    -o-transform: translateY(-15px); 
 
    transform: translateY(-15px); } }

<div class="arrow bounce">

來源

2015-02-26 10:58:17 RAJ

太棒了......它幫助我很多，你可以告訴我背景圖片中的數據類型：url（）..... ???因爲它太長了...... –

使用CSS動畫僅箭頭

回答

相關問題