Tech Blog

2024-08-17

以下是实现这种效果的核心CSS代码：




.button {
  position: relative;
  background-color: #0096D6;
  border: none;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  cursor: pointer;
  outline: none;
  transition: background-color 0.5s;
}
 
.button:hover {
  background-color: #006295;
}
 
.button::before,
.button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: white;
}
 
.button::before {
  width: 50px;
  height: 50px;
}
 
.button::after {
  width: 80px;
  height: 80px;
  animation: rotate 2s infinite linear;
}
 
@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

这段代码创建了一个圆形按钮，其中::before伪元素是中心的白色点，而::after伪元素是旋转的光环。光环的旋转是通过CSS动画实现的，使得当鼠标悬停在按钮上时，光环可以不停旋转。

- 阅读更多 -

CSS实战 - 波纹扩散效果

System

2024-08-17

所有,css




/* 波纹扩散效果 */
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}
 
.ripple:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%; /* 初始尺寸 */
  height: 150%;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.3); /* 波纹颜色 */
  background-clip: padding-box;
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  transition: transform 1s ease-out, opacity 1s ease-out;
}
 
.ripple:active:after {
  transform: scale(1);
  opacity: 1;
  transition-duration: 0s;
}

这段代码定义了一个.ripple类，用于创建点击时的波纹扩散效果。它使用:after伪元素来实现水波效果，通过改变transform和opacity属性的过渡时间来实现点击瞬间的效果。通过设置pointer-events: none;，伪元素不会影响到元素的事件触发，确保了点击事件可以正常传递给底层元素。

- 阅读更多 -

【前端】css控制背景图片缩放

System

2024-08-17

所有,css

在CSS中，可以使用background-size属性来控制背景图片的尺寸。如果你想要背景图片完全覆盖元素，并且保持其宽高比，可以使用cover值。如果你想要图片缩放到完全适应元素的宽高，可以使用contain值。

以下是一些示例代码：

使用cover值使背景图片完全覆盖元素，并且可能会被裁剪：




.element {
  background-image: url('path/to/your/image.jpg');
  background-size: cover;
}

使用contain值使背景图片缩放到适应元素的宽高，但不会裁剪：




.element {
  background-image: url('path/to/your/image.jpg');
  background-size: contain;
}

使用具体的宽度和高度值来缩放背景图片：




.element {
  background-image: url('path/to/your/image.jpg');
  background-size: 200px 150px; /* 宽度200px，高度150px */
}

使用百分比来缩放背景图片，相对于元素的大小：




.element {
  background-image: url('path/to/your/image.jpg');
  background-size: 100% 100%; /* 宽度和高度都缩放到元素的100% */
}

- 阅读更多 -

响应式文字大小：CSS 根据容器的大小自动调整字体大小

System

2024-08-17

所有,css

要实现响应式字体大小，可以使用CSS的视口单位vw（视口宽度单位），vh（视口高度单位），或者vmin和vmax（视口尺寸的最小或最大值）。以下是一个简单的例子，演示如何根据视口大小调整文本的字体大小：




body {
  font-size: 2vw;
}

在这个例子中，2vw表示字体大小是视口宽度的2%。随着视口尺寸的变化，字体大小也会相应地调整。

如果你想要更精细的控制，可以使用媒体查询来定义不同断点下的字体大小：




/* 默认字体大小 */
body {
  font-size: 16px;
}
 
/* 当视口宽度小于或等于768像素时 */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}
 
/* 当视口宽度在480像素到768像素之间时 */
@media (min-width: 480px) and (max-width: 768px) {
  body {
    font-size: 15px;
  }
}
 
/* 当视口宽度小于480像素时 */
@media (max-width: 480px) {
  body {
    font-size: 12px;
  }
}

在这个例子中，根据视口的宽度，我们将字体大小在不同的断点下进行调整。

System

2024-08-17

所有,css

GitHub 风格的 Markdown CSS 样式库 github-markdown-css 是一个流行的资源，它提供了一套完全兼容 GitHub 的 Markdown 格式化规则。以下是如何使用 github-markdown-css 的示例代码：

首先，通过 npm 安装 github-markdown-css：




npm install github-markdown-css

然后，在你的 HTML 文件中引入这个库：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GitHub Flavored Markdown</title>
    <!-- 引入 github-markdown-css -->
    <link rel="stylesheet" href="node_modules/github-markdown-css/github-markdown.css">
</head>
<body>
    <article class="markdown-body">
        <!-- 这里放置你的 Markdown 内容 -->
    </article>
</body>
</html>

在 <article> 标签中，你应该放置你的 Markdown 内容。这个库会自动将 Markdown 语法渲染成 GitHub 风格的格式。

- 阅读更多 -

css滚动条样式指南

System

2024-08-17

所有,css

在CSS中，可以使用::-webkit-scrollbar和相关伪元素来定制滚动条样式，但仅在基于WebKit的浏览器中有效，例如Chrome和Safari。以下是一个简单的例子，展示如何自定义滚动条的宽度和颜色：




/* 定制整个滚动条轨道 */
::-webkit-scrollbar {
  width: 12px;  /* 定制滚动条的宽度 */
}
 
