SCSS+WindiCSS实现主题色切换
最近在给自己写主页(同时也是博客),我做了一个切换主题色的功能。每次进入页面时,会随机选择一套配色,让页面显得灵动一些,就像下面这样: 这是如何实现的呢?不妨先从自定义颜色入手 WindiCSS 自定义颜色 定义一个固定的颜色 // windi.config.js…
3,171 2023-04-25 2 去阅读写一个炫酷的个人名片页✨✨
这篇文章主要介绍名片页的路由过渡是如何去做的 介绍 在19年,我就写了一个较为炫酷的个人名片页。当时的我热衷于使用各种过渡效果,当然,也尝试了很多新鲜的 css 特性,例如为了实现多种主题色使用了 css 变量(好像还是我首次使用flex布局呢) 但当时…
3,128 2023-04-11 4 去阅读在 Nuxt.js 中配合 windicss 实现暗黑模式适配
在 windicss 中,提供了媒体查询和 class 两种方式实现暗黑模式适配。而且比较省心的是——其提供的 dark 变体会自动根据选择的适配模式,生成对应的代码,可以有效避免写出一堆没用的css,看起来也比较清晰。 为了方便控制,我们选择使用 class 的方式来切换暗黑模式…
1,472 2023-02-09 0 去阅读实现滚动时Header自动隐藏
这是掘金网页版的头部,当滚动条向下滑动时,主header会隐藏,次级header会吸在页面顶部。 样式 首先,我们先通过两个 div 来模拟这两个header <template> <div class="main-header-wrapper"> <div class="main-header"></div> …
1,603 2023-02-02 2 去阅读