惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

雷峰网
雷峰网
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
博客园 - 三生石上(FineUI控件)
博客园 - 聂微东
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Hugging Face - Blog
Hugging Face - Blog
Apple Machine Learning Research
Apple Machine Learning Research
博客园 - Franky
MyScale Blog
MyScale Blog
A
About on SuperTechFans
博客园_首页
B
Blog RSS Feed
Martin Fowler
Martin Fowler
大猫的无限游戏
大猫的无限游戏
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Vercel News
Vercel News
C
Check Point Blog
H
Hackread – Cybersecurity News, Data Breaches, AI and More
博客园 - 【当耐特】
M
MIT News - Artificial intelligence
宝玉的分享
宝玉的分享
T
Tailwind CSS Blog
I
InfoQ
罗磊的独立博客

碎言

不懂就别瞎掰掰:【程序员的常识】写的什么玩意? PrimaryOralMathPack 小学生口算题生成器 AI 辅助编程下的程序设计与代码编写 使用 Next.js 和 Tailwind CSS 构建可编辑和删除的 ToDo 待办事项应用 探索编程新境界:MarsCode 助你一臂之力 使用 Next.js 和 Tailwind CSS 搭建静态图片展示站点并部署到 Vercel AI 辅助编程:免费工具的优缺点及官网一览 GitHub push更新总是失败,写个python脚本解决 把博客从GitHub迁移到到了vercel ComfyUI 和 Flux.1 安装与使用教程 Flux.1 入门必知:硬件、环境、模型 Git项目的子文件夹中的内容无法同步到远程仓库的解决方法 blender流体Fluid使用中没有流体、流体穿模等一些问题的解决方法 博客聚合网站:积薪,竟然关闭了! blender日常使用中的一些技巧 虽然只有我自己在用,但还是更新了碎言博客的源代码, 与其在迷茫中困惑,不如在努力中前进 差点忘了我还有一个博客... 秧歌、博客和AI 终于熬到了新手上路 好久没有更新博客了。。。 老妈大腿骨骨折,最近一直在医院护理 Hello, September! Ubuntu开机自动启动Docker容器运行WordPress Docker 简单快速安装部署WordPress Docker下安装MySQL 加碘盐能防核辐射的话,还怕什么核战争? shields.io 一个简洁、一致、清晰的徽章 Ubuntu下使用root登录ssh的设置 GitHub Actions 构建、部署 Next.js项目
如何使用CSS为博客标题设置彩虹颜色?
J.sky · 2023-07-22 · via 碎言

博客的页面有些单调,但是又不想使用额外的JS代码来增加页面的加载负担,这个时候你可以考虑一下使用css来增加博客页面的效果,比如彩色博客标题。

css代码

假设我们的标题是<h1>博客标题内容</h1>,这里我可以编写CSS代码如下:

:root {
    --rainbow-gradient: linear-gradient(
    -90deg,
    #602ce5 0,
    #2ce597 30%,
    #e7bb18 50%,
    #ff7657 70%,
    #45c1ee 90%,
    #2ce597 100%
    );
}

h1{
    background-image: var(--rainbow-gradient, #fff);
    background-size: 100%;
    background-repeat: repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
}

上边的代码中,我们定义了一个颜色变量,这样方便日后修改颜色值。background-image: var(—rainbow-gradient, #fff);这是一个CSS属性,它设置h1元素的背景图像。var(—rainbow-gradient)是一个自定义变量,它可以设置为任何颜色或图像。如果没有指定值,则默认值为#fff(白色)。

通过上边简单的css代码就可以实现彩色博客标题了,如果给h1添加了伪类选择器h1:hover,就会实现,鼠标指向标题的时候会变成彩色的效果。简单吧,动手来实现一下吧。