動畫雙箭頭 - CSS

請仔細閱讀我的問題。我已經過了2天，但仍然無法弄清楚。動畫雙箭頭 - CSS

如果你去這裏http://thekitchen.com你會看到動畫雙箭頭http://prntscr.com/ewcvn4

我已經在互聯網上搜索了很多次，複製了他們的代碼，但它不工作。

有沒有什麼辦法讓類似的動畫雙箭？

此外，我需要該網站的動畫。我知道Animate CSS和WOW JS。但它不能迭代動畫。那麼如何在我的網站上實現他們的動畫呢？

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <title>SVG Animation</title> 
 
\t <style> 
 
\t \t body{ 
 
\t \t \t background-color: green; 
 
\t \t } 
 
\t \t .narrative-inner-slide-cta{ 
 
\t \t \t position: absolute 
 
\t \t } 
 
\t \t .narrative-inner-slide-cta { 
 
\t \t  list-style: none; 
 
\t \t  display: -ms-flexbox; 
 
\t \t  display: -webkit-flex; 
 
\t \t  display: flex 
 
\t \t } 
 
\t \t .narrative-inner-slide-cta { 
 
\t \t  -ms-flex-align: center; 
 
\t \t  -webkit-align-items: center; 
 
\t \t  align-items: center 
 
\t \t } 
 
\t \t .narrative-inner-slide-cta { 
 
\t \t  -ms-flex-direction: column; 
 
\t \t  -webkit-flex-direction: column; 
 
\t \t  flex-direction: column 
 
\t \t } 
 
\t \t .narrative-inner-slide-cta { 
 
\t \t  bottom: 3rem; 
 
\t \t  left: 0; 
 
\t \t  right: 0; 
 
\t \t  width: 5rem; 
 
\t \t  margin-right: auto; 
 
\t \t  margin-left: auto; 
 
\t \t  opacity: 0 
 
\t \t } 
 
\t \t .narrative-inner-slide-cta { 
 
\t \t  -moz-animation: show-slide-cta .5s ease-in-out forwards .7s; 
 
\t \t  -webkit-animation: show-slide-cta .5s ease-in-out forwards .7s; 
 
\t \t  animation: show-slide-cta .5s ease-in-out forwards .7s 
 
\t \t } 
 

 
\t \t .arrowCta { 
 
\t \t  bottom: 0; 
 
\t \t  background-color: transparent; 
 
\t \t  color: #3a261e; 
 
\t \t  position: absolute; 
 
\t \t  left: 0; 
 
\t \t  right: -3px; 
 
\t \t  margin-right: auto; 
 
\t \t  margin-left: auto; 
 
\t \t  width: .2rem; 
 
\t \t  -moz-transform: rotate(45deg); 
 
\t \t  -ms-transform: rotate(45deg); 
 
\t \t  -webkit-transform: rotate(45deg); 
 
\t \t  transform: rotate(45deg) 
 
\t \t } 
 
\t \t .arrowCta--alt{ 
 
\t \t  color: #fff 
 
\t \t } 
 
\t \t .arrowCta:after, 
 
\t \t .arrowCta:before { 
 
\t \t  border-right: 3px solid #3a261e; 
 
\t \t  border-bottom: 3px solid #3a261e; 
 
\t \t  border-left: 0 solid transparent; 
 
\t \t  border-top: 0 solid transparent; 
 
\t \t  top: 0; 
 
\t \t  left: 0; 
 
\t \t  opacity: 1; 
 
\t \t  -webkit-font-smoothing: antialiased; 
 
\t \t  height: .75rem; 
 
\t \t  width: .75rem 
 
\t \t } 
 
\t \t @media only screen and (min-width: 40.0625em) { 
 
\t \t  .arrowCta:after, 
 
\t \t  .arrowCta:before { 
 
\t \t   height: 1.125rem; 
 
\t \t   width: 1.125rem; 
 
\t \t   bottom: 1.125rem 
 
\t \t  } 
 
\t \t } 
 
