顶部动画

其实很早就想做顶部动画了,苦于没有找到合适的动画效果,加之不懂代码,所以拖了好久,今天正好有空,索性给研究一下,这个相比之下就比较简单了,因为尹先生那里有现成的,最开始想做的时候,我就问过他,只是当时我不懂css和js如何配合,才不了了之,所以在简单的调试了一下css之后,就挂上来了,效果一般般,有or没有,貌似没多大区别,幸好不影响网站加载速度。本来想做一个彩色条的,发现跟我的博客主题不太搭配,这个博客基础颜色就是黑灰红白,再多个颜色就不怎么好看了,至少我是这么觉得的。总而言之,这个比较简单,所以这个算是个小折腾吧。

搜索按钮

在折腾完顶部动画之后,在逛友链的时候,发现好多博客都有站内搜索按钮或者搜索窗口,逛着逛着我就想给自己的博客添加一个搜索按钮,其实我在用这个主题的第一时间,我就把原本自带的搜索框给删了,觉得太占用空间。只好把以前的备份翻出来再研究看看,在研究了这个主题自带的搜索框之后,我发现那个框框放哪里都不美观,不怎么协调,所以只好到处搜刮资源咯。首先就去看了一下设计笔记自家的搜索按钮样式,想着主题都差不多的,应该可以适应,在调试了一番css之后,终于能够在首页上看见按钮了,但是,问题来了,点击之后的窗口太特么小了,顶多只能显示两个字,而且没法关闭,点开了就挂那里了,得刷新一下才会还原,好吧,放弃。转向全网搜索,作为一个有特点的主题,自然是难以搜索到这种类似的资源的,把网页错乱还原两次之后,我决定再次放弃。然后继续逛友链,看看文章,留留言什么的。记起来,有在我的文章下留言的几个小伙伴的博客还没去逛,就点进了404的博客,我勒个去,跟设计笔记的主题一样嘛,就试了一下他的搜索按钮,太神奇了,点开按钮之后,直接白屏,然后正中间是搜索内容,右上角有个关闭按钮,当时就激动了,想着反正已经还原了两次,不在乎再多一次,索性再试一把,没想到居然一次成功,至少算是成功的,只是有一点点小缺陷,就是点开按钮到搜索界面的时候,右上角的关闭按钮不见了,这下就悲催了,都成功了一大半,最好卡住了,问了一圈也没解决办法,只好采用最原始的排除法,一步一步试,总算是搞定了95%,还有剩下的5%是因为移动端适应问题,没找到覆盖全屏的办法,就直接隐藏掉了按钮,等哪天再研究。

向以下精英表示感谢

尹先生 设计笔记 404

13 thoughts on “给博客添加了顶部动画和搜索按钮

  1. nyun说道:

    呃,不是ins,是你顶部的进度条。。。最好来个傻瓜教程~哈哈

    1. 小五说道:

      @nyun http://eveaz.com/470.html 已经写好了,去看吧。真的超级简单。

  2. 自定义说道:

    现在折腾的,首页文章缩略图还是删掉好

    1. 小五说道:

      @自定义 是哦,越看越不对劲。

    2. 小五说道:

      @自定义 帮忙看看,现在咋样?我感觉这真的是被我改的一塌糊涂了。

      1. 自定义说道:

        @小五 666,已经改好了

        1. 小五说道:

          @自定义 因为我之前做手机适应的时候就把缩略图删了,这次就是把自适应的代码复制了一份而已,然后适当了调整了一下标题和日期位置。

  3. nyun说道:

    找了半天没找到动画在哪,原来是顶部进度条,我的搜索抽空也得整一整了,有点占地方~

    1. 小五说道:

      @nyun 哈哈哈 是我的错,这不是动画,这是个进度条。

      1. nyun说道:

        @小五 你的邮件通知怎么都跑垃圾箱里了,我说怎么没有收到邮件提示~

        1. 小五说道:

          @nyun 可能你邮箱设置的比较好,那就加个白名单哈~~~

          1. nyun说道:

            @小五 好的,已经列入白名单了~

            1. 小五说道:

              @nyun 嗯嗯,这样以后就可以对你轰炸了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注