分类 css 下的文章

2024-08-17

要使用纯CSS创建翻牌动画，可以利用@keyframes规则来定义动画，并使用CSS的transform属性来实现翻牌效果。以下是一个简单的例子：

HTML:




<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      正面
    </div>
    <div class="flip-card-back">
      背面
    </div>
  </div>
</div>
 
<button id="flip">翻牌</button>

CSS:




.flip-card {
  perspective: 1000px;
  width: 300px;
  height: 200px;
}
 
.flip-card-inner {
  transition: transform 0.6s;
  transform-style: preserve-3d;
  position: relative;
}
 
.flip-card-front, .flip-card-back {
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}
 
.flip-card-back {
  transform: rotateY(180deg);
}
 
#flip:hover + .flip-card .flip-card-inner {
  transform: rotateY(180deg);
}

这段代码中，.flip-card是包含卡片的容器，.flip-card-inner是内部容器，用于包含卡片的正反面。.flip-card-front是卡片的正面，.flip-card-back是卡片的背面。当用户悬停在按钮上时，卡片翻转到背面。

注意：这个例子使用了hover状态来触发动画，实际应用中可能需要使用JavaScript来控制翻牌状态。

- 阅读更多 -

CSS 闲着无聊读一读，不知不觉学会CSS

System

2024-08-17

所有,css

这是一个关于CSS的系列学习文章，主要介绍CSS的基础知识和常用属性。这是该系列的第四篇文章，将介绍CSS中的伪类和伪元素。

伪类用于选择DOM元素的特殊状态，比如:hover、:focus、:first-child等。伪元素用于在DOM元素的内容前后插入新内容，比如::before和::after。

伪类

伪类的语法是在选择器后面加上一个冒号":", 例如 "a:hover"。




/* 链接hover效果 */
a:hover {
  color: blue;
}
 
/* 第一个子元素 */
p:first-child {
  font-weight: bold;
}

伪元素

伪元素的语法是在选择器后面用两个冒号"::", 例如 "p::before"。




/* 在段落前插入内容 */
p::before {
  content: ">> ";
  color: red;
}
 
/* 在段落后插入内容 */
p::after {
  content: " <<";
  color: red;
}

注意: 在CSS2中伪元素使用单冒号":", 在CSS3中为了与伪类区分, 伪元素使用双冒号"::", 但为了兼容老版本浏览器, 单冒号的写法也被部分浏览器支持。

System

2024-08-17

所有,css

报错信息 "[plugin:vite:css] Failed to load PostCSS config" 表示 Vite 在尝试加载 PostCSS 配置文件时失败了。

解决方法：

确认是否有 PostCSS 配置文件（如 postcss.config.js）在项目根目录下。如果没有，创建一个。
确保配置文件的路径正确，并且没有语法错误。
如果你使用的是自动发现功能，确保配置文件命名正确，并且位于可被 Vite 识别的目录中。
确保配置文件中的插件和配置项正确无误，并且与你的 Vite 版本兼容。
如果你在使用 Vite 插件来转换 CSS 中的 px 到视口单位（viewport units），例如 postcss-px-to-viewport，确保该插件已正确安装。
清除 Vite 的缓存，并重新启动开发服务器。
如果问题依旧存在，查看 Vite 的日志输出，可能会提供更具体的错误信息。
如果以上步骤都不能解决问题，可以尝试搜索相关错误信息，或者在相关社区提问以获取帮助。

- 阅读更多 -

HTML + CSS 连载 | - 网易云音乐 ITEM

System

2024-08-17

所有,css

由于原代码较长，以下仅展示核心部分，包括HTML结构和CSS样式的应用。




<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云音乐 - 歌单</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="item">
        <div class="cover">
            <img src="cover.jpg" alt="歌单封面">
        </div>
        <div class="info">
            <div class="title">
                <a href="https://music.163.com/playlist?id=313662571" target="_blank">
                    周杰伦 - 精选歌曲
                </a>
            </div>
            <div class="creator">
                <a href="https://music.163.com/user/home?id=132868885" target="_blank">
                    网易云音乐用户
                </a>
            </div>
            <div class="description">
                周杰伦精选歌曲，包含热爱的歌曲。
            </div>
        </div>
    </div>
</body>
</html>




/* style.css */
.item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #eee;
}
 
.cover img {
    width: 120px;
    height: 120px;
    object-fit: cover;
}
 
