分类前端技术下的文章

2024-08-24

CSS 动画可以通过关键帧（@keyframes）来定义。为了实现一个右进左出的动画效果，我们可以定义两个关键帧：进场和离场。

以下是一个简单的例子：




/* 定义进场动画 */
@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
 
/* 定义离场动画 */
@keyframes slideOutToRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
 
/* 应用动画 */
.element {
  animation: slideInFromRight 1s ease forwards;
}
 
/* 离场时应用动画 */
.element-leave {
  animation: slideOutToRight 1s ease forwards;
}

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




<div class="element">我从右边进来</div>
<!-- 某个时刻触发离场 -->
<div class="element-leave">我会从右边走</div>

当 .element 进入页面时，它会执行 slideInFromRight 动画，从右侧的100%位置开始，到0%位置结束，并逐渐变为完全可见。

当 .element-leave 类被添加时，元素会执行 slideOutToRight 动画，从当前位置开始，移动到右侧100%的位置，并逐渐变为不可见，完成离场动画。

animation 属性的值包括动画名称（slideInFromRight 和 slideOutToRight）、持续时间、缓动函数、填充模式（forwards 保证动画完成后元素保持在结束状态）。

- 阅读更多 -

CSS 2D转换动画 3D转换

System

2024-08-24

所有,css

在CSS中，我们可以使用2D转换、动画和3D转换来创建引人入胜的视觉效果。以下是一些示例代码：

2D转换动画：




.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 2s infinite;
}
 
@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

在这个例子中，我们创建了一个名为"move"的关键帧动画，它将一个名为"box"的元素从左侧移动到右侧。

3D转换动画：




.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: rotate 2s infinite linear;
}
 
@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

在这个例子中，我们创建了一个名为"rotate"的关键帧动画，它将一个名为"box"的元素绕Y轴旋转。

2D转换与3D转换结合动画：




.box {
  width: 100px;
  height: 100px;
  background-color: red;
  perspective: 500px;
  animation: rotate 2s infinite linear;
}
 
@keyframes rotate {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

在这个例子中，我们创建了一个名为"rotate"的关键帧动画，它将一个名为"box"的元素绕X轴和Y轴旋转。

以上代码仅展示了2D转换、3D转换和动画的简单应用，CSS还有许多其他的特性和用法，可以创建出更加复杂和引人入胜的动画效果。

- 阅读更多 -

html + css 布局技巧总结 ——多列布局

System

2024-08-24

所有,css

在HTML和CSS中实现多列布局的一种常见方法是使用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>Flexbox Layout Example</title>
<style>
  .container {
    display: flex; /* 使用Flexbox布局 */
  }
  .column {
    flex: 1; /* 每个列平分空间 */
    padding: 10px; /* 列的内边距 */
  }
</style>
</head>
<body>
<div class="container">
  <div class="column">
    <p>Column 1</p>
    <!-- 内容 -->
  </div>
  <div class="column">
    <p>Column 2</p>
    <!-- 内容 -->
  </div>
  <div class="column">
    <p>Column 3</p>
    <!-- 内容 -->
  </div>
</div>
</body>
</html>

在这个例子中，.container 类使用 display: flex 属性来指定Flexbox布局。.column 类使用 flex: 1 来确保所有列平等地分配容器的空间。这种方法提供了一个灵活的多列布局，适用于各种屏幕尺寸和设备。

- 阅读更多 -

推荐开源项目：Open Props —— 开源的 CSS 变量库

System

2024-08-24

所有,css

Open Props 是一个开源的 CSS 变量库，旨在简化样式管理和主题切换。通过预定义的样式变量和插件，Open Props 提供了一种方法来创建响应式和可访问的网站。

以下是如何使用 Open Props 的一个基本示例：

首先，在项目中安装 Open Props：




npm install open-props

然后，在你的 CSS 文件中引入 Open Props：




@import 'open-props/dist/open-props.min.css';
 
/* 使用 Open Props 的变量 */
body {
  background-color: var(--open-props-color-background);
  color: var(--open-props-color-text);
  font-family: var(--open-props-font-family-sans-serif);
}

接下来，你可以使用 Open Props 提供的变量来设置你的样式，从而简化样式的定义和维护。

Open Props 还提供了一个插件系统，允许开发者创建自定义的样式变量和功能，进一步提高样式管理的灵活性。




// 引入 Open Props 插件系统
import { openPropsPlugin } from 'open-props';
 
// 使用插件系统定义新的变量
const customPlugin = {
  variables: {
    '--my-custom-color': 'blue',
  },
};
 
// 应用插件
openPropsPlugin(customPlugin);

使用 Open Props 可以帮助你更好地组织和维护你的样式代码，使得样式的定制和扩展变得更加容易。

- 阅读更多 -

【CSS】认识CSS选择器及各选择器对应的用法

System

2024-08-24

所有,css

CSS选择器是用来选择你想要样式化的HTML元素的模式。下面是一些常用的CSS选择器以及它们的用法：

元素选择器（Element Selector）: 选择特定的元素。




p {
  color: blue;
}

类选择器（Class Selector）: 选择具有特定类的元素。




.my-class {
  background-color: yellow;
}

ID选择器（ID Selector）: 选择具有特定ID的元素。




#my-id {
  font-size: 20px;
}

