jquery 实现的一个随机云标签网页背景-优快云博客

本文介绍了一种利用CSS3的rotate属性实现的背景动画效果，通过JavaScript动态生成页面背景上的字符并设置其大小、位置及旋转角度，适用于现代浏览器。需要注意的是，在低版本浏览器中可能会出现显示不一致的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

几年前给自己的博客写的装X用的。。。哈哈哈。。。

$(function(){

    $('body').append('

<div class="_bg" style="position:absolute;top:0;left:0;width:100%;height: 100%;overflow:hidden;z-index:-1;"></div>

');

    var _bg = $("._bg");    //背景
    var _font_size = 300;   //最大字体
    var _fade = 0.5;        //内容透明度
    var _color = '';        //内容颜色 留空则随机
    //设置背景高度
    _bg.height($(window).height()); //$('body').height(),$(window).height(),500
    //给背景添加内容 在这里自定义内容
    var _content = '<i>A</i><i >B</i><i >V</i><i >T</i><i >D</i><i >F</i><i >G</i><i >W</i><i >S</i><i >Q</i>';
    _bg.html(_content);

    _bg.children().each(function(){     //随机背景内容的 大小 位置 旋转
        $(this).css({
        'position':'absolute',
        '-webkit-transform':"rotate("+Math.ceil(Math.random()*360)+"deg)",
        '-moz-transform':"rotate("+Math.ceil(Math.random()*360)+"deg)",
        '-ms-transform':"rotate("+Math.ceil(Math.random()*360)+"deg)",
        'font-size':Math.ceil(Math.random()*_font_size)+'px',
        'top':Math.ceil(Math.random()*_bg.height())+'px',
        'left':Math.ceil(Math.random()*_bg.width())+'px'
        });
        if(_color){
            $(this).css('color',_color);
        }else{
            $(this).css('color','#'+Math.ceil(Math.random()*1000000));
        }
        $(this).fadeTo(0,Math.random());
    });
    //设置整体透明度
    _bg.fadeTo(0,_fade);
});

由于使用了css3的旋转属性，一些低版本浏览器可能效果不太一样。。。

记得加载jquery包。。。

转载于:https://my.oschina.net/u/2399303/blog/795700