网站特效

特效一 网站背景粒子动画

GIF.gif

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

<script type='text/javascript' color='0,0,0' zIndex='-1' opacity='1' count='99' src='canvas-nest.min.js'></script>

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

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

特效二 网站刷新loading特效1

wb_3_2.gif

HTML、CSS

<style>
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    -webkit-animation: spin 2s linear infinite;
    /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite;
    /* Chrome, Firefox 16+, IE 10+, Opera */
    z-index: 1001;
}
#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e73c3c;
    -webkit-animation: spin 3s linear infinite;
    /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 3s linear infinite;
    /* Chrome, Firefox 16+, IE 10+, Opera */
}
#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: spin 1.5s linear infinite;
    /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 1.5s linear infinite;
    /* Chrome, Firefox 16+, IE 10+, Opera */
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);
        /* IE 9 */
        transform: rotate(0deg);
        /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);
        /* IE 9 */
        transform: rotate(360deg);
        /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);
        /* IE 9 */
        transform: rotate(0deg);
        /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);
        /* IE 9 */
        transform: rotate(360deg);
        /* Firefox 16+, IE 10+, Opera */
    }
}
#loader-wrapper .loader-section {
    position: fixed;
    top: 0;
    width: 51%;
    height: 100%;
    background: #fff;
    z-index: 1000;
}
#loader-wrapper .loader-section.section-left {
    left: 0;
}
#loader-wrapper .loader-section.section-right {
    right: 0;
}
/* Loaded styles */
.loaded #loader-wrapper .loader-section.section-left {
    -webkit-transform: translateX(-100%);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateX(-100%);
    /* IE 9 */
    transform: translateX(-100%);
    /* Firefox 16+, IE 10+, Opera */
    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
}
.loaded #loader-wrapper .loader-section.section-right {
    -webkit-transform: translateX(100%);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateX(100%);
    /* IE 9 */
    transform: translateX(100%);
    /* Firefox 16+, IE 10+, Opera */
    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
}
.loaded #loader {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
    transition: all 0.3s ease-out;
    /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
}
.loaded #loader-wrapper {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateY(-100%);
    /* IE 9 */
    transform: translateY(-100%);
    /* Firefox 16+, IE 10+, Opera */
    -webkit-transition: all 0.3s 1s ease-out;
    /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
    transition: all 0.3s 1s ease-out;
    /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
}
 
</style>
<div id="loader-wrapper">
    <div id="loader"></div>
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>
</div>

JS

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

特效三 网站刷新loading特效2

image.png

HTML、CSS

<div id="progress">
    <span></span>
</div>
#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

<script type="text/javascript" src="__STATIC__/index/js/activate-power-mode.js" ></script>

step2 配置参数

<script>
    POWERMODE.colorful = true; // 火花各种颜色  默认只黑色
    POWERMODE.shake = false; // 关闭打字屏幕颤抖效果
    document.body.addEventListener('input', POWERMODE);   // 所有input 框和textarea框都会加上
    // document.getElementById("sss").addEventListener('input', POWERMODE);
</script>

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

GIF.gif

step1 引入js

<script type="text/javascript"  src="__STATIC__/index/js/placeholderTypewriter.js"></script>

step2 配置参数

<script type="text/javascript">
    $('.search_key').placeholderTypewriter({text: ["Are you ok?", "I'm fine,Thanks and you?", "I'm ok", "To day is sunny day", "hei man,do you know php language?", "Good luck for you", "Fighting!!!"]});
</script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,196评论 4赞 61
  • 夜跑
    2018年1月27日 阴雨天 星期六 文 / 朴玄 昨晚心血来潮，想起自己已许久没有跑步了，于是没有换装备，马上就...
    朴玄阅读 1,937评论 0赞 3
  • 遇见你，真好
    从不懂心动的感觉，直到遇见你 如清风拂面，阳光也向我表示 这一切都是那么正确 我觉得只有把生活过得诗意一点 才能靠...
    花的呢喃阅读 2,806评论 5赞 8