标签 css 下的文章

2024-08-07

在CSS中，可以使用-webkit-line-clamp属性配合display: -webkit-box和-webkit-box-orient: vertical来实现多行文本的缩略，并通过JavaScript来实现点击更多按钮后展开全文的效果。

以下是实现该功能的示例代码：

HTML:




<div class="text-container">
  <p class="text">这里是一段很长的文本，需要显示为多行文本，并且在最后显示一个“更多”按钮。点击后可以展开全文。</p>
  <button class="read-more-btn">更多</button>
</div>

CSS:




.text-container {
  overflow: hidden;
  position: relative;
  line-height: 1.5em;
}
 
.text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 定义文本的最大显示行数 */
  overflow: hidden;
  text-overflow: ellipsis;
}
 
.read-more-btn {
  display: none; /* 默认隐藏按钮 */
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 5px 10px;
}
 
.text-container .text::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}

JavaScript:




document.querySelector('.read-more-btn').addEventListener('click', function() {
  var container = this.parentNode;
  container.classList.remove('text-container'); // 移除缩略样式
  this.style.display = 'none'; // 隐藏“更多”按钮
});

在上述代码中，.text-container 是包含文本和按钮的容器。.text 类定义了多行文本，并使用 -webkit-line-clamp 来限制显示的行数。按钮默认是隐藏的，只有当文本被缩略时才会显示。点击按钮后，通过JavaScript移除缩略样式并隐藏按钮。

- 阅读更多 -

CSS3新增特性

System

2024-08-07

所有,css3

在CSS3中，新增了许多特性，包括阴影、边框图片、文字阴影、渐变、动画等。以下是一些CSS3的新特性的示例代码：

阴影效果：




div {
  box-shadow: 10px 10px 5px #888888;
}

边框图片：




div {
  border-image: url(border.png) 30 30 round;
}

文字阴影：




h1 {
  text-shadow: 5px 5px 5px #888888;
}

线性渐变：




div {
  background: linear-gradient(to right, red , yellow);
}

旋转动画：




@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
 
div {
  animation: rotate 2s infinite linear;
}

这些示例展示了如何使用CSS3的新特性来增强网页的视觉效果。

- 阅读更多 -

HTML+CSS：展开动画

System

2024-08-07

所有,css3

要实现一个简单的HTML和CSS展开动画，你可以使用CSS的transition属性和一些JavaScript代码。以下是一个例子：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expand Animation</title>
<style>
  .container {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-out;
    background-color: #f5f5f5;
    padding: 10px;
    margin-top: 10px;
  }
  .read-more .btn {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
  }
  .read-more .content {
    display: none;
  }
</style>
</head>
<body>
 
<div class="read-more">
  <button class="btn">Read More</button>
  <div class="content">
    <p>This is the content that will be revealed when you click the button. It can be any text or HTML content you want to show.</p>
  </div>
</div>
 
<script>
document.querySelector('.read-more .btn').addEventListener('click', function() {
  var content = document.querySelector('.read-more .content');
  content.style.display = 'block';
  setTimeout(function() {
    content.classList.add('container');
  }, 0);
});
</script>
 
</body>
</html>

CSS:




.container {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-out;
  background-color: #f5f5f5;
  padding: 10px;
  margin-top: 10px;
}
 
.read-more .btn {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}
 
.read-more .content {
  display: none;
}

JavaScript:




document.querySelector('.read-more .btn').addEventListener('click', function() {
  var content = document.querySelector('.read-more .content');
  content.style.display = 'block';
  setTimeout(function() {
    content.classList.add('container');
  }, 0);
});

这段代码实现了一个按钮点击后内容逐渐展开的效果。通过CSS定义了.container类的初始最大高度为0，并设置了过渡效果。当JavaScript代码监听到按钮点击事件时，它会将内容的display属性设置为'block'，并在下一个事件循环中添加.container类，从而触发最大高度从0到实际内容高度的过渡动画。

- 阅读更多 -

Flutter 基础篇，教你用CSS清除样式

System

2024-08-07

所有,css

在Flutter中，CSS样式通常是用来为Widget添加样式的，但有时候我们需要清除已经应用的样式。Flutter没有直接使用CSS，但我们可以通过设置默认的样式来达到类似的效果。

例如，如果你想清除所有的文本样式，你可以创建一个默认的TextStyle，然后在需要清除样式的地方使用这个默认样式。




// 创建一个默认的TextStyle
final TextStyle defaultTextStyle = const TextStyle();
 
