基本上我收到了更改 codepen 的帮助并对最终结果感到满意，但是当我尝试在 html 网页上实现它时，它无法正确呈现，我不确定哪里出了问题，这里是链接到代码笔http://codepen.io/anon/pen/hsepG
这是我尝试的实现：
<!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 应该在单独的样式表中吗？
谢谢