属性选择器（Attribute Selector）: 选择包含特定属性的元素。




input[type="text"] {
  border: 1px solid black;
}

伪类选择器（Pseudo-class Selector）: 选择特定状态的元素。




a:hover {
  text-decoration: underline;
}

伪元素选择器（Pseudo-element Selector）: 选择特定位置的内容。




p::first-letter {
  font-size: 200%;
}

子代选择器（Child Selector）: 选择特定父元素的子元素。




div > p {
  color: red;
}

相邻选择器（Adjacent Sibling Selector）: 选择紧接在另一个元素后的元素。




h1 + p {
  margin-top: 0;
}

后代选择器（Descendant Selector）: 选择特定父元素的后代元素。




div p {
  color: green;
}

通配选择器（Universal Selector）: 选择所有元素。




* {
  margin: 0;
  padding: 0;
}

组选择器（Grouping Selector）: 将选择器组合在一起。




h1, h2, h3 {
  font-family: Arial, sans-serif;
}

这些是CSS中的基本选择器。更复杂的选择器可以通过组合这些基本构造块创建。

- 阅读更多 -

uni-app引用子组件中后穿透三方组件css失效

System

2024-08-24

所有,css

uni-app 中引用子组件时遇到三方组件CSS样式不生效的问题通常是因为其作用域隔离造成的。uni-app 使用了 Vue 的组件化机制，并且为了兼容不同端，默认会给组件添加一个data-v-hash的属性，以及相应的作用域隔离样式。

解决方法：

使用深度选择器（deep selector）：在子组件的style标签中，使用/deep/（对于Vue2）或>>>（对于Vue3）来穿透组件边界，应用三方组件的样式。




<style scoped>
/deep/ .third-party-class {
  /* 三方组件的样式 */
}
</style>

或者在Vue3中：




<style scoped>
>>> .third-party-class {
  /* 三方组件的样式 */
}
</style>

使用全局样式：将三方组件的样式提取出来，放在App.vue或者全局样式文件中，这样可以确保不受当前组件的作用域隔离影响。




<style>
.third-party-class {
  /* 三方组件的样式 */
}
</style>

避免使用scoped属性：如果不希望使用深度选择器，可以移除<style>标签中的scoped属性，但这会影响整个应用中所有组件的样式作用域，确保不会与其他组件样式发生冲突。




<style>
.third-party-class {
  /* 三方组件的样式 */
}
</style>

注意：在实际开发中，应该谨慎使用全局样式或移除scoped属性，因为它们可能会影响应用的性能和样式管理。通常推荐使用/deep/或>>>来保持组件的样式封装性，避免潜在的样式污染问题。

- 阅读更多 -

拉伸图片覆盖整个页面的css写法

System

2024-08-24

所有,css

要使图片完全覆盖整个页面，可以使用CSS的background-size属性，并将其设置为cover。同时，确保图片设置为背景图片，而不是作为<img>标签的一部分。以下是实现这一效果的CSS代码示例：




html, body {
  height: 100%;
  margin: 0;
}
 
