1. 首页
  2. 分类
  3. css
使用 HTML、CSS 和 JavaScript 实现滚动触发的小球弹出和切换 Banner 动画
System
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>Banner 弹出小球动画</title>
<style>
  .banner {
    position: relative;
    width: 100%;
    height: 100vh;
    background: url('banner-bg.jpg') no-repeat center center;
    background-size: cover;
    overflow: hidden;
  }
  .ball {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 50%;
    transition: 1s ease-in-out;
  }
</style>
</head>
<body>
<div class="banner">
  <div class="ball"></div>
</div>
<script>
window.addEventListener('scroll', function() {
  var banner = document.querySelector('.banner');
  var ball = document.querySelector('.ball');
  var bannerTop = banner.getBoundingClientRect().top;
  var scrollPercent = 100 - (Math.abs(bannerTop) / (window.innerHeight - banner.offsetHeight) * 100);
  if (scrollPercent >= 0 && scrollPercent <= 100) {
    ball.style.transform = 'translateY(' + (scrollPercent - 100) * 1.5 + 'px) translateX(-50%)';
  }
});
</script>
</body>
</html>

这段代码实现了滚动时小球上移的效果，并且根据滚动位置计算小球的移动距离。当用户滚动到 Banner 区域时，小球会根据滚动的进度上移，创造出滚动触发的动画效果。

- 阅读更多 -
CSS|文本溢出隐藏效果（单行&&多行）
System
2024-08-13
所有,css



/* 单行文本溢出隐藏 */
.single-line-truncate {
  width: 250px; /* 定义容器宽度 */
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
}
 
/* 多行文本溢出隐藏 */
.multi-line-truncate {
  width: 250px; /* 定义容器宽度 */
  overflow: hidden; /* 隐藏溢出的内容 */
  display: -webkit-box; /* 使用弹性盒子布局模型 */
  -webkit-line-clamp: 3; /* 限制在3行 */
  -webkit-box-orient: vertical; /* 垂直排列盒子 */
  text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
}

这段代码定义了两个类，.single-line-truncate用于单行文本溢出隐藏，.multi-line-truncate用于多行文本溢出隐藏。在多行文本隐藏中，-webkit-line-clamp属性定义了文本的最大行数，超出这个数量的文本会被隐藏。这种方法主要使用了WebKit浏览器的私有属性，因此可能不是所有浏览器都支持，但对于大多数现代浏览器（如Chrome、Safari和Edge）来说，这是一个很好的方案。

- 阅读更多 -
CSS 三大特性、盒子模型、浮动
System
2024-08-13
所有,css

在CSS中，三大特性指的是层叠性、继承性和优先级。盒子模型包括内容区域（content）、填充区域（padding）、边框区域（border）、外边距区域（margin）。浮动是CSS中的一个属性，用于创建多列布局。

层叠性：当多个样式作用于同一个元素时，会根据样式的优先级来决定哪个样式最终生效。

继承性：某些CSS属性是可以被继承的，比如字体和颜色。

优先级：当多个选择器选中同一个元素，并且每个选择器都有自己的样式声明时，会根据选择器的权重来决定哪个样式最终生效。

盒子模型：




.box {
  content: 200px; /* 内容区域 */
  padding: 20px; /* 填充区域 */
  border: 1px solid black; /* 边框区域 */
  margin: 10px; /* 外边距区域 */
}

浮动：




.float-left {
  float: left; /* 元素向左浮动 */
}
 
.float-right {
  float: right; /* 元素向右浮动 */
}
 
.clearfix::after {
  content: "";
  display: table;
  clear: both; /* 清除浮动 */
}

使用时：




<div class="box float-left clearfix">内容</div>

以上代码展示了如何使用这些概念来创建一个左浮动的盒子，并使用clearfix来清除浮动，避免影响其他元素的布局。

- 阅读更多 -
Html + Css 核心知识 - flex （超详细）
System
2024-08-13
所有,css

CSS的Flexbox布局模块提供了在一维轴上布置内容的灵活方式。Flexbox可以使容器内的子元素能够改变其尺寸以适应可用空间，并以最佳方式进行排列。

以下是Flexbox的一些核心概念：

  1. Flex Container: 使用display属性设置为flex或inline-flex的元素。
  2. Flex Items: Flex container的直接子元素。
  3. Axis: Flex布局中的主轴和交叉轴，默认主轴为水平方向，交叉轴为垂直方向。
  4. Main-Axis Alignment: 项目沿主轴排列的方式。
  5. Cross-Axis Alignment: 项目沿交叉轴排列的方式。

