分类 css3 下的文章

2024-08-07

背景渐变：




/* 线性渐变，从上到下 */
.background-gradient {
  background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);
}
 
/* 径向渐变，从中心到边缘 */
.background-gradient {
  background: radial-gradient(circle, #ff99cc 0%, #33ccff 100%);
}

边框渐变：




/* 不同浏览器的前缀可能不一样，这里以webkit为例 */
.border-gradient {
  border: 2px solid #33ccff;
  border-image: -webkit-linear-gradient(to right, red, yellow, green);
  border-image: linear-gradient(to right, red, yellow, green);
}

文字渐变：




.text-gradient {
  background: -webkit-linear-gradient(45deg, #ff99cc, #33ccff);
  background: linear-gradient(45deg, #ff99cc, #33ccff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

以上代码实现了背景、边框和文字的渐变效果。注意，为了兼容不同浏览器，可能需要添加不同浏览器的前缀（如-webkit-）。

- 阅读更多 -

CSS-Grid（网格）布局

System

2024-08-07

所有,css3

CSS Grid（网格）布局是一种二维布局系统。与flexbox布局系统不同，它被设计为管理网格中的项目，而不是像flexbox那样管理线性布局。

以下是一些CSS Grid的基本使用方法：

创建一个网格容器：




.container {
  display: grid;
}

定义网格的列和行：




.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;  /* 定义三列，每列宽度为100px */
  grid-template-rows: 50px 50px 50px;       /* 定义三行，每行高度为50px */
}

使用网格间隔：




.container {
  display: grid;
  grid-column-gap: 10px;  /* 列间隔为10px */
  grid-row-gap: 10px;     /* 行间隔为10px */
}

使用命名网格线：




.container {
  display: grid;
  grid-template-columns: [first] 100px [second] 100px [third] 100px [fourth];
  grid-template-rows: [header] 50px [content] 50px [footer];
}

将项目放置在网格中：




.item1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}

使用简写属性放置项目：




.item1 {
  grid-area: 1 / 1 / 2 / 2;  /* 行开始 / 列开始 / 行结束 / 列结束 */
}

使用自动填充：




.container {
  display: grid;
  grid-template-columns: 100px auto 100px;  /* 第二列自动填充剩余空间 */
}

设置重复的网格线：




.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);  /* 三列，每列宽度为100px */
}

设置最小和最大网格大小：




.container {
  display: grid;
  grid-template-columns: 100px minmax(150px, 1fr);  /* 最小150px，最大1fr */
}

创建网格区域：




.container {
  display: grid;
  grid-template-areas: 'header header header'
                       'nav    main   sidebar'
                       'footer footer footer';
}

在实际应用中，你可以根据需要将这些属性和值组合起来，以创建灵活的网格布局。

- 阅读更多 -

css内容超出隐藏，文字只显示一半。

System

2024-08-07

所有,css3

要实现文本超出部分隐藏，并且只显示一半的文字，可以使用CSS的text-overflow属性结合overflow和white-space属性。以下是一个简单的示例：




<div class="text-ellipsis">这是一段很长的文字，我们只希望显示它的一半</div>




.text-ellipsis {
  width: 100px; /* 定义容器宽度 */
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  text-overflow: ellipsis; /* 使用ellipsis显示超出部分的文本 */
  direction: rtl; /* 文本方向从右到左 */
}
 
.text-ellipsis::before {
  content: '...'; /* 添加省略号 */
  direction: ltr; /* 确保省略号从左到右显示 */
}

在这个示例中，text-ellipsis类定义了容器的宽度，并且通过设置direction: rtl实现从右到左的文本方向，使得文本从左边开始隐藏，直到隐藏一半的文本为止。::before伪元素用于添加省略号，并通过设置direction: ltr确保省略号显示正确。这样就实现了文本超出部分隐藏，并显示省略号的效果。

- 阅读更多 -

css如何给div添加一个条纹背景，在背景上画一条有宽度的斜线

System

2024-08-07

所有,css3