body {
  background-image: url('path/to/your/image.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

这段代码将确保背景图片始终覆盖整个页面，同时保持图片的宽高比，并且图片会根据页面尺寸进行相应的缩放。background-position属性确保图片从页面的中心开始覆盖，background-attachment: fixed; 确保背景图片固定，不会随着内容滚动。

- 阅读更多 -

推荐开源项目：Simple Keyboard - 纯CSS实现的虚拟键盘

System

2024-08-24

所有,css

Simple Keyboard 是一个纯 CSS 实现的虚拟键盘，可以用于网页输入。以下是如何使用 Simple Keyboard 的基本步骤：

在你的 HTML 文件中引入 simple-keyboard 的 CSS 和 JavaScript 文件。




<link rel="stylesheet" href="simple-keyboard.css">
<script src="simple-keyboard.js"></script>

创建一个用于显示键盘的容器元素。




<div id="keyboard"></div>

初始化 Simple Keyboard。




var keyboard = new Keyboard({
    onChange: input => onChange(input),
    onKeyPress: button => onKeyPress(button)
});
 
function onChange(input) {
    console.log("Input changed!", input);
}
 
function onKeyPress(button) {
    console.log("Button pressed!", button);
}

这个简单的例子展示了如何创建和初始化一个基本的键盘。Simple Keyboard 还支持自定义键盘布局、输入类型、键位装饰等功能。

- 阅读更多 -

css记录：三维变换之transform

System

2024-08-24

所有,css

CSS的transform属性可以对元素进行2D或3D转换。以下是一些使用transform进行3D转换的例子：

旋转（rotate）一个元素：




.element {
  transform: rotateY(60deg); /* 绕Y轴旋转60度 */
}

缩放（scale）一个元素：




.element {
  transform: scale3d(1.5, 1.5, 1.5); /* 在3D空间中缩放 */
}

移动（translate）一个元素：




.element {
  transform: translate3d(50px, 100px, 20px); /* 在3D空间中移动 */
}

倾斜（skew）一个元素：




.element {
  transform: skewX(30deg); /* 沿X轴倾斜30度 */
}

transform属性可以应用于2D或3D转换，包括旋转、缩放、移动、倾斜等操作，并且可以通过transform-style属性来设置3D空间中的元素是否保持其3D位置。

- 阅读更多 -

React 中 CSS in JS 的最佳实践，先收藏了

System

2024-08-24

所有,css

在React中，CSS in JS是一种实现方式，它允许我们在组件内部直接编写CSS。这种方法有一些优点，例如可以避免CSS类名冲突，但也有一些缺点，例如增加了组件的体积和复杂性。

以下是一些CSS in JS的最佳实践：

使用styled-components库

styled-components是一个库，它允许我们使用JavaScript来编写CSS。这是一个很好的实践，因为它可以保持组件的功能性和样式的封装性。




import styled from 'styled-components';
 
const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
`;
 
export default function App() {
  return <Button>Click me</Button>;
}

使用emotion或者styled-jsx库

如果你不想使用styled-components，你还可以选择使用emotion或者styled-jsx。这两个库都允许你在React组件中直接编写CSS。




/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
 
function App() {
  const buttonStyle = css`
    background-color: blue;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
  `;
 
  return <button css={buttonStyle}>Click me</button>;
}
 
export default App;

避免使用内联样式

尽管CSS in JS是一个很好的工具，但是你应该避免在每个组件中使用内联样式。内联样式会使得组件难以维护，并且会使得样式和组件的逻辑混在一起，不易于分离。

使用CSS模块

CSS模块允许你将CSS文件封装起来，只在特定的组件中使用。这样可以避免全局样式冲突，并使得样式更容易维护。




// App.module.css
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
 
// App.js
import styles from './App.module.css';
 
function App() {
  return <button className={styles.button}>Click me</button>;
}
 
export default App;

避免在样式中使用JavaScript表达式

尽管CSS in JS允许你使用JavaScript表达式，但是你应该避免这样做，因为这会使得样式难以预测和维护。

总结：尽管CSS in JS有一些优点，但是也有一些缺点。在实践中，我们应该根据具体情况来选择最佳实践，并尽量避免不良影响。

- 阅读更多 -