基本属性：

  • flex-direction: 主轴方向，可以是row(水平，默认), row-reverse(水平反向), column(垂直), column-reverse(垂直反向)。
  • flex-wrap: 如果项目无法一次性放置在一条轴线上时是否换行，可以是nowrap(不换行，会压缩), wrap(换行), wrap-reverse(换行反向)。
  • flex-flow: 是flex-direction和flex-wrap的简写，默认为row nowrap。
  • justify-content: 主轴上的对齐方式，可以是flex-start(起始端对齐), flex-end(末尾端对齐), center(居中), space-between(两端对齐，空间间隔相等), space-around(每个项目两侧的空间相等), space-evenly(所有空间间隔相等)。
  • align-items: 交叉轴上的对齐方式，可以是stretch(默认值，如果项目未设置高度或设为auto，将占满整个容器高度), flex-start(交叉轴起点对齐), flex-end(交叉轴终点对齐), center(交叉轴中点对齐), baseline(项目第一行文字的基线对齐)。
  • align-content: 定义了多根轴线的对齐方式，如果只有一根轴线则不起作用，可以是stretch(默认值，轴线占满整个交叉轴), flex-start(轴线起点对齐), flex-end(轴线终点对齐), center(轴线中点对齐), space-between(轴线两端对齐，轴线间间隔相等), space-around(每条轴线两侧的空间相等), space-evenly(轴线间的空间相等)。

项目属性：

  • order: 定义项目的排列顺序，数值越小，排列越靠前，默认为0。
  • flex-grow: 定义项目的放大比例，默认为0，即如果存在剩余空间也不放大。
  • flex-shrink: 定义项目的缩小比例，默认为1，即如果空间不足将等比缩小。
  • flex-basis: 定义了在分配多余空间之前，项目占据的主轴空间（main size），默认值为auto，即项目本来大小。
  • flex: 是flex-grow, flex-shrink 和 flex-basis的简写，默认值0 1 auto。
  • align-self: 允许单个项目有与其他项目不一样的对齐方式，可以覆盖align-items属性，可以是auto(继承父元素), flex-start, flex-end, center, baseline, stretch。

实例代码：

HTML:




<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</
- 阅读更多 -
LASS: 优雅地构建现代化CSS
System
2024-08-13
所有,css

LASS 是一个用于构建现代化CSS的工具库，它提供了一种优雅的方式来组织和管理样式代码。以下是一个简单的例子，展示如何使用LASS来构建一个按钮的样式：

首先，确保你已经安装了LASS。如果还没有安装，可以通过npm进行安装：




npm install lass

然后，你可以在JavaScript文件中使用LASS来定义按钮的样式：




import { style } from 'lass';
 
const buttonStyle = style({
  // 选择器
  selectors: {
    '.btn': {
      // 属性
      display: 'inline-block',
      padding: '10px 20px',
      border: '1px solid #ccc',
      borderRadius: '4px',
      color: '#333',
      backgroundColor: '#fff',
      cursor: 'pointer',
      // 伪类
      ':hover': {
        backgroundColor: '#e7e7e7'
      },
      // 媒体查询
      '@media (max-width: 600px)': {
        padding: '5px 10px'
      }
    }
  }
});
 
// 应用样式到HTML
buttonStyle.attach();

在上面的例子中，我们定义了一个.btn的样式，包括了显示、内边距、边框、边框半径、文本颜色、背景颜色以及鼠标悬停时的背景颜色。同时，我们还包括了一个媒体查询，用于在屏幕宽度小于600px时改变按钮的内边距。

最后，我们调用buttonStyle.attach()将样式应用到文档中所有匹配的元素上。这样，LASS就会根据你定义的样式规则来生成相应的CSS代码，并且自动将其注入到<head>标签内。

这个例子展示了如何使用LASS来构建一个简单的按钮样式，并且保持了代码的优雅和组织性。

- 阅读更多 -
CSS 中的 Clamp 函数：掌握动态布局的秘籍
System
2024-08-13
所有,css

Clamp() 函数是一个强大的 CSS 工具，它允许开发者创建一个动态范围，该范围将根据用户的设备或浏览器窗口大小自动调整。Clamp() 函数接受三个参数：一个最小值，一个首选值，和一个最大值。

Clamp() 函数的使用场景非常广泛，例如可以用来创建响应式布局，动态调整字体大小，或者在一些特殊的设计需求中创建独特的设计效果。

以下是一些使用 Clamp() 函数的示例：

  1. 创建响应式布局：



.container {
  width: clamp(100px, 50%, 500px);
}

在这个例子中，.container 的宽度将会被设定为在 100px 到 500px 之间，但是在屏幕尺寸较小时，宽度会尽可能接近 50%。

  1. 动态调整字体大小：



p {
  font-size: clamp(12px, 2.5vw, 24px);
}

在这个例子中，段落的字体大小将会被设定为在 12px 到 24px 之间，但是在屏幕尺寸较小时，字体大小会尽可能接近 2.5vw。