/* 定制滚动条轨道内的滑块（thumb） */
::-webkit-scrollbar-thumb {
  background-color: #888;  /* 定制滑块的颜色 */
  border-radius: 6px;      /* 定制滑块的圆角 */
}
 
/* 定制滑块悬停时的样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}
 
/* 定制轨道内的悬停高亮 */
::-webkit-scrollbar-track {
  background-color: #f0f0f0;
}

请注意，这些伪元素并不是所有浏览器都支持，因此在制作跨浏览器兼容的滚动条样式时，需要考虑其他解决方案，如使用JavaScript库（如OverlayScrollbars）或者CSS的标准属性（如scrollbar-color和scrollbar-width）。

- 阅读更多 -

前端基础知识HTML,css,js入门(超详细)

System

2024-08-17

所有,css

HTML, CSS 和 JavaScript 是构建网页的三大支柱技术，下面是它们的基本介绍和入门示例：

HTML:

HyperText Markup Language，超文本标记语言，用于创建网页的结构。




<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
    <a href="https://www.example.com">这是一个链接</a>
</body>
</html>

CSS:

Cascading Style Sheets，层叠样式表，用于控制网页的样式和布局。




body {
    background-color: #f0f0f0;
}
 
h1 {
    color: blue;
}
 
p {
    color: green;
}

JavaScript:

是一种编程语言，用于添加交互性和动态性。




// 改变段落的文本
function changeParagraphText() {
    var p = document.querySelector('p');
    p.textContent = '段落已更改！';
}
 
// 当按钮被点击时执行函数
document.querySelector('button').addEventListener('click', changeParagraphText);

HTML 定义了网页的结构，CSS 装饰了网页的外观，而 JavaScript 使网页具有活力，可以响应用户的操作。

- 阅读更多 -

CSS 实现卡片以及鼠标移入特效

System

2024-08-17

所有,css




/* 设置卡片的基本样式 */
.card {
  width: 200px;
  height: 260px;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: transform 0.5s, box-shadow 0.5s; /* 添加过渡动画 */
}
 
/* 鼠标移入卡片时的样式变化 */
.card:hover {
  transform: scale(1.1); /* 卡片放大效果 */
  box-shadow: 0 10px 20px rgba(0,0,0,0.19); /* 卡片阴影效果 */
}
 
/* 在此处添加更多样式，如卡片内文本的样式等 */

这段代码展示了如何使用CSS为卡片元素添加基本样式和鼠标移入时的放大与阴影效果。通过transform属性实现缩放效果，通过box-shadow属性添加阴影效果，并使用transition属性为这些变化添加平滑的过渡动画。这是一个简单的交互效果示例，可以被用作学习和教学目的。

System

2024-08-17

所有,css

报错解释：

这个错误通常表示你的样式文件中使用了 Tailwind CSS 的 @apply 指令，但是在解析 CSS 时，编译器无法识别这个 at-rule（@ 规则）。这可能是因为配置不正确，或者是因为相关的库没有安装或者没有正确引入。

解决方法：

确保已经安装了 Tailwind CSS 和 postcss 以及相关的 autoprefixer。
确保 postcss 配置正确，应该包括 Tailwind CSS 的插件。
确保 tailwind.config.js 和 postcss.config.js 文件存在，并且配置正确。
如果你使用的是其他构建工具（如 webpack 或 rollup），确保相关的 Tailwind CSS loader 或插件已经配置并且正确运行。
确保 @apply 使用正确，它应该在类名前使用，并且类名是有效的 Tailwind CSS 类。

示例配置（以 webpack 为例）：




// webpack.config.js
const purgecss = require('@fullhuman/postcss-purgecss')({
  // 内容匹配路径，例如 .html 文件
  content: ['./src/**/*.html'],
 
  // 类名匹配，例如 <div class="...">
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
});
 
module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  'postcss-import',
                  tailwindcss('./tailwind.config.js'), // 引入 Tailwind CSS
                  purgecss,
                  'autoprefixer',
                ],
              },
            },
          },
        ],
      },
      // ...
    ],
  },
  // ...
};

确保按照以上步骤检查和调整配置，应该能够解决报错问题。

System

2024-08-17

所有,css

前端开发技能主要包括HTML、CSS和JavaScript的使用，以及对Bootstrap和jQuery的熟悉程度。以下是一些基本的示例代码。

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <button id="myButton">点击我</button>
    <div id="myDiv">这是一个div</div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css):




body {
    background-color: #f0f0f0;
}
 
h1 {
    color: blue;
}
 
#myButton {
    background-color: green;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
 
#myDiv {
    display: none;
    padding: 20px;
    background-color: white;
    border-radius: 5px;
}

JavaScript (script.js):




document.getElementById('myButton').addEventListener('click', function() {
    document.getElementById('myDiv').style.display = 'block';
});

对于Bootstrap和jQuery，通常是通过CDN链接在HTML文件中引入，然后使用它们提供的类和方法来简化开发。例如，使用Bootstrap创建一个模态对话框：

HTML:




<!-- 引入Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 
<div class="modal" id="myModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">模态对话框标题</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>这是一些示例文本。</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div>
 
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开模态对话框</button>

这段代码展示了如何使用Bootstrap创建一个简单的模态对话框，通过按钮触发显示。jQuery用于处理事件和简化DOM操作。

- 阅读更多 -