为什么弹跳图标不能在我的页面上移动？（CSS）

我发现this code并试图将其放在我的网页上。我粘贴它，但它没有正常工作 - 我看到了图标，但它根本不动。我将代码粘贴到jsfiddle，它也不能在那里工作......我做错了什么？为什么弹跳图标不能在我的页面上移动？（CSS）

@include keyframes(bounce) { 
    0%, 20%, 50%, 80%, 100% { 
    @include transform(translateY(0)); 
    } 
    40% { 
    @include transform(translateY(-30px)); 
    } 
    60% { 
    @include transform(translateY(-15px)); 
    } 
} 


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 { 
    @include animation(bounce 2s infinite); 
}

来源

2015-04-22 randomuser1

因为原始codepen设置为使用SCSS，而jsfiddle不是。点击Codepen中的“查看编译”按钮，然后复制粘贴。 – JJJ

查看hover.css（http://ianlunn.github.io/Hover/）以获得您想要的效果。 – odedta

工作小提琴：http://jsfiddle.net/6y2gech4/2/ –

codepen版本使用SCSS而不是浏览器（和jsfiddle）不支持的普通CSS。因此，您必须点击codepen CSS选项卡上的view compiled按钮以获取实际的CSS代码（确实可以按原样进行复制粘贴）

来源

2015-04-22 09:56:55

为什么弹跳图标不能在我的页面上移动？ （CSS）

回答

相关问题

为什么弹跳图标不能在我的页面上移动？（CSS）