\t \t .arrowCta:before { 
 
\t \t  -moz-animation: top-arrow 2s infinite; 
 
\t \t  -webkit-animation: top-arrow 2s infinite; 
 
\t \t  animation: top-arrow 2s infinite 
 
\t \t } 
 
\t \t .arrowCta:after { 
 
\t \t  -moz-animation: bottom-arrow 2s infinite; 
 
\t \t  -webkit-animation: bottom-arrow 2s infinite; 
 
\t \t  animation: bottom-arrow 2s infinite 
 
\t \t } 
 
\t \t .arrowCta--alt:after, 
 
\t \t .arrowCta--alt:before { 
 
\t \t  border-right: 3px solid #fff; 
 
\t \t  border-bottom: 3px solid #fff 
 
\t \t } 
 

 
\t \t .arrowCta:after, 
 
\t \t .arrowCta:before{ 
 
\t \t  display: block; 
 
\t \t  position: absolute; 
 
\t \t } 
 
\t \t .arrowCta--alt:after, 
 
\t \t .arrowCta--alt:before, 
 
\t \t .arrowCta:after, 
 
\t \t .arrowCta:before { 
 
\t \t  content: "" 
 
\t \t } 
 
\t </style> 
 
</head> 
 
<body> 
 
\t <div class="narrative-inner-slide-cta"> 
 
     <button class="arrowCta arrowCta--alt"></button> 
 
    </div> 
 
</body> 
 
</html>

來源

2017-04-14 Mofizul I

你缺少一些重要的CSS能夠爲要動畫這一點。這是它，我創建了一個jsfiddle - 檢查出來...

<button class="arrowCta arrowCta--alt "></button>

來源

2017-04-14 12:03:04 Novakinify

非常感謝您的評論。你見過http://thekitchen.com/中的內容（http://prntscr.com/ewe2s2）嗎？當你從上到下滾動時，內容fadeInUp。當您滾動到底部時，內容fadeToBottom。如何才能做到這一點？ –

我認爲它是animate.css和https://github.com/alvarotrigo/fullPage.js的組合 - 完整頁面插件。我已經做了與另一個插件類似的佈局，但忘記了我使用了哪一個，很久以前。你可以訪問github頁面並查看它。並且請不要忘記標記這個答案，如果它對你來說是正確的，謝謝... – Novakinify

它的工作沒有Animate CSS- https://jsfiddle.net/ThemePackNet/6bb3LLsy/ :) –

是的，Animate CSS正在工作。現在動畫迭代...在我的代碼下面 -

$('#fullpage').fullpage({ 
     anchors: ['section0', 'section1', 'section2','section3', 'section4', 'section5', 'section6'], 
     slideSelector: '.fullpagejsslide', 
     sectionsColor: [' #CAC8C2', '#E4FE06', '#CAC8C2', '#8DD4D6', '#FFD4C9', '#CAC8C2', '#8DD4D6'], 

     onLeave: function(index, nextIndex, direction){ 
      $('.title-desc h2').removeClass('animated fadeInUp'); 
      $('.title-desc p').removeClass('animated fadeInUp'); 
      $('.goto-contact').removeClass('animated fadeInUp'); 
      $('#contactForm').removeClass('animated fadeInUp'); 
     }, 
     afterLoad: function(anchorLink, index){ 
      $('.title-desc h2').addClass('animated fadeInUp'); 
      $('.title-desc p').addClass('animated fadeInUp'); 
      $('.goto-contact').addClass('animated fadeInUp'); 
      $('#contactForm').addClass('animated fadeInUp'); 
     }, 
     afterRender: function(){ 
      $('.title-desc h2').addClass('animated fadeInUp'); 
      $('.title-desc p').addClass('animated fadeInUp'); 
      $('.goto-contact').addClass('animated fadeInUp'); 
      $('#contactForm').addClass('animated fadeInUp'); 
     }, 
    });

來源

2017-04-14 15:39:33

這裏提供了一個示例小提琴：https：//jsfiddle.net/sd16syz9/11/ –

動畫雙箭頭 - CSS

回答

相關問題