個人網站可以加哪些好看的動效

點擊查看實際效果

鼠標點擊愛心

<script type="text/javascript">
!function(e, t, a) {
    function r() {
        for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
        requestAnimationFrame(r)
    }
    function n() {
        var t = "function" == typeof e.onclick && e.onclick;
        e.onclick = function(e) {
            t && t(),
            o(e)
        }
    }
    function o(e) {
        var a = t.createElement("div");
        a.className = "heart",
        s.push({
            el: a,
            x: e.clientX - 5,
            y: e.clientY - 5,
            scale: 1,
            alpha: 1,
            color: c()
        }),
        t.body.appendChild(a)
    }
    function i(e) {
        var a = t.createElement("style");
        a.type = "text/css";
        try {
            a.appendChild(t.createTextNode(e))
        } catch(t) {
            a.styleSheet.cssText = e
        }
        t.getElementsByTagName("head")[0].appendChild(a)
    }
    function c() {
        return "rgb(" + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + ")"
    }
    var s = [];
    e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame ||
    function(e) {
        setTimeout(e, 1e3 / 60)
    },
    i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),
    n(),
    r()
} (window, document);

</script>

雪花（1）

<script type="text/javascript">
    /* 控制下雪 */
    function snowFall(snow) {
        /* 可配置屬性 */
        snow = snow || {};
        this.maxFlake = snow.maxFlake || 200;   /* 最多片數 */
        this.flakeSize = snow.flakeSize || 10;  /* 雪花形狀 */
        this.fallSpeed = snow.fallSpeed || 1;   /* 墜落速度 */
    }
    /* 兼容寫法 */
    requestAnimationFrame = window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        function(callback) { setTimeout(callback, 1000 / 60); };

    cancelAnimationFrame = window.cancelAnimationFrame ||
        window.mozCancelAnimationFrame ||
        window.webkitCancelAnimationFrame ||
        window.msCancelAnimationFrame ||
        window.oCancelAnimationFrame;
    /* 開始下雪 */
    snowFall.prototype.start = function(){
        /* 創建畫布 */
        snowCanvas.apply(this);
        /* 創建雪花形狀 */
        createFlakes.apply(this);
        /* 畫雪 */
        drawSnow.apply(this)
    }
    /* 創建畫布 */
    function snowCanvas() {
        /* 添加Dom結點 */
        var snowcanvas = document.createElement("canvas");
        snowcanvas.id = "snowfall";
        snowcanvas.width = window.innerWidth;
        snowcanvas.height = document.body.clientHeight;
        snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");
        document.getElementsByTagName("body")[0].appendChild(snowcanvas);
        this.canvas = snowcanvas;
        this.ctx = snowcanvas.getContext("2d");
        /* 窗口大小改變的處理 */
        window.onresize = function() {
            snowcanvas.width = window.innerWidth;
            /* snowcanvas.height = window.innerHeight */
        }
    }
    /* 雪運動對象 */
    function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
        this.x = Math.floor(Math.random() * canvasWidth);   /* x座標 */
        this.y = Math.floor(Math.random() * canvasHeight);  /* y座標 */
        this.size = Math.random() * flakeSize + 2;          /* 形狀 */
        this.maxSize = flakeSize;                           /* 最大形狀 */
        this.speed = Math.random() * 1 + fallSpeed;         /* 墜落速度 */
        this.fallSpeed = fallSpeed;                         /* 墜落速度 */
        this.velY = this.speed;                             /* Y方向速度 */
        this.velX = 0;                                      /* X方向速度 */
        this.stepSize = Math.random() / 30;                 /* 步長 */
        this.step = 0                                       /* 步數 */
    }
    flakeMove.prototype.update = function() {
        var x = this.x,
            y = this.y;
        /* 左右擺動(餘弦) */
        this.velX *= 0.98;
        if (this.velY <= this.speed) {
            this.velY = this.speed
        }
        this.velX += Math.cos(this.step += .05) * this.stepSize;

        this.y += this.velY;
        this.x += this.velX;
        /* 飛出邊界的處理 */
        if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
            this.reset(canvas.width, canvas.height)
        }
    };
    /* 飛出邊界-放置最頂端繼續墜落 */
    flakeMove.prototype.reset = function(width, height) {
        this.x = Math.floor(Math.random() * width);
        this.y = 0;
        this.size = Math.random() * this.maxSize + 2;
        this.speed = Math.random() * 1 + this.fallSpeed;
        this.velY = this.speed;
        this.velX = 0;
    };
    // 渲染雪花-隨機形狀（此處可修改雪花顏色！！！）
    flakeMove.prototype.render = function(ctx) {
        var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
        snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)");  /* 此處是雪花顏色，默認是白色 */
        snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改爲其他顏色，請自行查 */
        snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)");    /* 找16進制的RGB 顏色代碼。 */
        ctx.save();
        ctx.fillStyle = snowFlake;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fill();
        ctx.restore();
    };
    /* 創建雪花-定義形狀 */
    function createFlakes() {
        var maxFlake = this.maxFlake,
            flakes = this.flakes = [],
            canvas = this.canvas;
        for (var i = 0; i < maxFlake; i++) {
            flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))
        }
    }
    /* 畫雪 */
    function drawSnow() {
        var maxFlake = this.maxFlake,
            flakes = this.flakes;
        ctx = this.ctx, canvas = this.canvas, that = this;
        /* 清空雪花 */
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for (var e = 0; e < maxFlake; e++) {
            flakes[e].update();
            flakes[e].render(ctx);
        }
        /*  一幀一幀的畫 */
        this.loop = requestAnimationFrame(function() {
            drawSnow.apply(that);
        });
    }
    /* 調用及控制方法 */
    var snow = new snowFall({maxFlake:60});
    snow.start();
</script>

雪花（二）

<script type="text/javascript">
(function($){
$.fn.snow = function(options){
var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('&#10052;'),
documentHeight  = $(document).height(),
documentWidth = $(document).width(),
defaults = {
  minSize  : 10,
  maxSize  : 20,
  newOn  : 1000,
  flakeColor : "#AFDAEF" /* 此處可以定義雪花顏色，若要白色可以改爲#FFFFFF */
},
options = $.extend({}, defaults, options);
var interval= setInterval( function(){
var startPositionLeft = Math.random() * documentWidth - 100,
startOpacity = 0.5 + Math.random(),
sizeFlake = options.minSize + Math.random() * options.maxSize,
endPositionTop = documentHeight - 200,
endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
durationFall = documentHeight * 10 + Math.random() * 5000;
$flake.clone().appendTo('body').css({
  left: startPositionLeft,
  opacity: startOpacity,
  'font-size': sizeFlake,
  color: options.flakeColor
}).animate({
  top: endPositionTop,
  left: endPositionLeft,
  opacity: 0.2
},durationFall,'linear',function(){
  $(this).remove()
});
}, options.newOn);
    };
})(jQuery);
$(function(){
    $.fn.snow({
     minSize: 5, /* 定義雪花最小尺寸 */
     maxSize: 50,/* 定義雪花最大尺寸 */
     newOn: 300  /* 定義密集程度，數字越小越密集 */
    });
});
</script>