分享一下网站的一些特效

本文共有5181个字,关键词:

在此之前不得不吐槽一下百度,有用的没搜到,倒是广告一大堆。之前有段时间(医院事件)没有广告的,不知道现在又有了。百度缺钱?他不缺,这是自己作践自己,终会自取灭亡的。现在必应也挺不错的。
烟尘

言归正传,本网站主题是7TEC,觉得很不错,感兴趣的可以去他的博客看看。

看到左下角的小人物了吧,酷!其实是一个插件,详情点击这里,很厉害的一个小哥哥。emm,看到那逻辑简直头疼。。。

剩下的是一些js文件,在footer.php中引入就好了。注意z-index这个属性,其他的都问题不大,一个一个来。


一、离开网站更改标题

<script type="text/javascript">
var OriginTitile = document.title;
    var titleTime;
    document.addEventListener('visibilitychange',
    function() {
        if (document.hidden) {
            //注意把图标的地址换成自己的
            $('[rel="shortcut icon"]').attr('href', 'http://www.funnyrule.cn/usr/themes/7TEC/img/icon.png');
            document.title = '╥﹏╥...诶呦,这网站好矫情!';
            clearTimeout(titleTime);
        } else {
            $('[rel="shortcut icon"]').attr('href', 'http://www.funnyrule.cn/usr/themes/7TEC/img/icon.png');
            document.title = '^O^嘿嘿!你终于来了~' + OriginTitile;
            titleTime = setTimeout(function() {
                document.title = OriginTitile;
            },
            2000);
        }
    });
</script>

二、鼠标特效

<script type="text/javascript">
    var a_idx = 0;
    jQuery(document).ready(function ($) {
        $("body").click(function (e) {
            var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信",
                "友善");
            var $i = $("<span />").text(a[a_idx]);
            a_idx = (a_idx + 1) % a.length;
            var x = e.pageX,
                y = e.pageY;
            $i.css({
                "z-index": 99999999999,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "color": "#ff6651"
            });
            $("body").append($i);
            $i.animate({
                    "top": y - 180,
                    "opacity": 0
                },
                1500,
                function () {
                    $i.remove();
                });
        });
    });
</script>

三、下雪特效

ps:这个js拖了网站四五十毫秒,就去掉了。

<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>

以下代码太长了,大家自己扒源码看吧,按F12。就像这样。
烟尘

四、背景色特效

【ribbon.min.js】

五、烟花特效

【meme.js】
<canvas class="fireworks" style="position:fixed;left:0;top:0;z-index:99999999;pointer-events:none;"></canvas>
【anime.min.js】
【fireworks.js】

六、评论框打字特效

【commentTyping.js】

七、鼠标更改默认样式

【pointer.js】
看到鼠标变成小圈圈,一直转,不要太炫酷。看国外的网站发现的,结果就自己用啦,那两个网明天我找找看发在评论区。
有小bug就那样吧,改不了了。。。
这个js下载之后,里面有备注,class类和id类写在相应的路径下面,没一定html基础的折腾起来会很难受


下面是css,写在style.css中

八、文字跳动

看网站最底部,没想到css就能实现。把类名替换成自己的哦。

.text_beat span{  
    position: relative;  
}  

.text_beat span:nth-child(1){  
    -webkit-animation:jump 1s linear 0s infinite alternate;  
}  

.text_beat span:nth-child(2){  
    -webkit-animation:jump 1s linear 0.2s infinite alternate;  
}  

.text_beat span:nth-child(3){  
    -webkit-animation:jump 1s linear 0.4s infinite alternate;  
}  

.text_beat span:nth-child(4){  
    -webkit-animation:jump 1s linear 0.6s infinite alternate;  
}  

.text_beat span:nth-child(5){  
    -webkit-animation:jump 1s linear 0.8s infinite alternate;  
}  


@-webkit-keyframes jump  
{  
    0%{  
        top:0px;  
        color:red;  
    }  
    50%{  
        top:-10px;  
        color:green;  
    }  
    100%{  
        top:10px;  
        color:blue;  
    }  
}

有不懂的可以问我,js加多了网站肯定有延迟,是好是坏自己斟酌。

wxid_9vzkcukzvyon22

「点击下方按钮添加我的微信吧!」

烟尘

(๑>ڡ<)☆谢谢老板~

使用微信扫描二维码完成支付

热爱生活,相信生活,追求生活,享受生活!最美不过此刻,登之高,风景不过如此。
添加新评论
已有 5 条评论
  1. 烟尘:

    诶呀,默认超链接咋没颜色

  2. 烟尘:

    https://www.iobo.it/
    https://project-obsolete.com/en/

  3. 烟尘:

    https://kyivsculpture.com/en/

  4. 灰狼:

    鼠标搞成这样好卡,卡顿感受不了

    1. 烟尘: 回复 @灰狼

      哈哈哈,好不容易把源码扒下来,过段时间厌了就去了(!)[zface_7.gif]