.info {
    margin-left: 15px;
    flex: 1;
}
 
.title, .creator, .description {
    margin-bottom: 5px;
}
 
.title a, .creator a {
    color: #333;
    text-decoration: none;
}
 
.creator a:hover, .title a:hover {
    text-decoration: underline;
}

以上代码展示了如何使用HTML和CSS创建一个简单的网易云音乐歌单项目的基本结构和样式。这个示例教学有效地展示了HTML和CSS的基本用法，并且为进一步学习网页设计与开发奠定了基础。

- 阅读更多 -

HTML CSS 将未知长宽的图片以正方形显示（自适应）

System

2024-08-17

所有,css

要将未知宽高的图片以正方形的方式显示，可以使用CSS来设置图片的容器高度和宽度相同，并确保图片在容器内居中显示。以下是实现这一效果的CSS代码示例：




.square-container {
  width: 30%; /* 或者你想要的任何百分比或固定宽度 */
  height: 0; /* 使用padding-bottom替代height来保持正方形比例 */
  padding-bottom: 100%; /* 设置为容器宽度的100%，这样高度就会自动计算为宽度的100%，形成正方形 */
  position: relative; /* 用于定位图片 */
  overflow: hidden; /* 隐藏溢出的图片 */
}
 
.square-container img {
  width: 100%; /* 图片宽度设置为100% */
  height: auto; /* 图片高度自动，保持比例 */
  position: absolute; /* 图片定位为绝对位置 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左边对齐 */
}

HTML结构如下：




<div class="square-container">
  <img src="path/to/your/image.jpg" alt="Description">
</div>

每个.square-container的高度将自动计算为其宽度的100%，确保内部的图片始终以正方形的形式展示。

System

2024-08-17

所有,css

这个错误表明你正在尝试从element-plus包中导入CSS文件，但是该CSS文件没有被正确地导出。这通常发生在使用ES模块系统时，如果一个包不支持ES模块导入其样式文件，就会出现这个问题。

解决方法：

确保你正在使用的element-plus版本支持ES模块导入样式。如果不支持，你可能需要更新到一个较新的版本。
如果你确信你使用的版本支持，但仍然遇到这个问题，尝试以下步骤：
- 检查你的导入语句是否正确。正确的导入语句应该是import 'element-plus/dist/index.css';。
- 如果你使用的是Vite，确保你的vite.config.js或vite.config.ts文件中包含了对.css文件的处理配置。
如果你不想在代码中直接导入样式，可以在你的项目中的index.html或相应的模板文件中直接添加<link>标签来引入样式。
如果上述方法都不适用，可能需要检查element-plus的官方文档或GitHub仓库的Issues来查找是否有其他人遇到了类似的问题或者这是一个已知问题。

确保你的项目配置和依赖都是最新的，并且遵循element-plus的官方文档关于样式导入的指示。

- 阅读更多 -

Tailwind CSS原子框架

System

2024-08-17

所有,css

Tailwind CSS 是一个实用的 CSS 框架，它提供了一系列的类来帮助开发者快速构建网页界面。Tailwind CSS 的核心理念是“实用高于全能”，它提供了大量的实用工具类，可以帮助开发者减少重复代码并减少 CSS 体积。

原子框架（Atomic CSS Framework）是一种 CSS 设计范式，它提倡将组件分解成其最小的原子部分，然后通过组合这些原子部分来创建组件。

在 Tailwind CSS 中，原子框架的概念是通过使用函数和指令来实现的，这些函数和指令允许开发者以声明式的方式自定义样式。

以下是一个使用 Tailwind CSS 的原子框架概念的简单例子：




<div class="p-6 bg-white border-b border-gray-200">
  <div class="flex items-center">
    <img class="w-10 h-10 rounded-full" src="https://example.com/avatar.jpg" alt="Avatar">
    <div class="ml-2">
      <div class="text-sm font-medium text-gray-900">John Doe</div>
      <div class="text-sm text-gray-500">john@example.com</div>
    </div>
  </div>
</div>

在这个例子中，我们使用了 Tailwind CSS 预定义的一系列工具类来构建用户头像的布局。这个布局是通过组合多个原子级别的类来实现的，而不是自定义一大段 CSS 代码。这种方法使得 HTML 结构更加清晰，也使得维护变得更加简单。

- 阅读更多 -

