分类 css 下的文章

2024-08-14




<template>
  <div class="theme-switch-container">
    <el-color-picker
      v-model="themeColor"
      :predefine="predefineColors"
      class="theme-switch"
      popper-class="theme-picker-dropdown"
      size="small"
      @change="handleThemeChange"
    />
  </div>
</template>
 
<script setup lang="ts">
import { ref, watch } from 'vue';
import { useThemeStore } from '@/stores/themeStore';
 
const themeStore = useThemeStore();
const themeColor = ref(themeStore.theme);
const predefineColors = ref([
  '#409EFF', '#F56C6C', '#E6A23C', '#67C23A', '#909399', '#5470C6', '#F59EA2', '#F57C00', '#7B68EE', '#67C23A',
]);
 
const handleThemeChange = (color: string) => {
  themeStore.setTheme(color);
  document.documentElement.style.setProperty('--theme-color', color);
};
 
watch(themeColor, (newColor) => {
  themeStore.setTheme(newColor);
  document.documentElement.style.setProperty('--theme-color', newColor);
});
</script>
 
<style lang="scss" scoped>
.theme-switch-container {
  display: flex;
  align-items: center;
  margin-right: 10px;
 
  .theme-switch {
    margin-left: 10px;
  }
}
</style>

这个代码实例展示了如何在Vue 3应用程序中使用Element Plus组件库和SCSS来实现一个主题色调切换器。它使用了el-color-picker组件来提供颜色选择功能，并通过Pinia状态管理库来管理主题色。代码中包含了一个watch函数，用于监听选择的颜色变化，并更新页面的主题色。

h5导航跳色

2024-08-14

在HTML5中，实现导航跳色通常意味着在用户悬停或点击时改变导航项的颜色。这可以通过CSS来实现。以下是一个简单的例子：

HTML:




<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品服务</a></li>
    <li><a href="#">联系方式</a></li>
  </ul>
</nav>

CSS:




nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
 
nav li {
  display: inline;
  margin-right: 10px;
}
 
nav a {
  text-decoration: none;
  color: #000;
  transition: color 0.3s ease; /* 平滑过渡颜色 */
}
 
nav a:hover {
  color: #F00; /* 鼠标悬停时的颜色 */
}

这段代码中，我们使用了CSS的:hover伪类选择器来定义当用户将鼠标悬停在导航链接上时，链接的颜色会改变。transition属性确保了颜色的变化是平滑的。

推荐开源项目：Markdown-CSS - 美化你的 Markdown 文档

2024-08-14

Markdown-CSS 是一个用于美化 Markdown 文档的开源项目，它提供了一系列 CSS 样式，让你的 Markdown 文件在网页上以更加优雅的方式呈现。

以下是如何使用 Markdown-CSS 的简单步骤：

下载或克隆 Markdown-CSS 项目到本地。




git clone https://github.com/jasonm23/markdown-css-themes.git

在你的 Markdown 文件中引入相应的 CSS 文件。

例如，如果你想使用 Solarized Light 主题，你的 Markdown 文件的开头应该像这样：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="path/to/markdown-css-themes/solarized-light.css">
</head>
<body>
    <div class="markdown-body">
        <!-- Your Markdown content goes here. -->
    </div>
</body>
</html>

请将 path/to/markdown-css-themes/solarized-light.css 替换为你本地存放 CSS 文件的实际路径。

在 <div class="markdown-body"> 标签内部编写你的 Markdown 文本。

这样，当你在浏览器中打开这个 HTML 文件时，你的 Markdown 文本将会以美化后的格式呈现。

注意：Markdown-CSS 项目可能不会及时更新，如果你需要最新的样式或者有任何问题，可以查看该项目的 Issues 页面或者提交新的 Issues。

纯css实现文字左右循环滚动播放效果

2024-08-14

要使用纯CSS实现文字的左右循环滚动播放效果，可以使用@keyframes动画结合animation属性来完成。以下是一个简单的例子：

HTML:




<div class="marquee">
  <p>这是循环滚动的文字效果。</p>
</div>

CSS:




.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}
 
.marquee p {
  display: inline-block;
  padding-left: 100%;
  animation: scroll 10s linear infinite;
}
 
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

这段代码会使得.marquee内的<p>标签文本不断向左滚动，形成循环滚动的效果。animation属性定义了动画的名称(scroll)、持续时间(10s)、速率函数(linear)以及循环次数(infinite)。@keyframes scroll定义了动画的起点和终点，实现了文本从初始位置开始向左移动到完全移出视野的位置，形成循环滚动的效果。

2024-08-14

在CSS中，我们可以使用@keyframes规则来定义一个动画序列（animation sequence），然后通过animation属性来应用这个动画序列到一个选择器上。

以下是一个简单的例子，展示了如何定义和使用一个动画：