// 在需要清除样式的地方使用这个默认样式
Text(
  '清除样式的文本',
  style: defaultTextStyle,
),

如果你想清除所有的容器样式，你可以创建一个默认的BoxDecoration，然后在需要清除样式的地方使用这个默认样式。




// 创建一个默认的BoxDecoration
final BoxDecoration defaultBoxDecoration = const BoxDecoration();
 
// 在需要清除样式的地方使用这个默认样式
Container(
  decoration: defaultBoxDecoration,
  // ...
),

请注意，这只是清除样式的一种方法，Flutter提供了丰富的样式定制能力，你可以根据需要选择合适的方法来清除或自定义样式。

- 阅读更多 -

学习和总结CSS的字体属性设置

System

2024-08-07

所有,css




/* 设置字体族 */
body {
  font-family: 'Arial', sans-serif;
}
 
/* 设置字体大小 */
h1 {
  font-size: 24px;
}
 
/* 设置字体粗细 */
strong {
  font-weight: bold; /* 或者使用数值 400 到 900 的整数 */
}
 
/* 设置字体样式（斜体） */
em {
  font-style: italic;
}
 
/* 设置行间距 */
p {
  line-height: 1.5; /* 这里可以是无单位的数值或者具体的长度值 */
}
 
/* 设置文本的装饰（下划线） */
a {
  text-decoration: underline; /* 或者 'none' 移除下划线 */
}
 
/* 设置文本的对齐方式 */
div.center-text {
  text-align: center;
}
 
/* 设置文本阴影 */
h2 {
  color: #333333;
  text-shadow: 2px 2px 2px #aaaaaa; /* 水平偏移 垂直偏移 模糊半径 颜色 */
}

这段代码展示了如何在CSS中设置字体族、大小、粗细、样式、行间距、装饰和对齐，以及阴影效果。这些是设计师和开发者经常用到的CSS属性，对于学习前端开发是非常有帮助的。

- 阅读更多 -

css实现文本超出隐藏，并显示省略号

System

2024-08-07

所有,css

要在CSS中实现文本超出隐藏并显示省略号，可以使用以下属性：

overflow: 设置为 hidden 以隐藏超出容器的内容。
text-overflow: 设置为 ellipsis 以显示省略号来表示被截断的文本。
white-space: 设置为 nowrap 以防止文本换行。

以下是实现这种效果的CSS代码示例：




.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

然后将这个类应用到你的HTML元素上：




<div class="ellipsis">这是一段很长的文本，需要被截断并显示省略号。</div>

这样，当文本超出容器宽度时，就会以省略号显示，并且文本不会换行。

- 阅读更多 -

CSS扩展选择器

System

2024-08-07

所有,css

CSS扩展选择器是一种特殊的选择器，它可以根据元素在其位置的上下文关系来选择元素。这些选择器包括：

子选择器（Child Selector）E > F：选择作为E元素子元素的F元素。
后代选择器（Descendant Selector）E F：选择E元素内的所有F元素，不仅限于子元素。
相邻兄弟选择器（Adjacent Sibling Selector）E + F：选择紧跟在E元素之后的F元素。
通用兄弟选择器（General Sibling Selector）E ~ F：选择E元素之后的所有F元素。

实例代码：




/* 子选择器 */
div > p {
  color: red;
}
 
/* 后代选择器 */
div p {
  color: blue;
}
 
/* 相邻兄弟选择器 */
p + div {
  color: green;
}
 
/* 通用兄弟选择器 */
p ~ div {
  color: purple;
}

HTML示例：




<div>
  <p>我是红色，因为我是直接子元素。</p>
  <span>我不会变色。</span>
  <div>我是蓝色，因为我是后代元素。</div>
</div>
<p>紧跟在我之后的Div将是绿色。</p>
<div>我是绿色，因为我是相邻兄弟元素。</div>
<div>我也是绿色，因为我是通用兄弟元素。</div>

- 阅读更多 -

CSS2D3D转换

System

2024-08-07

所有,css

CSS2D3D转换是指在CSS中应用2D或3D转换效果。2D转换主要包括平移(translate)、缩放(scale)、旋转(rotate)和倾斜(skew)等，而3D转换则在此基础上增加了z轴上的转换，如透视(perspective)和转换(transform)。

以下是一些CSS2D3D转换的例子：

2D转换:




/* 平移 */
.element {
  transform: translate(50px, 100px);
}
 