雪花飘，购物抛物线，进度条等四个案列，带入走进 CSS transition

System

2024-08-17

所有,css

CSS 中的 transition 属性用于设置元素的样式过渡效果。以下是实现“雪花飘，购物抛物线，进度条等”四个案列的基本示例代码：

雪花飘：

HTML:




<div class="snow"></div>

CSS:




.snow {
  width: 10px;
  height: 10px;
  background-color: white;
  position: fixed;
  bottom: 0;
  left: 0;
  transform: translateX(0);
  transition: transform 5s ease-in-out;
}
 
@keyframes snowFall {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
 
@keyframes snowSpiral {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(2); }
}
 
.snow:hover {
  animation: snowFall 5s infinite, snowSpiral 5s infinite;
}

购物抛物线：

HTML:




<div class="shopping-cart"></div>

CSS:




.shopping-cart {
  width: 50px;
  height: 100px;
  background-color: red;
  position: fixed;
  bottom: 0;
  right: 0;
  transform: translateX(0);
  transition: transform 5s ease-in-out;
}
 
.shopping-cart:hover {
  animation: shoppingCartTrajectory 5s infinite;
}
 
@keyframes shoppingCartTrajectory {
  0% { transform: translateX(0); }
  50% { transform: translateX(-50px) translateY(-50px) rotate(20deg); }
  100% { transform: translateX(-100px) translateY(-100px) rotate(40deg); }
}

进度条：

HTML:




<div class="progress-bar"></div>

CSS:




.progress-bar {
  width: 100%;
  height: 10px;
  background-color: blue;
  transition: width 5s ease-in-out;
}
 
.progress-bar:hover {
  width: 0;
}

这些示例展示了如何使用 CSS transition 属性来创建简单的动画效果。每个案列都包括了一个 HTML 元素和相应的 CSS 样式，其中包括了 transition 属性。鼠标悬停时触发动画效果。

- 阅读更多 -

CSS 奇思妙想边框动画，前端开发速成

System

2024-08-17

所有,css

以下是一个简单的CSS边框动画示例，用于展示如何创建一个有趣的边框变换效果：




/* 基本样式 */
.box {
  width: 100px;
  height: 100px;
  background-color: #58a;
  margin: 50px;
  border-radius: 8px;
  position: relative;
  animation: spin-border 4s linear infinite;
}
 
/* 关键帧动画 */
@keyframes spin-border {
  0% {
    border-width: 8px;
    border-color: #fff;
  }
  50% {
    border-width: 12px;
    border-color: #58f;
  }
  100% {
    border-width: 8px;
    border-color: #fff;
  }
}

在HTML中，你可以这样使用这个类：




<div class="box"></div>

这段代码会创建一个有着白色和蓝色边框不断旋转的小方块，动画会无限循环。通过调整.box类中的animation属性，你可以控制动画的速度、时长和其他行为。同时，通过调整@keyframes spin-border中的百分比，你可以控制动画的具体变化。

- 阅读更多 -

vue3项目引入unocss原子化

System

2024-08-17

所有,css

在Vue 3项目中引入UnoCSS（原子化CSS框架），你需要按照以下步骤操作：

安装UnoCSS：




npm install @unocss/core @unocss/preset-uno @unocss/preset-mini

创建UnoCSS插件：




// unocss.js
import { defineConfig } from 'unocss'
import { presetUno, presetMini } from '@unocss/preset-uno'
import { presetAttributify } from '@unocss/preset-attributify'
 
export default defineConfig([
  presetUno(),
  presetMini(),
  presetAttributify({ /* 你可以在这里配置attributify的选项 */ }),
  // 其他UnoCSS插件
])

在Vue项目中使用UnoCSS插件：




// main.js
import { createApp } from 'vue'
import App from './App.vue'
import unocss from './unocss'
 
const app = createApp(App)
 
// 使用UnoCSS插件
app.use(unocss)
 
app.mount('#app')

在组件中使用UnoCSS规则：




<template>
  <div class="p-10 bg-gray-200 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700">
    Hover over me!
  </div>
</template>
 
<script>
export default {
  // 组件逻辑
}
</script>

以上步骤展示了如何在Vue 3项目中引入UnoCSS并使用它的基本规则。你可以定义自己的UnoCSS插件配置，并根据需要添加更多的UnoCSS插件。

- 阅读更多 -