在CSS中，可以使用线性渐变（linear-gradient）来创建一个条纹背景，并使用 background 属性的特性来画一条有宽度的斜线。以下是一个示例代码：




/* 创建一个具有条纹背景的div */
.striped-background {
  background: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%), #f0f0f0;
  background-size: 100px 100px; /* 调整这个值来改变条纹的宽度 */
}
 
/* 在条纹背景上画一条有宽度的斜线 */
.striped-background::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, transparent 50%, #ff0000 50%); /* 红色斜线 */
  mix-blend-mode: multiply; /* 使斜线与条纹相互影响 */
}

在HTML中使用这个类：




<div class="striped-background"></div>

这段代码会创建一个具有条纹的背景，并且在背景上绘制一条红色的斜线。你可以通过调整 background-size 属性的值来改变条纹的宽度，从而影响斜线的粗细。

- 阅读更多 -

解决flex盒子被内容撑开以及如何显示两行文本后省略

System

2024-08-07

所有,css3

要解决Flex盒子被内容撑开的问题，可以使用CSS的min-width和max-width属性来限制Flex容器的最小和最大宽度，或者使用width属性来固定宽度。如果你希望在文本超过两行后显示省略符号（...），可以使用CSS的text-overflow、white-space和overflow属性。

以下是实现这些功能的CSS样式和HTML结构的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Box Example</title>
<style>
  .flex-container {
    display: flex; /* 使用Flex布局 */
    width: 200px; /* 设置固定宽度 */
    min-height: 50px; /* 设置最小高度 */
    background-color: lightblue; /* 设置背景颜色 */
    margin: 10px; /* 外边距 */
    padding: 10px; /* 内边距 */
    box-sizing: border-box; /* 盒子模型包括内边距和边框 */
  }
  .text {
    flex: 1; /* 允许伸展，占据剩余空间 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 文本溢出显示省略符号 */
    white-space: nowrap; /* 不换行 */
    max-height: 34px; /* 最大高度 */
    line-height: 1.2; /* 行高 */
    display: -webkit-box; /* 用于显示两行文本 */
    -webkit-line-clamp: 2; /* 限制在两行 */
    -webkit-box-orient: vertical; /* 垂直排列 */
  }
</style>
</head>
<body>
<div class="flex-container">
  <div class="text">这里是一些很长的文本，如果超过两行将会显示省略符号...</div>
</div>
</body>
</html>

在这个例子中，.flex-container是一个Flex容器，.text是它的子元素，该子元素将会显示文本内容。通过CSS样式，.text被设置为当内容超过两行后显示省略符号，并且不会因为内容的增长而撑开Flex容器的高度。

System

2024-08-07

所有,css3

CSS3 结构伪类选择器可以用来选择元素基于其父元素的位置关系。以下是三种常见的结构伪类选择器：

:first-child 选择器：选择父元素中的第一个子元素E。
:last-child 选择器：选择父元素中的最后一个子元素E。
:nth-child(n) 选择器：选择父元素中的第n个子元素E。

以下是对应的示例代码：




/* 选择每个 <p> 元素，该元素是其父元素的第一个子元素 */
p:first-child {
  color: red;
}
 
/* 选择每个 <p> 元素，该元素是其父元素的最后一个子元素 */
p:last-child {
  color: blue;
}
 
/* 选择每个 <p> 元素，该元素是其父元素的第二个子元素 */
p:nth-child(2) {
  color: green;
}

在使用 :nth-child 选择器时，可以使用更复杂的公式，如 2n 选择所有偶数项，2n+1 选择所有奇数项，n+5 选择第5个及以后的所有项，-n+5 选择前5个项等。

- 阅读更多 -

小程序中如何使用clip-path

System

2024-08-07

所有,css3

在小程序中使用clip-path属性，可以通过CSS来裁剪图片或者其他元素的显示区域。小程序支持大部分的clip-path属性值，包括circle()、ellipse()、polygon()、inset()等。

以下是一个简单的例子，展示如何在小程序中使用clip-path裁剪图片：