Clamp() 函数是 CSS 中一个非常有用的工具，它可以帮助开发者更容易地创建出灵活且响应式的设计。然而，由于它是一个较新的特性，可能并不是所有的浏览器都支持它，因此在使用时可能需要考虑浏览器的兼容性问题。

- 阅读更多 -
vite配置文件共享配置，公共配置（root，base，mode，define，plugins，publicDir，resolve，html，css，envDir）（2024-05-28）
System
2024-08-13
所有,css

在Vite项目中，可以通过创建一个vite.config.js文件来共享和配置项目的基础设置。以下是一个简单的例子，展示了如何在多个配置文件中共享配置：




// vite.config.common.js
export default {
  root: 'src',
  base: './',
  mode: 'development',
  define: {
    'process.env': process.env
  },
  plugins: [],
  publicDir: 'public',
  resolve: {
    alias: {
      '@': '/src'
    }
  }
};
 
// vite.config.prod.js
import baseConfig from './vite.config.common.js';
 
export default {
  ...baseConfig,
  mode: 'production',
  // 在这里添加生产环境特有的配置
};
 
// vite.config.dev.js
import baseConfig from './vite.config.common.js';
 
export default {
  ...baseConfig,
  mode: 'development',
  // 在这里添加开发环境特有的配置
};

在这个例子中，我们定义了一个通用配置文件vite.config.common.js，然后根据需要创建了vite.config.prod.js和vite.config.dev.js，分别用于生产环境和开发环境的配置。通过导入和扩展基础配置对象，我们可以确保开发和生产环境之间的配置是一致的，同时又能添加环境特有的配置。

- 阅读更多 -
十几个CSS高级常见技巧汇总（虚线框、三角形、优惠券卡券、滚动条、多行溢出
System
2024-08-13
所有,css
  1. 使用CSS创建一个虚线框：



.dashed-border {
  border: 1px dashed #000;
}
  1. 使用CSS创建一个三角形：



.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #000;
}
  1. 创建一个优惠券卡券的样式：



.coupon {
  position: relative;
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 20px;
  margin: 10px;
}
 
.coupon::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-bottom: 20px solid #fff;
  border-left: 20px solid #ddd;
}
  1. 自定义滚动条样式：



/* 隐藏滚动条，但仍可滚动 */
.scrollable {
  overflow: auto;
  scrollbar-width: none; /* 对于IE, Edge */
}
 
.scrollable::-webkit-scrollbar {
  width: 0;
  height: 0;
}
  1. 使用CSS实现多行文本溢出显示省略号：



.multi-line-ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 显示的行数 */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
- 阅读更多 -
css flex 布局换行
System
2024-08-13
所有,css

在CSS Flexbox布局中，如果想要在容器内的项目超过容器宽度时能够自动换行，可以将CSS属性 flex-wrap 设置为 wrap。

以下是一个简单的例子：

HTML:




<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <!-- 更多的项目 -->
</div>

CSS:




.flex-container {
  display: flex;      /* 定义一个flex容器 */
  flex-wrap: wrap;    /* 允许换行 */
  width: 100%;        /* 容器宽度可以设置为100%，也可以是固定值或max-width */
}
 
.flex-item {
  flex: 1;            /* 让所有子项占据等分的空间 */
  margin: 5px;        /* 项目之间的间隔 */
  min-width: 100px;   /* 最小宽度，防止项目缩得太小 */
}

在这个例子中，.flex-container 是一个flex容器，通过设置 flex-wrap: wrap; 属性，当容器内的空间不足以容纳更多的项目时，项目会自动移到下一行。.flex-item 是容器内的子项，它们会等分分配容器的空间，并且每个项目至少有100px宽，以防止它们变得太小。

- 阅读更多 -
js+css元素动态出现,前端让元素从底部动态显现,前端让元素从底部跳跃显示
System
2024-08-13
所有,css

要实现一个元素从底部动态显现，并且有一个跳跃效果，可以使用CSS动画。以下是一个简单的例子：

HTML:




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

CSS:




.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: absolute;
  bottom: -100px; /* 开始时元素在视口之外 */
  animation: slide-in 2s forwards; /* 动画名称，持续时间，填充模式 */
}
 
@keyframes slide-in {
  to {
    bottom: 0; /* 动画结束时元素位于视口底部 */
  }
}

JavaScript (如果需要动态添加元素):




const box = document.createElement('div');
box.classList.add('box');
document.body.appendChild(box);

这段代码会创建一个类名为box的元素，并且通过CSS动画让它从页面底部向上移动，直至到达页面底部。如果你想要一个“跳跃”的效果，可以调整动画关键帧或使用不同的动画属性。

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号