网站特效

特效一 网站背景粒子动画

GIF.gif

实现方法很简单
引入js 即可

github地址：https://github.com/hustcc/canvas-nest.js

参数说明
color 线条颜色 ,
zIndex 层级，
opacity 透明度（0-1）
count 数量

特效二 网站刷新loading特效1

wb_3_2.gif

HTML、CSS

JS

$(function(){
    $("#loader-wrapper").fadeOut(1000); 
})

特效三 网站刷新loading特效2

image.png

HTML、CSS

    

#progress {
    position:fixed;
    top: 0;
    z-index: 99999;
    height: 2px;
    background:#1e9fff;
    transition:opacity 100ms linear
}
#progress.done {
    opacity:0
}
#progress span {
    position:absolute;
    height:2px;
    -webkit-box-shadow:#b91f1f 1px 0 6px 1px;
    -webkit-border-radius:100%;
    opacity:1;
    width:150px;
    right:-10px;
    -webkit-animation:pulse 2s ease-out 0s infinite;
}
@-webkit-keyframes pulse {
    30% {opacity:.1 } 
    60% {opacity:0; }
    100% {opacity:.1 } 
}

JS

$({property: 0}).animate({property: 100}, {
    duration: 1000,
    step: function() {
        var percentage = Math.round(this.property);
        $('#progress').css('width',  percentage+"%");
         if(percentage == 100) {
             $("#progress").addClass("done");//完成，隐藏进度条
         }
    }
});

特效四 输入框打字冒光特效

2597553-484d160921f08790.gif

GitHub地址 https://github.com/JoelBesada/activate-power-mode
step1 引入js

step2 配置参数

特效五 输入框中生成打字动画效果文本占位符

GIF.gif

step1 引入js

step2 配置参数