首先，在页面的.wxss文件中定义样式：




.clip-path-class {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

然后，在页面的.wxml文件中应用该样式到<image>标签上：




<image class="clip-path-class" src="path/to/your/image.jpg"></image>

在上面的例子中，clip-path使用了polygon()函数来指定一个多边形，这个多边形会将图片裁剪成一个等腰三角形。你可以根据需要调整这个多边形的顶点位置，来实现不同的裁剪形状。

- 阅读更多 -

css3快速完成重构title提示tip样式

System

2024-08-07

所有,css3

CSS3可以用来创建一个美观的title提示框，以下是一个简单的例子：




.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* 可以换成你喜欢的边框样式 */
}
 
.tooltip:hover .tooltiptext {
  visibility: visible;
}
 
.tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
 
  /* 位置 */
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120px/2 = 60px) */
}




<div class="tooltip">悬停我
  <span class="tooltiptext">这是一个提示框</span>
</div>

这段代码定义了一个基本的tooltip样式，当鼠标悬停在带有tooltip的元素上时，会显示出一个提示框。你可以根据需要调整.tooltiptext的样式，比如背景颜色、文本颜色、边框等。

- 阅读更多 -

CSS 圆锥渐变+MASK遮罩实现WIFI图标

System

2024-08-07

所有,css3




.wifi-icon {
  width: 100px;
  height: 100px;
  background: linear-gradient(120deg, #5e72e4, #8929b1);
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}
 
.wifi-icon::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom, #5e72e4, #8929b1);
  border-radius: 50% 50% 0 0;
}
 
.wifi-icon::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, #5e72e4, #8929b1);
  border-radius: 0 100% 0 0;
}
 
.wifi-icon::mask {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

这段代码使用伪元素和mask属性创建了一个圆锥形状的WIFI图标。它使用了CSS线性渐变来实现颜色的过渡效果，并且使用了border-radius来实现圆角的效果。通过使用::before和::after伪元素，我们创建了上半部分的圆锥形状，并使用::mask伪元素来创建一个从下到上透明度逐渐减小的遮罩，以实现圆锥的底部。这是一个简单而有效的实现方式，适合初学者学习和理解。

- 阅读更多 -

可视化系列讲解：canvas的动画实现

System

2024-08-07

所有,css3




// 获取canvas元素并设置上下文
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
 
// 设置动画帧率
const fps = 60;
 
// 设置动画的相关配置
const config = {
    x: 0,
    y: 0,
    radius: 10,
    color: 'red',
    speed: 1, // 每帧移动的像素数
    direction: 'right' // 动画的初始移动方向
};
 
// 绘制动画的函数
function draw(config) {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
    ctx.beginPath();
    ctx.arc(config.x, config.y, config.radius, 0, 2 * Math.PI); // 绘制圆形
    ctx.fillStyle = config.color;
    ctx.fill();
}
 
// 更新动画配置的函数
function update(config) {
    if (config.direction === 'right') {
        config.x += config.speed;
        if (config.x >= canvas.width - config.radius) {
            config.direction = 'down';
        }
    } else if (config.direction === 'down') {
        config.y += config.speed;
        if (config.y >= canvas.height - config.radius) {
            config.direction = 'left';
        }
    } else if (config.direction === 'left') {
        config.x -= config.speed;
        if (config.x <= config.radius) {
            config.direction = 'up';
        }
    } else if (config.direction === 'up') {
        config.y -= config.speed;
        if (config.y <= config.radius) {
            config.direction = 'right';
        }
    }
}
 
// 运行动画
function run() {
    update(config);
    draw(config);
    setTimeout(run, 1000 / fps); // 使用setTimeout来控制帧率
}
 
run(); // 开始动画

这段代码使用了setTimeout来实现循环动画，通过修改config对象中的x和y值，实现小圆点在canvas上不断移动，并且会在碰到边界时改变移动方向。这个简单的例子展示了如何使用JavaScript和HTML canvas元素创建基本的动画效果。

- 阅读更多 -