动画双箭头 - 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

回答

相关问题