/* 定义一个名为 'fadeInOut' 的动画 */
@keyframes fadeInOut {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
 
/* 应用动画到一个元素上 */
.element {
  animation: fadeInOut 2s infinite;
}

在这个例子中，.element 类将会应用一个名为 fadeInOut 的动画，这个动画会在2秒内完成，并且是无限循环的。动画的效果是改变元素的透明度，从0到1再到0，实现淡入淡出的效果。

tailwindcss px转rem方案

2024-08-14

Tailwind CSS 提供了一个插件来实现 px 到 rem 的转换，这个插件叫做 tailwindcss/plugin-typography。以下是如何安装和配置这个插件的步骤：

安装 tailwindcss 和 postcss（如果还没有的话）：




npm install -D tailwindcss postcss

安装 tailwindcss/plugin-typography 插件：




npm install -D @tailwindcss/typography

在项目的 tailwind.config.js 文件中配置 typography 插件：




// tailwind.config.js
const typography = require('@tailwindcss/typography');
 
module.exports = {
  // ...其他配置...
  plugins: [
    // ...其他插件...
    typography({
      // 可以在这里配置插件选项
      // 例如：
      // moduleSize: 16, // 默认的根字体大小是16px
    }),
  ],
  // ...其他配置...
};

在 postcss.config.js 中引入 Tailwind CSS：




// postcss.config.js
module.exports = {
  plugins: [
    // ...其他插件...
    require('tailwindcss'),
    require('autoprefixer'),
    // ...其他插件...
  ],
};

现在，Tailwind CSS 会自动将你在组件中使用的 px 单位转换成 rem 单位。你可以在 Tailwind CSS 的配置文件中指定一个模块的大小（默认是 16px），这样就可以使用 px 值而不是 rem，因为 Tailwind CSS 会自动帮你转换。

例如，你可以这样写一个组件：




<div class="text-3xl">Hello, World!</div>

Tailwind CSS 会将 text-3xl 类转换成相应的 rem 单位，根据你在配置文件中设置的模块大小。

TS项目开发过程中减少重复代码，CSS外边距塌陷问题

2024-08-14

CSS中的外边距塌陷（margin collapse）是指当两个垂直相邻的块级元素的垂直外边距相遇时，它们之间的距离不是两者相加，而是取两者之中的较大者。为了减少重复代码并解决外边距塌陷问题，可以采用以下策略：

使用CSS reset，如Normalize.css或者自定义CSS reset来规范化默认的边距和填充。
使用更现代的CSS布局技术，比如Flexbox或Grid布局系统，它们有更好的空间管理能力。
为元素设置明确的边距或使用内边距（padding）来控制元素间距，而不是依赖外边距。
使用伪元素来创建视觉上的边距，而不影响实际的布局。
使用overflow: auto或overflow: hidden属性在需要的地方防止外边距塌陷。

示例代码：




/* 使用Normalize.css 或自定义CSS reset */
* {
  margin: 0;
  padding: 0;
}
 
/* 使用Flexbox布局 */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 为Flex项目之间提供10px的间隔 */
}
 
/* 使用内边距来控制元素间距 */
.element {
  padding: 10px;
}
 
/* 使用伪元素来创建边距 */
.element::before {
  content: "";
  display: block;
  height: 10px;
  width: 100%;
}
 
/* 防止外边距塌陷 */
.overflow-guard {
  overflow: auto; /* 或者使用 'hidden' */
}

在实际的项目中，应根据具体情况选择最合适的策略。

Vite scss 如何引入本地字体

2024-08-14

在Vite项目中引入本地字体，你需要做以下几步：

将字体文件放置在项目的public文件夹或者assets文件夹中（根据项目结构决定）。
在你的scss文件中使用@font-face规则来引入字体。
使用相对路径指向字体文件。

示例代码：




// styles.scss
@font-face {
  font-family: 'MyCustomFont';
  src: url('./assets/fonts/MyCustomFont.woff2') format('woff2'),
       url('./assets/fonts/MyCustomFont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
 
body {
  font-family: 'MyCustomFont', sans-serif;
}

确保你的Vite配置文件（例如vite.config.js）包含了对字体文件的处理，通常Vite已经内置了对字体文件的支持，不需要额外配置。

如果你的Vite项目中使用了scss预处理器，那么你可以像上面展示的那样在你的scss文件中直接引入本地字体。记得调整url路径以指向你的字体文件实际位置。

css实现图标跳动动画

2024-08-14

要实现一个图标跳动的动画，可以使用CSS的关键帧动画和变换功能。以下是一个简单的示例，演示如何为一个图标实现简单的上下跳动：

HTML:




<div class="icon-jump">🚀</div>

CSS:




.icon-jump {
  display: inline-block;
  font-size: 50px; /* 根据需要调整图标大小 */
  animation: jump 1s infinite; /* 无限循环跳动动画 */
}
 
@keyframes jump {
  0%, 100% { transform: translateY(0); } /* 动画开始和结束时的位置 */
  50% { transform: translateY(-10px); } /* 动画中间的跳动高度 */
}

这段代码会使得包含🚀（火箭表情符号）的<div>元素在Y轴上不停跳动。可以通过调整@keyframes jump中的百分比和transform: translateY()的值来改变跳动的高度和次数。