现代的CSS/jQuery的气泡动画

基本上我收到了改变一个codepen的帮助，并且对最终结果感到满意，但是当我试图在html网页上实现它时，它没有正确呈现，我不是确定哪里出了问题，这里是链接到代码笔http://codepen.io/anon/pen/hsepG 现代的CSS/jQuery的气泡动画

这里是我尝试实现：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
<title>test</title> 
<style> 
@mixin animate($animation, $duration, $repeat, $easing) { 
-webkit-animation: $animation $duration $repeat $easing; 
    -moz-animation: $animation $duration $repeat $easing; 
    -ms-animation: $animation $duration $repeat $easing; 
     animation: $animation $duration $repeat $easing; 
} 

@mixin keyframes($name) { 
@-webkit-keyframes #{$name} { 
    @content; 
} 
@-moz-keyframes #{$name} { 
    @content; 
} 
@-ms-keyframes #{$name} { 
    @content; 
} 
@keyframes #{$name} { 
    @content; 
} 
} 

html, 
body { 
height: 100%; 
} 

body { 
background: #09f; 

@include background-image(linear-gradient(left, #09f, #45d1ff)); 
} 

.bubble-toggle { 
position: absolute; 
top: 10px; 
right: 10px; 
padding: 10px; 
background: rgba(255,255,255,0.5); 
font-family: sans-serif; 
font-size: 13px; 
color: #333; 

&:hover { 
background: rgba(255,255,255,0.75); 
} 
} 

.bubbles { 
position: relative; 
overflow: hidden; 
width: 100%; 
height: 100%; 
margin: 0 auto; 
} 

.bubble-container { 
position: absolute; 
bottom: 0; 

@include animate(bubblerise, 4s, infinite, ease-in); 
@include opacity(0); 
} 

.bubble { 
width: 6px; 
height: 6px; 
margin: 0 auto; 
border: 1px solid rgba(255,255,255,0.5); 
background: rgba(255,255,255,0.25); 

@include border-radius(10px); 
@include animate(bubblewobble, 0.4s, infinite, linear); 
} 

@include keyframes(bubblerise) { 
0% {  
    bottom: 0; 

@include opacity(0); 
} 
5% {  
    bottom: 0; 

@include opacity(1); 
} 
99% { 
    @include opacity(1); 
} 
100% {  
    bottom: 100%; 

@include opacity(0); 
} 
} 

@include keyframes(bubblewobble) { 
0% { 
    margin-left: 0; 
} 
50% { 
    margin-left: 2px; 
} 
} 
</style> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
</head> 

<body> 
<div class="bubbles"></div> 
<a class="bubble-toggle" href="#">Bubbles Off</a> 

<script type="text/javascript"> 
$(document).ready(function() { 
var $bubbles = $('.bubbles'); 

function bubbles() { 

// Settings 
var min_bubble_count = 20, // Minimum number of bubbles 
    max_bubble_count = 40, // Maximum number of bubbles 
    min_bubble_size = 3, // Smallest possible bubble diameter (px) 
    max_bubble_size = 8; // Largest possible bubble diameter (px) 

// Calculate a random number of bubbles based on our min/max 
var bubbleCount = min_bubble_count + Math.floor(Math.random() * (max_bubble_count + 1)); 

// Create the bubbles 
for (var i = 0; i < bubbleCount; i++) { 
$bubbles.append('<div class="bubble-container"><div class="bubble"></div></div>'); 
} 

// Now randomise the various bubble elements 
$bubbles.find('.bubble-container').each(function(){ 

// Randomise the bubble positions (0 - 100%) 
var pos_rand = Math.floor(Math.random() * 101); 

// Randomise their size 
var size_rand = min_bubble_size + Math.floor(Math.random() * (max_bubble_size + 1)); 

// Randomise the time they start rising (0-15s) 
var delay_rand = Math.floor(Math.random() * 16); 

// Randomise their speed (3-8s) 
var speed_rand = 0.5 + Math.random() * 2; 

// Cache the this selector 
var $this = $(this); 

// Apply the new styles 
$this.css({ 
    'left' : pos_rand + '%', 

    '-webkit-animation-duration' : speed_rand + 's', 
    '-moz-animation-duration' : speed_rand + 's', 
    '-ms-animation-duration' : speed_rand + 's', 
    'animation-duration' : speed_rand + 's', 

    '-webkit-animation-delay' : delay_rand + 's', 
    '-moz-animation-delay' : delay_rand + 's', 
    '-ms-animation-delay' : delay_rand + 's', 
    'animation-delay' : delay_rand + 's' 
}); 

$this.children('.bubble').css({ 
    'width' : size_rand + 'px', 
    'height' : size_rand + 'px' 
}); 

}); 
} 

// In case users value their laptop battery life 
// Allow them to turn the bubbles off 
$('.bubble-toggle').click(function(){ 
if($bubbles.is(':empty')) { 
bubbles(); 
$bubbles.show(); 
$(this).text('Bubbles Off'); 
} else { 
$bubbles.fadeOut(function(){ 
    $(this).empty(); 
}); 
$(this).text('Bubbles On'); 
} 

return false; 
}); 

bubbles(); 

}); 
</script> 
</body> 
</html>

如果我的CSS是在一个单独的样式表？

谢谢

来源

2013-10-22 Josh Wade

包装在$（文件）jQuery代码。就绪（）函数 –

仍然一无所获：/ –

您的codepen使用SCSS，而不是直接的CSS。见http://sass-lang.com。

因此，要在您自己的网页上使用它，您需要编译SCSS，或从代码笔复制编译的CSS。要从codepen中获取已编译的CSS，请点击(SCSS)。

enter image description here

来源

2013-10-22 21:16:03

现代的CSS/jQuery的气泡动画

回答

相关问题