Tech Blog

CSS 字体图标+定位+平面转换+渐变

2024-08-13




@font-face {
    font-family: 'MyFont';
    src: url('myfont.woff') format('woff');
}
 
.icon-home:before {
    content: '\e001';
    font-family: 'MyFont';
}
 
.icon-home {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(to right, #ff7e5f, #feb47b);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    color: white;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
}

这个例子中，我们首先定义了一个自定义字体，并在.icon-home:before伪元素中使用了字体图标。然后我们使用绝对定位将图标居中，使用translate进行平面转换。背景使用线性渐变从左到右渐变，边框半径为50%，设置了宽度和高度，并在图标内部居中显示文本。这个例子展示了如何结合多种CSS技术来创建一个有趣的图标。

css三角的做法及其案例

2024-08-13

CSS三角可以通过使用透明图像和定位技术来实现。这里是一个简单的例子，展示如何使用CSS创建一个向下指向的三角形：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Triangle Example</title>
<style>
  .triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid black;
  }
</style>
</head>
<body>
  <div class="triangle-down"></div>
</body>
</html>

在这个例子中，.triangle-down 类利用了CSS的边框属性创建了一个向下指向的三角形。border-left 和 border-right 设置为透明，而 border-top 设置为实色，形成了三角形的效果。你可以通过调整 border-top 的大小来改变三角形的大小，调整 border-left 和 border-right 的宽度来改变三角形的宽度。

css中cursor有多少值

2024-08-13

CSS 的 cursor 属性可以有多个值，用于定义鼠标指针放置在元素上时的外观。以下是一些常用的 cursor 值：

default：默认光标（通常是一个箭头）
none：没有指针，通常用于隐藏光标
context-menu：右键菜单光标
pointer：指针（通常用于链接）
wait：等待光标，通常是一个沙漏或圆形加载符号
help：帮助光标，通常是一个问号符号
crosshair：十字箭头光标
progress：已被废弃，效果与 wait 相同
vertical-text：垂直文字光标，通常用于可编辑的文本
n-resize：向北的箭头光标
e-resize：向东的箭头光标
s-resize：向南的箭头光标
w-resize：向西的箭头光标
ne-resize：向北东的对角箭头光标
nw-resize：向北西的对角箭头光标
se-resize：向南东的对角箭头光标
sw-resize：向南西的对角箭头光标
auto：自动光标，浏览器设置的默认指针样式
inherit：继承父元素的光标样式

实例代码：




/* 将光标设置为指针 */
.link {
  cursor: pointer;
}
 
/* 将光标设置为等待 */
.loading {
  cursor: wait;
}
 
/* 将光标设置为不可见 */
.hidden-cursor {
  cursor: none;
}

HTML 使用：




<a href="#" class="link">链接</a>
<div class="loading">加载中...</div>
<div class="hidden-cursor">无法点击</div>

CSS 文字超出显示滚动条

2024-08-13

要在CSS中实现文字超出时显示滚动条，可以使用overflow属性配合white-space和text-overflow属性。以下是实现这种效果的CSS代码示例：




.scrollable-text {
  width: 200px; /* 设置容器宽度 */
  height: 100px; /* 设置容器高度 */
  overflow: auto; /* 当内容超出容器尺寸时显示滚动条 */
  white-space: nowrap; /* 确保文本不会换行 */
  text-overflow: ellipsis; /* 当文本超出容器宽度时显示省略号 */
}

接下来，将这个类应用到你的HTML元素上：




<div class="scrollable-text">
  这里是很长的文字内容，当内容超出容器宽度时，会显示滚动条而不是换行。
</div>

这样，当内容超出.scrollable-text类定义的容器尺寸时，就会在必要的时候显示滚动条。

CSS 实现平均分布，自适应换行，不限数量

2024-08-13

