CSS美化博客 第二期

Posted Wed Feb 26 2020. 1695 words. 8 min read.

This article was last updated on days ago, the information described in the article may be outdated.

首发于酷安,再转博客上,没怎么编辑。由于酷安不支持 Markdown 所以没 TOC 之类的

第二期主要讲圆角动画

在此期间已经有大佬 @Moce_Hu 催更,然鹅他自己已经做了圆角动画
可能这就是大佬吧
该教程面向小白,大佬请略过全文

如果你是真的想学 css,建议通过专业方法学习,此教程只是为了帮助小白利用 css 美化博客,所以方法略微有些奇怪。也感谢对于上篇文章大佬们的评论建议!

首先,制作圆角动画需要认识一个 css 属性 border-radius ,他用来向元素添加圆角边框。最简单的用法就是在后面加上 多少px

.header-inner {
border-radius: 15px;
}

我们先从菜单栏开始改起

左边 HTML 代码中我们找到了对应菜单栏的一行,其中 class=“header-inner” header-inner 我们称他为类名,你会发现类名和右边 css 中对应的红色字是一样的,没错,这两个就相当于做一个标记,告诉浏览器,我这个标签需要那个 css 样式。
上期也有人说到既然找到了类名,为什么不直接去修改 css 代码而是新建应该文件来写?该主题本身的 css 代码非常非常多,如果你在里面改,万一哪天出错了,你得跑到你部署的平台去翻版本对比,就回变得比较麻烦,而你直接写在新文件中会变得方便很多,当然了,这方法也有缺点,比如很多样式需要加
!important 这是非常不好的地方

找到了对应的css接下来直接写入就行了

.header-inner {
border-radius: 15px;
}

后面的值越大,圆角也越大
接着找打其他元素对应的 css,依次加入代码就好啦
通过寻找
发现博客文章那个框框是 post-block

那就加入如下代码

.post-block {
border-radius: 15px !important;
}

然后是侧边栏
寻找发现是sidebar-inner

加入如下代码

.sidebar-inner{
border-radius: 15px;
}

这里有个小坑

侧边框,也就是那个有头像的地方,这里作者放了两层东西,可以当做图层理解,如果你只是让其中一层圆角,那么另一层任然是直角
所以我们刚刚修改了,但是并没有完全起效果,会出现这种情况

所以侧边栏中我们需要修改两个

.sidebar {
border-radius: 15px !important;
}
.sidebar-inner {
border-radius: 15p×;
}

关于图层,推荐阅读 @我是天小正 的图文,写的很好

接下来就是触碰恢复直角和阴影了
直角很简单,也就是不要圆角
那直接写 border-radius = 0px;
阴影我们需要认识一个新的 css 属性
box-shadow,用法如下
box-shadow: h-shadow v-shadow blur spread color inset;
其中 h-shadow v-shadow 是必须要写的,其他随便,那这里就不介绍其他的了
h-shadow 是水平阴影的位置,那v-shadow就是垂直阴影的位置了
还有 color 说下

大家应该都懂吧,也就是阴影的颜色
那事情就变得简单了
再把这个东西加进去就好啦
下面是我的源码

.post-block:hover,
.header-inner:hover,
.sidebar:hover,
.sidebar-inner:hover,
.comments:hover {
border-radius: 0px !important;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .6), 0 0 6px 0 rgba(0, 0, 0, .6);
}

但仅仅这样是不行的
你会发现他真的是圆角变直角,也加上了阴影,但是完全没有过度,就是硬生生的变过去

丑爆了
那接下来我们需要给他加上动画
可能大家认为这过程非常非常复杂,但是看看标题如何用css的几行代码美化网站
所以只需要一行代码就解决啦
我们得先认识一个新属性
transition-duration,规定某一个元素完成过渡效果需要的时间,默认是 0,所以就是没过渡效果
用法很简单,后面加上时间就好啦,还需要加单位
我们先拿菜单栏试试,比如这样写

.header-inner {
border-radius: 15px;
}
.header-inner: hover {
transition-duration: .5s;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .6), 0 0 6px 0 rgba(0, 0, 0, .6);
border-radius: 0px;
}

然后就会有这样的效果

aaa

很清楚的可以看到,鼠标上去恢复直角是有过渡的了,但是鼠标移开的时候就没过渡动画了
看看代码,我把 transition-duration 写到了 xx:hover 里面,前面说过了,他是规定这个标签过渡需要的时间,我写入 :hover 中也就意味着只在这个标签被触碰时生效,所以我们应该不应该放入 hover 中,而应该这样

.header-inner {
transition-duration: .5s;
border-radius: 15px;
}
.header-inner:hover {
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .6), 0 0 6px 0 rgba(0, 0, 0, .6);
border-radius: 0px;
}

可能由于我比较菜当初就跳进了这个坑
那么其他的按这个修改下,就大功告成了

关于 border-radius 再说下
其实 transition-duration 包含了

border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

也就是你可以用一个来设置四个角
也可以每个角单独设置
比如这上面的一行和下面的四行效果是一样的

知道了这个东西我们还可以设置菜单栏顶上那个黑黑的东西

下面是效果

虽说这个也可以直接四个角一起设置

再顺带讲个透明度吧
也需要认识一个新属性 opacity
用法也很简单,后面直接加 0~1 的小数,1 是不透明,0 是全透明
比如这样

就像这样,菜单栏有设置透明,而其他没有

接下来附上全部源码

番外
其实是先讲一点下一期的东西啦
首页的那个头像,在主题配置里可以开启触碰旋转,但是这里毕竟是大佬聚集地,那我们不如自己写一个

首先认识一个新属性
这篇图文的最后一个了
transform,可对元素进行旋转等
这次只需要用到旋转,所以也只讲这个
用法如下
transform: rotate(10deg)
旋转 10º
正的顺时针转,负的逆时针转
然后找到对应 css

然后加入代码

然后就好啦

我们还可以转多一点

还可以再快一点

再快一点

好吧由于帧率限制,再快就录不出来效果了

第三期应该快来了
先上效果图


Comments

Unable to load Disqus, please make sure your network can access.