twitter-blog-vue
优雅的王德奥
这个作者很懒,什么都没留下…
展开
-
vue模仿twitter写一个自己的博客——拉幕效果
实现twitter页面的这种拉幕效果不是很难。但以前看到anijs官网的那种从下面往上面覆盖的拉幕效果感觉更好。所以自己就尝试了下。 这里我希望每个页面都有这个拉幕效果,所以就放在了Layout文件 <template> <div class="home"> <div class="header"> <blog-header>...原创 2019-08-26 10:33:20 · 2888 阅读 · 0 评论 -
vue模仿twitter写一个自己的博客——中部导航栏布局
接下来是中部导航栏。我们看到这里的头像动画,和中部导航栏定位都是跟鼠标滚动有关的。我们先将布局实现一下。这里是要求在页面上部分滚动范围内,导航栏一直在div的上部,随着鼠标的滚动而改变位置。到下部分滚动范围,导航栏就一直固定到页面的上部分。 这里需要注意两个地方 这里需要一个覆盖不了的区域,可以给人一种更好开关屏的感觉。而且中部导航栏下方区域的内容,在下滑的时候不能出现在这个区域。 一定要注...原创 2019-08-26 10:32:56 · 2597 阅读 · 2 评论 -
vue模仿twitter写一个自己的博客——中部导航栏
中部导航栏的Menu-Item跟头部导航栏差不多。但是需要设置一个default-active参数。还有路由变化时菜单激活项的变化。 头像的变化可以使用transition实现,一个大头像,和一个小头像加信息的离开进入动画。通过之前鼠标滚动监听达到效果。 <template> <div class="heading-wrap"> <div class="b...原创 2019-08-26 10:32:51 · 2622 阅读 · 0 评论 -
用vue模仿twitter写一个自己的博客
vue生态十分的强大,UI组件库越来越多。而过分依赖组件库,只会导致自己的技术越来越烂。组件的编写,样式的书写,动画,适配,媒体查询等很多都不记得了。 自己一直想着写一个博客。打算模仿twitter的一个页面。写一个自己的博客 Github https://github.com/pppercyWang/twitter-blog-vue 目录 头部导航栏 拉幕效果 中间导航栏布局实现 模仿的页面...原创 2019-07-28 21:18:17 · 904 阅读 · 0 评论 -
vue模仿twitter写一个自己的博客——头部导航栏
这个头部导航主要是写一个menu-item组件,hover时底部的蓝色底边动画弹出。再将logo扣出精灵图。 MenuItem: <template> <div class="menu-item-wrap" @click="push"> <div class="top">{{title}}</div> <div class=...原创 2019-08-26 10:33:26 · 2782 阅读 · 2 评论