要实现一个在CSS中的平均分布、自适应换行、不限制数量的布局，可以使用Flexbox布局。以下是一个简单的例子，演示了如何使用Flexbox来实现这样的布局：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Average Distribution</title>
<style>
  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
  }
  .item {
    flex: 1;
    margin: 5px;
    padding: 10px;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
</style>
</head>
<body>
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <!-- ... 更多的.item元素 -->
</div>
</body>
</html>

在这个例子中，.container 是一个使用Flexbox布局的容器，其 flex-wrap: wrap; 属性确保当项目无法在一行内显示时，它们会自动换行。.item 是容器中的子元素，它们通过 flex: 1; 平等地分配可用空间，justify-content: space-around; 确保子元素在水平方向上均匀分布，即使在第一行也是如此。

这个布局适用于所有现代浏览器，并且能够适应不同的屏幕和窗口大小。子元素.item可以自由地增加或减少，Flexbox 会相应地调整它们的大小和数量。

【CSS小例】赛博朋克-按钮动画

2024-08-13

以下是一个简化的例子，展示了如何使用CSS创建一个简单的赛博朋克风格的按钮动画效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reboot Neumorphic Button Animation</title>
<style>
  .button {
    /* 基础样式 */
    display: inline-block;
    padding: 10px 20px;
    margin: 10px;
    background-color: #2f3238;
    color: #fafafa;
    text-decoration: none;
    border-radius: 4px;
    transition: transform 0.1s, box-shadow 0.1s; /* 动画过渡效果 */
  }
 
  .button:hover {
    /* 鼠标悬停样式 */
    transform: translateY(-5px); /* 悬停时向上移动 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
  }
</style>
</head>
<body>
 
<a href="#" class="button">Hover Over Me!</a>
 
</body>
</html>

这段代码展示了一个简单的赛博朋克风格的按钮，当鼠标悬停在按钮上时，会有轻微的上移和阴影效果。这种效果在现代网页设计中常常用来增强交互体验。

css块元素，行内元素，行内块元素详解

2024-08-13

块元素(block element)：

独占一行，表现为另起一行开始，一直到换行结束。
可以设置宽度、高度、外边距(margin)和内边距(padding)。
常见块元素有：<h1>, <p>, <div>, <ul>, <table>等。

行内元素(inline element)：

和其他元素在同一行上，不会另起一行。
不能直接设置宽度、高度、外边距(margin)和内边距(padding)，它的大小由内容撑开。
常见行内元素有：<span>, <a>, <img>, <input>等。

行内块元素(inline-block element)：

和其他元素在同一行上，表现为另起一行开始，一直到换行结束。
可以设置宽度、高度、外边距(margin)和内边距(padding)。
常见行内块元素有：<img>, <input>, <td>等。

CSS的2D、3D、浏览器私有前缀

2024-08-13

CSS的2D和3D转换、动画以及过渡效果通常需要浏览器特定的“前缀”，以确保在不同浏览器上的兼容性。这些前缀包括但不限于以下几种：

对于2D转换，你可能会用到 transform 属性，这时候的前缀是 -webkit-transform、-moz-transform、-o-transform 等。
对于3D转换，除了2D转换的前缀，还需要额外的 -webkit-transform-style 和 -webkit-perspective 属性。
对于动画，animation 和 transition 属性都需要前缀。

以下是一个简单的示例，展示了如何为CSS的2D转换添加浏览器私有前缀：




/* 标准语法 */
.box {
  transform: rotate(45deg);
  /* 其他样式 */
}
 
/* 浏览器私有前缀 */
.box {
  -webkit-transform: rotate(45deg); /* Chrome, Safari, 新版 Edge */
  -moz-transform: rotate(45deg);    /* Firefox */
  -ms-transform: rotate(45deg);     /* 旧版 IE */
  -o-transform: rotate(45deg);      /* 旧版 Opera */
  /* 其他样式 */
}

对于3D转换，你还需要添加 transform-style: preserve-3d; 和 perspective: 1000px; 等样式：




/* 标准语法 */
.stage {
  transform-style: preserve-3d;
  perspective: 1000px;
  /* 其他样式 */
}
 
/* 浏览器私有前缀 */
.stage {
  -webkit-transform-style: preserve-3d;
  -webkit-perspective: 1000px;
  /* 其他样式 */
}

对于CSS动画，你需要添加如 animation 和 transition 的前缀：




/* 标准语法 */
.box {
  animation: slide-in 1s ease-in-out forwards;
  /* 其他样式 */
}
 
/* 浏览器私有前缀 */
.box {
  -webkit-animation: slide-in 1s ease-in-out forwards;
  -moz-animation: slide-in 1s ease-in-out forwards;
  -ms-animation: slide-in 1s ease-in-out forwards;
  -o-animation: slide-in 1s ease-in-out forwards;
  /* 其他样式 */
}

现代浏览器通常不再需要特定的私有前缀，但为了确保广泛的兼容性，你可能需要在某些旧版本的浏览器中包含这些前缀。自动添加这些前缀的工具和构建工具（如 Gulp、Webpack 和 Sass/LESS 预处理器）能够帮助简化这个过程。

2024-08-13




const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const path = require('path');
 
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader',
        ],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.css',
    }),
  ],
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin(),
      new TerserPlugin(),
    ],
    cleanStaleWebpackAssets: true,
  },
};

这个配置文件展示了如何使用Webpack 5来处理各种资源，包括CSS、LESS、图片和字体文件。它使用了mini-css-extract-plugin插件来提取CSS，并通过css-loader和less-loader来处理LESS文件。图片和字体文件被处理成Webpack资产，并在优化阶段被清理。