1. 首页
  2. 标签
  3. css
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 中一个非常有用的工具，它可以帮助开发者更容易地创建出灵活且响应式的设计。然而，由于它是一个较新的特性，可能并不是所有的浏览器都支持它，因此在使用时可能需要考虑浏览器的兼容性问题。

- 阅读更多 -
十几个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动画让它从页面底部向上移动，直至到达页面底部。如果你想要一个“跳跃”的效果，可以调整动画关键帧或使用不同的动画属性。

- 阅读更多 -
CSS 之 过渡动画（transition）
System
2024-08-13
所有,css

CSS过渡动画可以使页面的元素在状态改变时平滑地过渡，而不是突兀的跳转。以下是一个简单的例子，演示了如何使用CSS过渡动画。

HTML:




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

CSS:




.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 1s, background-color 1s;
}
 
.box:hover {
  width: 200px;
  background-color: red;
}

在这个例子中，.box元素在鼠标悬停时宽度会在1秒钟内从100px变为200px，背景色会从蓝色变为红色。transition属性定义了过渡动画的具体参数，这里指定了宽度(width)和背景色(background-color)变化需要1秒钟平滑过渡。

- 阅读更多 -
CSS实现文本显示两行(或者多行)，超过部分用省略号隐藏
System
2024-08-13
所有,css

CSS可以使用以下属性来实现文本显示两行，超出部分用省略号隐藏：




.ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  white-space: normal;
}

HTML部分：




<div class="ellipsis">
  这里是一段很长的文本，如果这段文本足够长，它将会显示为两行，并且超出的部分会被隐藏，末尾会出现省略号。
</div>

这段CSS样式适用于WebKit内核的浏览器（如Chrome和Safari）。-webkit-line-clamp属性定义了元素的最大行数。当内容超过这个数量的行数时，超出的部分会被隐藏，并且最后会出现省略号。

- 阅读更多 -
CSS - 深入理解选择器的使用方式
System
2024-08-13
所有,css

在CSS中，选择器是用于选择需要添加样式的HTML元素的模式。选择器有多种类型，包括基础选择器、组合选择器、属性选择器、伪类和伪元素选择器等。

以下是一些使用CSS选择器的示例：

  1. 基础选择器：



/* 标签选择器 */
p { color: blue; }
 
/* 类选择器 */
.my-class { background-color: yellow; }
 
/* ID选择器 */
#my-id { font-size: 20px; }
 
/* 通用选择器 */
* { margin: 0; padding: 0; }
  1. 组合选择器：



/* 交集选择器 */
p.my-class { color: red; } /* 选择拥有类my-class的所有p元素 */
 
/* 并集选择器 */
h1, h2, h3 { font-family: Arial, sans-serif; } /* 选择所有的h1、h2和h3元素 */
  1. 属性选择器：



/* 属性选择器 */
input[type="text"] { background-color: green; }
 
/* 带有特定属性值的选择器 */
div[class="container"] { border: 1px solid black; }
  1. 伪类选择器：



/* 链接伪类 */
a:link { color: blue; } /* 未访问的链接 */
a:visited { color: purple; } /* 已访问的链接 */
a:hover { color: red; } /* 鼠标悬停 */
a:active { color: yellow; } /* 选定的链接 */
 
/* 伪类选择器：:first-child */
ul li:first-child { color: green; } /* 列表中的第一个元素 */
  1. 伪元素选择器：



/* 伪元素选择器 */
p::first-letter { font-size: 200%; } /* 段落的第一个字母 */
p::before { content: "[" attr(data-info) "] "; } /* 在元素内容前插入 */

CSS选择器是CSS的核心部分，了解和使用它们是每个前端开发人员必备的技能。

- 阅读更多 -
使用CSS3 + Vue3 + js-tool-big-box工具，实现炫酷五一倒计时动效
System
2024-08-13
所有,vue.js



<template>
  <div class="countdown-container">
    <big-box class="countdown-box">
      <div class="countdown-timer">
        <div class="timer-segment">
          <span class="timer-number">{{ days }}</span>
          <span class="timer-label">天</span>
        </div>
        <div class="timer-segment">
          <span class="timer-number">{{ hours }}</span>
          <span class="timer-label">时</span>
        </div>
        <div class="timer-segment">
          <span class="timer-number">{{ minutes }}</span>
          <span class="timer-label">分</span>
        </div>
        <div class="timer-segment">
          <span class="timer-number">{{ seconds }}</span>
          <span class="timer-label">秒</span>
        </div>
      </div>
    </big-box>
  </div>
</template>
 
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import BigBox from 'js-tool-big-box';
 
const countDownDate = ref(new Date('2023-05-01T23:59:59').getTime());
const timer = ref(null);
 
const days = ref(0);
const hours = ref(0);
const minutes = ref(0);
const seconds = ref(0);
 
const updateClock = () => {
  const now = new Date().getTime();
  const distance = countDownDate.value - now;
 
  if (distance < 0) {
    clearInterval(timer.value);
    return;
  }
 
  days.value = Math.floor(distance / (1000 * 60 * 60 * 24));
  hours.value = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  minutes.value = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  seconds.value = Math.floor((distance % (1000 * 60)) / 1000);
};
 
onMounted(() => {
  timer.value = setInterval(updateClock, 1000);
});
 
onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value);
  }
});
</script>
 
<style scoped>
.countdown-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
 
.countdown-box {
  width: 300px;
  height: 150px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: ce
- 阅读更多 -
CSS利用高斯模糊实现背景虚拟化
System
2024-08-13
所有,css



/* 创建一个模糊背景的伪元素 */
.element::before {
  content: "";
  position: absolute;
  top: -10px; /* 确保模糊区域在元素之上 */
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: inherit; /* 继承父元素的背景色 */
  filter: blur(10px); /* 应用高斯模糊 */
  z-index: -1; /* 确保模糊背景在内容下方 */
}
 
/* 应用于具体元素 */
.element {
  position: relative; /* 相对定位以便于::before绝对定位 */
  background-image: url('background.jpg'); /* 设置元素的背景图片 */
  /* 其他样式 */
}

这段代码定义了一个伪元素，并将其置于父元素背景的模糊版之上。这种方法可以有效地模糊背景，并为内容创建一种虚拟化的效果，而不需要额外的图片或复杂的布局技巧。

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