Question

请仔细阅读我的问题。我已经过了2天，但我仍然无法弄明白。

如果你到这里http://thekitchen.com，你会看到动画双箭头http://prntscr.com/ewcvn4

我已经多次在互联网上搜索并复制了他们的代码，但它没有用。

有没有办法制作类似的动画双箭头？

另外，我需要网站的动画。我知道Animate CSS和WOW JS。但它不能迭代动画。那么如何在我的网站上实现他们的动画？

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>SVG Animation</title>
	<style>
		body{
			background-color: green;
		}
		.narrative-inner-slide-cta{
			position: absolute
		}
		.narrative-inner-slide-cta {
		    list-style: none;
		    display: -ms-flexbox;
		    display: -webkit-flex;
		    display: flex
		}
		.narrative-inner-slide-cta {
		    -ms-flex-align: center;
		    -webkit-align-items: center;
		    align-items: center
		}
		.narrative-inner-slide-cta {
		    -ms-flex-direction: column;
		    -webkit-flex-direction: column;
		    flex-direction: column
		}
		.narrative-inner-slide-cta {
		    bottom: 3rem;
		    left: 0;
		    right: 0;
		    width: 5rem;
		    margin-right: auto;
		    margin-left: auto;
		    opacity: 0
		}
		.narrative-inner-slide-cta {
		    -moz-animation: show-slide-cta .5s ease-in-out forwards .7s;
		    -webkit-animation: show-slide-cta .5s ease-in-out forwards .7s;
		    animation: show-slide-cta .5s ease-in-out forwards .7s
		}

		.arrowCta {
		    bottom: 0;
		    background-color: transparent;
		    color: #3a261e;
		    position: absolute;
		    left: 0;
		    right: -3px;
		    margin-right: auto;
		    margin-left: auto;
		    width: .2rem;
		    -moz-transform: rotate(45deg);
		    -ms-transform: rotate(45deg);
		    -webkit-transform: rotate(45deg);
		    transform: rotate(45deg)
		}
		.arrowCta--alt{
		    color: #fff
		}
		.arrowCta:after,
		.arrowCta:before {
		    border-right: 3px solid #3a261e;
		    border-bottom: 3px solid #3a261e;
		    border-left: 0 solid transparent;
		    border-top: 0 solid transparent;
		    top: 0;
		    left: 0;
		    opacity: 1;
		    -webkit-font-smoothing: antialiased;
		    height: .75rem;
		    width: .75rem
		}
		@media only screen and (min-width: 40.0625em) {
		    .arrowCta:after,
		    .arrowCta:before {
		        height: 1.125rem;
		        width: 1.125rem;
		        bottom: 1.125rem
		    }
		}
		.arrowCta:before {
		    -moz-animation: top-arrow 2s infinite;
		    -webkit-animation: top-arrow 2s infinite;
		    animation: top-arrow 2s infinite
		}
		.arrowCta:after {
		    -moz-animation: bottom-arrow 2s infinite;
		    -webkit-animation: bottom-arrow 2s infinite;
		    animation: bottom-arrow 2s infinite
		}
		.arrowCta--alt:after,
		.arrowCta--alt:before {
		    border-right: 3px solid #fff;
		    border-bottom: 3px solid #fff
		}

		.arrowCta:after,
		.arrowCta:before{
		    display: block;
		    position: absolute;
		}
		.arrowCta--alt:after,
		.arrowCta--alt:before,
		.arrowCta:after,
		.arrowCta:before {
		    content: ""
		}
	</style>
</head>
<body>
	<div class="narrative-inner-slide-cta">
        <button class="arrowCta  arrowCta--alt"></button>
    </div>
</body>
</html>

＆＃13;

Answer 1

您缺少一些重要的CSS，可以根据需要设置动画。在这里，我创建了一个jsfiddle - 检查出来......

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

Answer 2

是的，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');
        },
    });

动画双箭头 - CSS

2 个答案: