每天一个小动画。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery实现云朵随机飘动的效果</title>
<style>
*{margin:0;padding:0;}
body, html{width:100%;height:100%;}
body{background:url("https://img-blog.csdn.net/20140707115026203?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcnVpemhlbmd5dW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast") repeat-x;}
#mainBody{position:relative;width:100%;height:100%;}
.cloud{position:absolute;top:0px;left:0px;width:100%;height:100%;background:url("https://img-blog.csdn.net/20140707115120968?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcnVpemhlbmd5dW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast") no-repeat;z-index:1;opacity:0.8;}
#cloud2{z-index:3;}
#weather{background:url("https://img-blog.csdn.net/20140707115151984?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcnVpemhlbmd5dW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast") no-repeat;border-radius:90px;width:150px;height:150px;position:absolute;left:440px;top:30px;z-index:2;}
#weather img{margin:30px -90px;}
</style>
</head>
<body>
<div id="mainBody">
<div id="cloud1" class="cloud"></div>
<div id="cloud2" class="cloud"></div>
</div>
<div id="weather">
<img src="https://img-blog.csdn.net/20140707115120968?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcnVpemhlbmd5dW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" width="300"/>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Cloud Float...
$(function(){
var timer = null;
var offset1 = 450; //动画一的初始位置
var offset2 = 0; //动画二的初始位置
var $body = $('body');
var $main = $('#mainBody');
var $mainW = $main.outerWidth();
var $cloud1 = $('#cloud1');
var $cloud2 = $('#cloud2');
$body.hover(function(){
// 判断是否有定时器
if(timer){
clearInterval(timer);
}
},function(){
timer = setInterval(function(){
// 极界判断
if(offset1 >= $mainW){
offset1 = -580;
}
if(offset2 >= $mainW){
offset2 = -580;
}
// 物体加速度
offset1 += 1.1;
offset2 += 1;
// 位置重定位
$cloud1.css({"background-position": offset1 + 'px 60px'});
$cloud2.css({"background-position": offset2 + 'px 340px'});
},70);
}).trigger('mouseleave');
});
</script>
</body>
</html>