/* 缩放 */
.element {
  transform: scale(1.5, 2);
}
 
/* 旋转 */
.element {
  transform: rotate(45deg);
}
 
/* 倾斜 */
.element {
  transform: skew(30deg, 20deg);
}

3D转换:




/* 设置透视 */
.element {
  perspective: 500px;
}
 
/* 3D旋转 */
.element {
  transform: rotateX(45deg) rotateY(30deg);
}
 
/* 3D位置移动 */
.element {
  transform: translateX(50px) translateY(100px) translateZ(50px);
}
 
/* 3D缩放 */
.element {
  transform: scaleX(1.5) scaleY(2) scaleZ(1.5);
}

CSS3D转换需要硬件加速以实现更好的性能，可以通过在动画或转换元素上设置transform: translateZ(0);或其他非none的backface-visibility属性来实现。

- 阅读更多 -

私藏前端八股收集【CSS篇】

System

2024-08-07

所有,css

以下是一个简单的CSS示例，演示如何使用Flexbox布局创建一个八股收集的表单界面：




/* 基本的CSS重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}
 
/* 头部样式 */
.stock-collector-header {
    text-align: center;
    padding: 20px;
    color: #333;
    background-color: #e6e6e6;
}
 
/* 主要内容区样式 */
.stock-collector-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
}
 
/* 输入框样式 */
.stock-input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
}
 
/* 提交按钮样式 */
.stock-submit {
    background-color: #5cb85c;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
 
.stock-submit:hover {
    background-color: #449d44;
}

这段CSS代码为一个简单的八股收集表单定义了基本的布局和样式。它使用Flexbox布局来创建一个响应式的界面，其中包含一个头部、主要内容区和一个用于提交数据的表单。输入框和按钮都有合适的间距，并且使用了简单的边框和背景色来增强表单的交互感。

- 阅读更多 -

CSS的背景及三大特性

System

2024-08-07

所有,css

背景属性是CSS中非常重要的一部分，它允许我们设置页面元素的背景样式。CSS背景属性允许指定背景颜色，背景图片，背景平铺，背景位置，背景原点等。

背景颜色：

背景颜色属性是用来设置元素的背景颜色的。其主要是通过指定十六进制值、RGB、RGBA、HSL、HSLA或者预定义的颜色名称来实现的。




div {
  background-color: #ff0000; /* 十六进制颜色 */
}
 
div {
  background-color: rgb(0, 255, 0); /* RGB颜色 */
}
 
div {
  background-color: hsl(120, 100%, 50%); /* HSL颜色 */
}
 
div {
  background-color: red; /* 预定义的颜色名称 */
}

背景图片：

背景图片属性是用来设置元素的背景图片的。其主要是通过指定图片的URL路径来实现的。




div {
  background-image: url('image.jpg'); /* 设置背景图片 */
}

背景平铺：

背景平铺属性是用来设置背景图片是否及如何平铺的。其主要是通过指定repeat-x、repeat-y、repeat、space、round、no-repeat来实现的。




div {
  background-repeat: repeat-x; /* 背景图片横向平铺 */
}
 
div {
  background-repeat: repeat-y; /* 背景图片纵向平铺 */
}
 
div {
  background-repeat: no-repeat; /* 背景图片不平铺 */
}

背景位置：

背景位置属性是用来设置背景图片的起始位置的。其主要是通过指定关键词（如top、bottom、left、right、center）或者百分比（如50% 75%）来实现的。




div {
  background-position: top right; /* 背景图片放置在右上角 */
}
 
div {
  background-position: 50% 75%; /* 背景图片放置在水平方向50%、垂直方向75%的位置 */
}

背景原点：

背景原点属性是用来设置背景定位区域的原点的。其主要是通过指定关键词（如padding-box、border-box、content-box）来实现的。




div {
  background-origin: border-box; /* 背景定位区域的原点在边框区域 */
}
 
div {
  background-origin: padding-box; /* 背景定位区域的原点在内边距区域 */
}
 
div {
  background-origin: content-box; /* 背景定位区域的原点在内容区域 */
}

背景尺寸：

背景尺寸属性是用来设置背景图片的尺寸的。其主要是通过指定长度值或者百分比（如auto、100px 50px、50% 33%）来实现的。




div {
  background-size: auto; /* 背景图片保持原始尺寸 */
}
 
div {
  background-size: 100px 50px; /* 背景图片的宽度为100px、高度为50px */
}
 
div {
  background-size: cover; /*

- 阅读更多 -